如何搭建一個(gè)完美的組件庫(kù)？

如何做一個(gè)組件庫(kù)？本篇文章不會(huì)講一個(gè)小的組件如何設(shè)計(jì)，而是會(huì)整體講一個(gè)“逼近完美”的組件庫(kù)是怎么設(shè)計(jì)的。

組件庫(kù)劃分

要想設(shè)計(jì)一個(gè)靈活好用的組件庫(kù)，第一步就是要合理的劃分組件，組件的粒度足夠細(xì)，邊界足夠清晰，這樣才能最大程度地復(fù)用組件。

從一張圖介紹各種組件的區(qū)別，基礎(chǔ)組件，也就是與業(yè)務(wù)功能無(wú)關(guān)的組件，比如 antd/fusion 中提供的組件，upload， dialog 等等這些。但是只有這些基礎(chǔ)組件是遠(yuǎn)遠(yuǎn)不夠的。

比如，你可能會(huì)經(jīng)常遇到這樣的場(chǎng)景：

• 前端開(kāi)發(fā): 設(shè)計(jì)師又造“新輪子”了， 為什么就不能本本份份使用 fusion 或者 antd 的基礎(chǔ)樣式呢？
• 設(shè)計(jì)師: “我覺(jué)得這個(gè)基礎(chǔ)樣式?jīng)]有靈魂，我覺(jué)得這樣比較好看”

這種時(shí)候，業(yè)務(wù)組件就有用處了。此時(shí)可以利用 fusion 或者 antd 的基礎(chǔ)組件，進(jìn)行二次封裝，形成自己產(chǎn)品的獨(dú)特組件，也稱(chēng)“業(yè)務(wù)獨(dú)特領(lǐng)域的組件”。

但事實(shí)上，還是有很多場(chǎng)景，他可能會(huì)頻繁變更，如果開(kāi)發(fā)一個(gè)組件，里面的傳參等等都可能會(huì)不停變更，此時(shí)就可以直接用“區(qū)塊”來(lái)實(shí)現(xiàn)。直接提供一個(gè)組件代碼模版，讓使用方直接復(fù)制粘貼，然后在里面修改他的內(nèi)容。

再往高一點(diǎn)，頁(yè)面級(jí)別，也稱(chēng)為模版， 比如“登錄頁(yè)”，可能不同產(chǎn)品之間，這個(gè)登錄頁(yè)中間一部分邏輯是變化不可控的，那可以直接提供一個(gè)頁(yè)面模版，供使用方直接使用， 比如 頁(yè)面模版^[1]。

好了， 通過(guò)上面的講述，我們知道在什么場(chǎng)景下該使用什么組件，知道如何劃分組件可以讓我們的組件庫(kù)更加靈活強(qiáng)大，接下來(lái)就要講一下如何開(kāi)發(fā)一個(gè)組件了。

組件開(kāi)發(fā)

• 設(shè)計(jì)師: 哎，我這里的間距要從 14px 改成 16px， 然后字體顏色改成 ***
• 前端開(kāi)發(fā): 我…………

難道一個(gè)前端每天都要在這調(diào)整樣式嗎？那未免太無(wú)趣了…… 此時(shí)一個(gè)主題變量就很重要了。

1. 主題變量

我們可以提前跟設(shè)計(jì)師約定， 比如主字體大小多少，主顏色是什么，然后設(shè)計(jì)師出稿時(shí)按照設(shè)置的變量來(lái)出。

這樣前端跟設(shè)計(jì)師之間就通過(guò)一個(gè) scss 變量來(lái)銜接，搭建一個(gè)主題配置的網(wǎng)站，如下【fusion 主題配置】，在開(kāi)發(fā)業(yè)務(wù)組件的時(shí)候，注入該網(wǎng)站配置的相關(guān)變量。

設(shè)計(jì)師可以在這里設(shè)置他想要的變量，最后生成對(duì)應(yīng)的 scss 變量，如下截圖：

經(jīng)過(guò)下面的操作流程，在實(shí)際項(xiàng)目中，前端開(kāi)發(fā)只需要重新編譯構(gòu)建項(xiàng)目即可修改組件樣式， 真正從樣式中解放出來(lái)～

好了，除了 css 樣式，做一個(gè)組件還需要注意以下一些事情。

2. 如何讓一個(gè) npm 包體積最小

1. umd -> esm

2. 配置 peerDependencies 。。。

 "peerDependencies": {    "react": ">=16.12.0",    "react-dom": ">=16.12.0"  }

如上的配置，可以讓組件庫(kù)下的 node_modules 不安裝 react，同時(shí)指定組件庫(kù)使用方需安裝的 react/reactDOM 的版本。

3. 配置對(duì)應(yīng)的 externals

3. 文檔生成

之前分享過(guò)一篇 react 文檔自動(dòng)生成的文章， 感興趣可以看一下

4. commit 規(guī)范 & changelog 生成

首先，使用 husky 插件， 在 pre-commit 階段添加鉤子，限制該項(xiàng)目提交的 git commit 信息。

之后，我們?cè)倮?conventional-changelog^[2] 插件， 把歷史 commit 信息進(jìn)行篩選提煉，自動(dòng)化生成統(tǒng)一規(guī)劃的 CHANGELOG 文件。

5. 打通設(shè)計(jì)師&前端工具

如果前端埋頭造輪子，相信我，你們的設(shè)計(jì)師依然不會(huì)放過(guò)你們，因?yàn)樗恢滥銈冊(cè)炝耸裁摧喿?/p>

所以此時(shí)實(shí)現(xiàn)一個(gè) sketch 插件，將實(shí)現(xiàn)的組件同步到 sketch 插件中，這樣每次設(shè)計(jì)師就可以看著已有的組件來(lái)拖拽生成設(shè)計(jì)稿。大大減少前端&設(shè)計(jì)師的溝通。如下圖：

實(shí)現(xiàn)上面一個(gè)完整的鏈路，可以大大提升前端的開(kāi)發(fā)效率。不過(guò)一個(gè)公司如果想 從 0 搭建這樣一套完整的組件庫(kù)，務(wù)必要投入大量的人力。這時(shí)候，可以上 fusion 上看看， 上面什么都有。

參考資料