组件库搭建

作者:Yuan Tang

更新于:5 个月前

字数统计:816 字

阅读时长:2 分钟

思路流程

前端开发时，常常会搭建一个自己的组件库。搭建一个组件库最基础的步骤总览如下：

创建一个项目（脚手架、lerna ），后续项目的 readme.md 就是该脚手架的文档
项目下新建文件夹，后续在此开发
Workspace 定义连接
编写组件库入口代码，支持按需引入和全局引入。后续引入组件库只需引入入口文件代码
在文档项目中引入，开发调试
编写脚本命令，用于打包组件库

上手实操

前置操作

接下来先新建一个项目，这里以 vite 创建的 vue3 项目为例。

bash

npm init vue@latest

新建一个组件库的文件夹，推荐先新建一个 package 文件夹，再在里面新建，原因是后续可能会用到其他工具。本次新建了一个 MyUI 文件夹。

新建好后新建一个 index.js 文件，export default 导出一个对象。

市场上组件库都是直接 import xxx from '组件库名称' ，无需 ./ 路径引入。想要实现该功能就需要 Workspace 定义连接。返回项目最外层的 package.json 文件中定义 Workspace 。

json

{
  // ...
  "workspace": [
    "docs/.vitepress/components/MyUI*"
  ]
}

注意：
在定义好 Workspace 后，需要 npm i 一下，无之前是否已经 npm i
通过命令行初始化 MyUI 文件夹，让其生成 package.json 文件，后续映射到 node_modules 。在 package.json 文件中主要由 main 字段控制指定导出的文件
注意 node.js 版本要在 16以上，否则不生效

现在 import 后打印，控制台能看到导出的对象。

全局注册

接下来思考一下如何实现全局引入。全局引入一个组件时，都是通过 use() 注册组件。

const app = createApp(App)
app.use(myui)

use() 本质是传一个对象进去，它会调用 install 方法，执行方法是会传入一个参数 vue ，可以通过该参数执行 mixin 混入和 component 注册组件等。

引入全局的组件，循环注册。

import comp1 from './comp1/index.vue'
import comp2 from './comp2/index.vue'

const obj = {
  comp1,
  comp2
}

export default {
  install(vue) {
    Object.keys(obj).forEach((item) => {
      vue.component(item, obj[item])
    })
  }
}

局部注册

全局导出是 export default ，局部导出则通过 export 导出，依次导出组件即可。

export {
  comp1, comp2
}

打包

最后打开是打包组件库 myui 的代码，因此需要在 package.json 文件中添加一个新的打包命令。

{
  // ...
  "scripts": {
    // ...
    "build": "vite build --config lib.config.js",
  },
}

然后在根目录下新建一个 lib.config.js 文件，复制 vite.config.js 代码修改一下。

打包时默认以入口文件的 index.html 打包，以整个项目为单位打包。想要打包为组件库则需要改写模式，改写打包的入口文件。

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig ({
    plugins: [
        vue()
    ]，
    // 改写模式
    build: {
        lib: {
            entry: './package/myui/index.js',
            name: 'myui'
        }
    }
})

打包后会生成两个文件，其中xxx.mjs 文件用于适配 import 引入方式；xxx.umd.js 适配浏览器引入方式。最后通过 npm 官网发布即可。

组件库打包好后打包文档，文档直接 npm run build ，打包后放到服务器上即可。

Contributors

Yuan Tang

组件库搭建 ​

思路流程 ​

上手实操 ​

前置操作 ​

全局注册 ​

局部注册 ​

打包 ​

Contributors ​