背景
由于公司使用qiankun，各模块拆分为不同的项目，不同项目中的有相同或者类似的功能会有代码的 copy，如果有内容的修改，哪怕只是修改一个文案，也要同时修改很多文件，萌生了对公共组件库进行管理的想法。
这样做的好处是什么呢？
- 首先就是不用在重复造轮子；
- 多模块使用相同的风格，保证标准、风格的统一性；
- 提高编码效率，更专注于业务逻辑；
工具
我们使用的是 dumi+father 来实现自己的公共组件库，至于为什么会选择这两个呢？
- dumi 是蚂蚁金服插件化的企业级前端框架，专门为组件开发场景而生的文档工具
- father的构建编译速度更快，更友好，
支持按需引入
搭建步骤
// 新建项目
mkdir -p my-components
// 初始化package文件
npm init
// 使用脚手架进行项目初始化
npx @umijs/create-dumi-lib
初始化完成后，文件目录结构如下
image.png
.umirc.ts 文件
是umi项目的配置文件，而dumi是umi在组件库开发中的一个最佳实践，但是它本质还是一个umi插件，因此只要umi的配置，都是可以在dumi中正常使用的。
image.png
.fatherrc.ts 文件
是father-build的配置文件，组件库如何编译以及编译后产生的类型都需要在这里使用。
image.png
/docs/index.md
image.png
现在基础配置已经完成，让我们写一个组件，跟平时开发无区别
import React, { FC } from 'react';
type IndexProps = {
title?: string
};
const Index: FC<IndexProps> = (props) => {
return (
<h2>
{props?.title ?? 'xhh'}
</h2>
)
}
export default Index;
dome及文档
image.png
好了，当我们 执行 npm run build 即可完成打包，我们执行 npm publish dist 把组件发布到仓库即可；
image.png
