怎么搭建一個簡單的組件庫

組件庫劃分

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

 

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

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

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

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

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

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

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

組件開發(fā)

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

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

1. 主題變量

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

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

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

 

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

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

2. 如何讓一個 npm 包體積最小

1. umd -> esm

2. 配置 peerDependencies 。。。

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

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

 

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

3. 文檔生成

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

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

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

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

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

如果前端埋頭造輪子，相信我，你們的設(shè)計師依然不會放過你們，因為他不知道你們造了什么輪子

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

 

 

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