前言
公司业务积累了一定程度，需要搭建自己的组件库，有了组件库，整个团队开发效率会提高恨多。
做组件库需要提供开发调试环境，和组件文档的展示，调研了几个比较主流的方案，如下：
- docz 配置简单，功能相对来说也较完善。我们现在项目是用的umi框架，正好官方也提供了开发库的脚手架，也集成了docz，因此我们决定采用它来开发我们的组件库。
- storybook 功能比较全面，支持自定义webpack配置等特性
- docsifyjs 写文档比较友好，对vue支持比较好，react 用的不是特别多
组件库搭建
-
monorepo（多包仓库）
现在比较流行的是
monorepo（多包仓库）,我们采用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 文档和案例
-
-
开发，打包，发布
我们介绍了框架目录，大家可以按约定去开发。由于 umi-plugin-library 目前开发还不是完善，文档也不是很全。通过查看源码总结了一下命令，包含开发，打包，发布到github pages 上.
-
yarn dev启动开发环境 -
yarn build:doc构建文档 -
yarn deploy:doc构建文档并发布到github pages -
yarn build构建组件产物
-
成果展示
结束语
我简单的介绍了组建搭建，搭建的过程中还有许多小细节需要我们注意。我把项目放到了github上，大家有兴趣可以去查看