UI 库搭建

搭建 Monorepo

先在根目录下创建一个 pnpm 的工作共建文件 pnpm-workspace.yaml

yaml

packages:
  - packages
  - docx

packages 为 ui 库项目，docs 为 ui 文档项目

创建这两个文件夹，这时我们的文件的目录如图下：
create

然后输入指令 pnpm init 来创建根目录的 package.josn 文件

搭建 packages

packages 为我们 UI 库的代码，我们使用 vite 来创建 UI 项目。你也可以根据自己的需要和喜好来选择创建工具。

创建完后整个 packages 目录如下：

create

导出组件

怎么封装组件这里就不做过多的描述。不过需要的是在导出组件的时候，要提供全局安装和局部导入两个方法即可

例如我在每个组件文件下都会创建一个index.js，作用是给组件添加上 install 方法

import LoadingButton from './src/index.vue'

LoadingButton.install = function(Vue) {
    Vue.component(LoadingButton.name, LoadingButton)
}

export default LoadingButton

然后再 packages 新增 index.js 作为打包时的入口文件

// index.js
import YnLoadingButton from './ui/YnLoadingButton/index'

// 按需引入
export { YnLoadingButton }

// 全局引入
const components = {
    YnLoadingButton
}
const YnUi = {
    install: function (Vue) {
        Object.keys(components).forEach(key => {
            components[key].install(Vue)
        })
    }
}

export default YnUi

到这一步组件相关内容基本已完成，这时我们要修改 vite.config.js 来打包我们的组件

defineConfig({
    plugins: [vue()],
    build: {
        lib: {
            entry: './src/index.js',  // 打包入口文件，也就是上面的 index.js
            formats: ['es', 'cjs',]  // 打包生成的文件支持导入的模式， es 为 ES6 的导入，cjs 为CommonJS 
        },
        rollupOptions: {
            external: ['vue']  // 剔除 vue
        }
    }
})

这时执行打包指令，就会发现打包后的文件生成了两个，一个.js 结尾，另一个则是 .cjs 结尾。刚好对应上我们的配置。

值得注意的是，我们 package.json 还需要配置 main ，来告诉程序 import 时需要加载的是哪个文件.

json

{
    "main": "dist/yn-ui.js"
}

TIP

如果 UI 库是公司私有的，那么最好在 package.json 中加上 "private": true 来表明当前的项目是私有的。防止项目被意外发布到公共的 npm 注册表。

docx 文档搭建

一个 UI 库当然离不开一份相应的文档，本文则使用 vitePress 来作为 UI 库的文档。

搭建过程安装 vitePress 官方说明来即可，需要注意的是在 docx 引入 packages 作为包的时候安装指令

pnpm --filter docx i -S packages

指令配置

根目录上如何配置子项目运行的指令需要用到 -C 来指定项目，例如：

json

{
//   ...
  "scripts": {
    "docs:dev": "pnpm run -C docs docs:dev"
  },
//   ...
}

其它运行指令，根据自己需求配置即可

UI 库搭建 ​

搭建 Monorepo ​

搭建 packages ​

导出组件 ​