从 0 到 1 搭建 UI 组件库
本文记录自己搭建 React UI 组件库并发布的全过程，可帮你实现自己的 UI 组件库搭建。
本文所涉及的知识有
react、dumi、father-build等
通过本篇文章，你大概能了解到以下的内容：
- dumi 创建组件库
- prettier 检测代码风格
- father-build 构建工具
dumi 创建组件库
1、创建一个 react-dumi-ui 文件并用 VScode 编辑器打开
$ mkdir react-dumi-ui && cd react-dumi-ui
2、用 dumi 脚手架创建组件库项目
$ yarn create @umijs/dumi-lib --site
3、安装依赖并运行
$ yarn
$ yarn start
正常运行效果如下所示：
默认启动 8000 端口，当然你可以修改你想启动的端口，通过添加/.env文件来自定义端口
PORT=5200
BROWSER=none
ESLINT=1
更多配置项请移步 umi 环境变量 查看
编写组件及文档
1、编写一个分割线组件
- 在文件
/src下创建目录Divider，目录结构：
├── src/Divider
├── index.less // 组件样式
├── index.md // 组件文档
├── index.test.tsx // 组件测试
└── index.tsx // 组件代码
详细代码请查看 gitHub
2、编写完成组件后，修改 /src/index.ts 文件，添加组件：
export { default as Divider } from './Divider';
3、执行命令验证组件是否可用
$ yarn test
If it fails, the package should be missing:
$ yarn add react-dom@17.0.1 --dev
基于 dumi 构建组件文档
1、每个组件中的 index.md 对应每个组件的使用文档，md 文件头部编写规则如下：
---
title: 自定义页面名称
nav:
path: /自定义导航路由
title: 自定义导航名称
order: 控制导航顺序，数字越小越靠前，默认以路径长度和字典序排序
group:
path: /自定义分组路由，注意，分组路由 = 导航路由 + 自己
title: 自定义分组名称
order: 控制分组顺序，数字越小越靠前，默认以路径长度和字典序排序
---
## 组件API
...
2、打包组件文档
$ yarn docs:build
打包后，将会在目录中生成
docs-dist文件
组件文档运行效果如下所示：
基于 father-build 构建
father-build 是 dumi 的打包工具，在 dumi 初始化项目时已经安装。
是一款基于 rollup 和 babel 的组件打包工具，具体使用方式详见文档。 我们只基于 babel 打包
1、修改 /.fatherrc.ts
export default {
esm: 'babel',
};
若你是引入less编写组件风格，则需要将 less 转 css，否则发布后的 UI 库样式可能不生效，你只需要在 /.fatherrc.ts 配置：
export default {
esm: 'babel',
lessInBabelMode: true,
};
2、修改 /package.json
{
...
"module": "es/index.js",
"typings": "es/index.d.ts",
"files": [
"es"
]
}
3、前两步配置完成后，执行打包命令：
$ yarn build
打包后，将会在目录中生成
es文件
发布到 NPM
1、登录 npm，依次输入相关信息：
npm login --registry https://registry.npmjs.org
- Username: xxxxxx
- Password: xxxxxx
- Email: (this IS public): xxx@163.com
2、发布到 npm
npm publish --registry https://registry.npmjs.org
- 注意每次发包前，确定
package.json中的version是否更新，可通过命令设置 npm 包版本
npm version 1.1.0
- 为了不污染 npm 环境，测试包尽量 72 小时内删除项目~
3、删除 npm 包，或者删除某个版本
npm unpublish --registry https://registry.npmjs.org xxx@1.1.1 --force
项目完整目录结构
.
├── docs // 通用组件
├── docs-build // 组件文档打包后
├── es // 组件打包后文件
├── node_modules // 依赖包
├── src
├── .umi // 项目启动零时文件
├── Divider // 组件 Divider
└── index.ts // 组件入口文件
├── .editorconfig // IDE 配置
├── .env // 项目启动环境配置
├── .fatherrc.ts // 项目构建配置
├── .gitignore // Git 忽略配置
├── .prettierignore // Prettier 忽略配置
├── .prettierrc.js // Prettier 配置
├── .umirc.ts // 项目配置
├── LICENSE // 版权说明
├── README.md // 说明文档
├── package.json // yarn 配置
├── yarn.lock // yarn 依赖版本锁定
└── tsconfig.json // ts 配置
