1.组件库全量打包

所有的文件打包到一个文件中，直接引入打包的一个文件就行。

1.新建packages文件夹，这个文件夹下面放置编写好的所有的组件，也就是我们打包的入口文件夹。然后拷贝其他的引用的文件夹，修改文件的路径。ps：不要忘记在packages/index.ts中引入style样式文件。

// command/build.js
// 打包配置
const path = require('path')
const { defineConfig, build } = require('vite')
const vue = require('@vitejs/plugin-vue')
const vueJsx = require('@vitejs/plugin-vue-jsx')// 打包入口文件夹
const entryDir = path.resolve(__dirname, '../packages')// 出口文件夹
const outDir = path.resolve(__dirname, '../lib')// vite基础配置
const baseConfig = defineConfig({configFile: false,publicDir: false,plugins: [vue(), vueJsx()]
})// rollup打包
const rollOptions = {// 排除的包，不需要打包的enternal: ['vue', 'vue-router'],// 使用全局的vueoutput: {globals: {vue: 'Vue'}}
}// 全量打包构建方法
const buildAll = async() => {await build({...baseConfig,build: {rollOptions,// lib：打包的库配置lib: {// 打包的入口entry: path.resolve(entryDir, 'index.ts'),// 打包的名字name: 'mooc-element-components',fileName: 'mooc-element-components',// 输出格式（exmodule，umd规范）formats: ['es', 'umd']},outDir}})
}const buildLib = async () => {await buildAll()
}buildLib()

package.json 配置启动脚本

scripts: {"build:components": "node ./command/build.js""lib": "build:components"
}

npm run lib

然后在项目中引入打包的文件

2.按需打包

每个文件按需打包，这样引入的时候就可以按需要引入使用的组件，不必全部引入。

command/build.js

// 打包配置
const path = require('path')
const { defineConfig, build } = require('vite')
const vue = require('@vitejs/plugin-vue')
const vueJsx = require('@vitejs/plugin-vue-jsx')const fsExtra = require('fs-extra')const fs = require('fs')
// 打包入口文件夹
const entryDir = path.resolve(__dirname, '../packages')// 出口文件夹
const outDir = path.resolve(__dirname, '../lib')// vite基础配置
const baseConfig = defineConfig({configFile: false,publicDir: false,plugins: [vue(), vueJsx()]
})// rollup打包
const rollOptions = {// 排除的包，不需要打包的enternal: ['vue', 'vue-router'],// 使用全局的vueoutput: {globals: {vue: 'Vue'}}
}// 单组件打包构建，需要传入每个文件的名字
// name: 组件的名字
const buildSingle = async (name) => {await build({...baseConfig,build: {rollOptions,lib: {entry: path.resolve(entryDir, name),// 打包的名字name: `index`,fileName: `index`,// 输出格式formats: ['es', 'umd']},outDir: path.resolve(outDir, name)}})
}// 每个组件生成自己的package.json
// 安装：fs-extra
const createPackageJson = (name) => {const fileStr = `{"name": "${name}","main": "index.umd.js","module": "index.es.js","style": "style.css"}`// 输出fsExtra.outputFile(path.resolve(outDir, `${name}/package.json`), fileStr, 'utf-8')
}const buildLib = async () => {// 获取组件名称的数组const components = fs.readdirSync(entryDir).filter((name) => {const componentDir = path.resolve(entryDir, name)// 判断是否是目录const isDir = fs.lstatSync(componentDir).isDirectory()// 是文件夹，并且这个文件见下面包含index.ts文件return isDir && fs.readdirSync(componentDir).includes('index.ts')})// 循环构建for (const name of components) {await buildSingle(name)createPackageJson(name)}
}
buildLib()

npm install fs-extra --save

package.json 配置启动脚本

scripts: {"build:components": "node ./command/build.js""lib": "build:components","lib": "build:components && cp package.json"
}

npm run lib

3.发布组件库到 npm

1.创建package.json

 {"name": "${name}","main": "index.umd.js","module": "index.es.js","style": "style.css","types:":"index.d.ts","keywords": {"element-plus",}}

2.创建index.d.ts

3.vitepress的搭建和使用

vitepress：新一代建站工具，文档编辑工具，适合前后端开发人员快速建站

4.部署项目在 github 和 gitte

总结：组件库全量打包和按需打包
发布组件库到 npm
vitepress的搭建和使用
部署项目在 github 和 gitte
组件库文档编写
组件库文档交互