dumi+father搭建react组件库

背景

由于公司使用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