背景

由于公司使用qiankun，各模塊拆分為不同的項目，不同項目中的有相同或者類似的功能會有代碼的 copy，如果有內(nèi)容的修改，哪怕只是修改一個文案，也要同時修改很多文件，萌生了對公共組件庫進行管理的想法。

這樣做的好處是什么呢？

• 首先就是不用在重復造輪子；
• 多模塊使用相同的風格，保證標準、風格的統(tǒng)一性；
• 提高編碼效率，更專注于業(yè)務邏輯；

工具

我們使用的是 dumi+father 來實現(xiàn)自己的公共組件庫，至于為什么會選擇這兩個呢？

• dumi 是螞蟻金服插件化的企業(yè)級前端框架，專門為組件開發(fā)場景而生的文檔工具
• father的構(gòu)建編譯速度更快，更友好，支持按需引入

搭建步驟

// 新建項目
mkdir -p my-components

// 初始化package文件
npm init

// 使用腳手架進行項目初始化
npx @umijs/create-dumi-lib

初始化完成后，文件目錄結(jié)構(gòu)如下

image.png

.umirc.ts 文件
是umi項目的配置文件，而dumi是umi在組件庫開發(fā)中的一個最佳實踐，但是它本質(zhì)還是一個umi插件，因此只要umi的配置，都是可以在dumi中正常使用的。

image.png

.fatherrc.ts 文件
是father-build的配置文件，組件庫如何編譯以及編譯后產(chǎn)生的類型都需要在這里使用。

image.png

/docs/index.md

image.png

現(xiàn)在基礎(chǔ)配置已經(jīng)完成，讓我們寫一個組件，跟平時開發(fā)無區(qū)別

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

好了，當我們 執(zhí)行 npm run build 即可完成打包，我們執(zhí)行 npm publish dist 把組件發(fā)布到倉庫即可；

image.png