前言
公司业务积累了一定程度, 需要搭建自己的组件库, 有了组件库, 整个团队开发效率会提高恨多.
做组件库需要提供开发调试环境, 和组件文档的展示, 调研了几个比较主流的方案, 如下:
https://github.com/pedronauck/docz 配置简单, 功能相对来说也较完善. 我们现在项目是用的 umi 框架, 正好官方也提供了开发库的脚手架, 也集成了 docz,因此我们决定采用它来开发我们的组件库.
https://github.com/storybooks/storybook 功能比较全面, 支持自定义webpack 配置等特性
https://github.com/docsifyjs 写文档比较友好,对 vue 支持比较好, react 用的不是特别多
组件库搭建
monorepo(多包仓库)
现在比较流行的是monorepo(多包仓库),我们采用 https://github.com/lerna/lerna 框架去管理开发项目. lerna 我认为最主要的功能给我们提供了包的版本管理,快速发布 NPM 等. 像鼎鼎大名的 babel 就是采用这种方式来管理. lerna 初始化项目大家可以看下官方文档, 要注意它的两种模式
Fixed/Locked(锁定, 固定模式) 默认初始化就是使用的这种方式.此方式包升级相对应的所有包都会升级成新版本
Independent (独立模式) 支持单独包的改动升级版本
lerna 项目文件目录描述
├── README.md 项目介绍
├── lerna.JSON lerna 配置文件
├── package.JSON
├── packages 包目录
│ └── ***-component 具体包文件
└── yarn.lock
创建 componet 组件库
我们在 packages 文件目录下创建我们的组件库, 可以起名为 ***-component, 接下来就是初始化项目, 可以用 umi提供的脚手架去创建, 根据文档创建即可. 我们介绍下文件目录的用途
框架目录
├── bcomponents 存放我们的业务组件
├── components 存放基础组件
│ ├── resource 资源组件
│ └── tag 标签组件
├── index.JS 入口文件
├── style 样式文件
│ ├── index.JS
│ ├── index.Less 入口样式
│ ├── minxins Less minxins
│ └── themes 默认主题
├── utils 工具目录
│ └── utils.JS 工具类
组件目录
├── resource resource 组件文件夹
│ ├── index.JS 入口文件
│ ├── index.Less Less 描述文件
│ ├── index.mdx 文档和案例
│ ├── resource.JS 组件内容
│ ├── resourceContext.JS 组件内容
│ └── resourceGroup.JS 组件内容
└── tag tag 组件
├── index.JS 入口文件
└── index.mdx 文档和案例
开发, 打包, 发布
我们介绍了框架目录, 大家可以按约定去开发.由于 https://github.com/umijs/umi-plugin-library 目前开发还不是完善, 文档也不是很全. 通过查看源码总结了一下命令,包含开发, 打包, 发布到 GitHub pages 上.
yarn dev 启动开发环境
yarn build:doc 构建文档
yarn deploy:doc 构建文档并发布到 GitHub pages
yarn build 构建组件产物
成果展示
结束语
我简单的介绍了组建搭建,搭建的过程中还有许多小细节需要我们注意. 我把项目放到了 GitHub 上, 大家有兴趣可以去查看
https://github.com/9-web/zet-component
组建文档 https://9-web.github.io/zet-component/#/
来源: https://www.cnblogs.com/qiaojie/p/10311080.html