前端業(yè)務(wù)組件庫(kù)怎么樣做到極致？
對(duì)于前端同學(xué)來說， 業(yè)務(wù)組件庫(kù)肯定不陌生，很多前端團(tuán)隊(duì)都會(huì)選擇建設(shè)業(yè)務(wù)組件庫(kù)來解決
業(yè)務(wù)組件跨項(xiàng)目復(fù)用的問題 同時(shí)統(tǒng)一代碼實(shí)現(xiàn)，統(tǒng)一代碼質(zhì)量
從而提高業(yè)務(wù)的開發(fā)效率。但是我發(fā)現(xiàn)埋在明確需求之后，開始調(diào)研技術(shù)方案時(shí)，很多同學(xué)并不清楚要調(diào)研哪些技術(shù)點(diǎn)，怎么找到某個(gè)具體方向的解決方案，找到方案之后都需要試哪些case, 以及怎么把這些方案集成在一起等等。
其實(shí)不用想那么復(fù)雜，你只需要按照以下三個(gè)技術(shù)實(shí)現(xiàn)的關(guān)鍵點(diǎn)搞定就可以了。
第一步："搭地基"--業(yè)務(wù)組件庫(kù)的整體架構(gòu)設(shè)計(jì) 第二步："建主體結(jié)構(gòu)"--業(yè)務(wù)組件庫(kù)的基礎(chǔ)技術(shù)設(shè)計(jì) 第三步:"粉刷外立面"-- 業(yè)務(wù)組件庫(kù)的對(duì)外文檔服務(wù)
你一定覺得這三個(gè)點(diǎn)還是太宏觀了，不好理解，所以接下來，我就分別介紹這三個(gè)關(guān)鍵點(diǎn)到底是什么。你可以參考這些關(guān)鍵點(diǎn)來進(jìn)行相關(guān)技術(shù)調(diào)研
一. 業(yè)務(wù)組件庫(kù)的整體架構(gòu)設(shè)計(jì)
對(duì)于業(yè)務(wù)組件庫(kù)的整體架構(gòu)設(shè)計(jì)而言，核心問題是業(yè)務(wù)組件庫(kù)的代碼時(shí)如何來組織和管理。
首先，我們把代碼倉(cāng)庫(kù)建好。業(yè)界一般會(huì)把同一類組件庫(kù)用單個(gè)倉(cāng)庫(kù)的形式維護(hù)，并且把組件開發(fā)成NPM包的形式，這里的重點(diǎn)是，**你要考慮把所有的組件打包成一個(gè)大的NPM包，還是分割是一個(gè)個(gè)獨(dú)立的小NPM包 。**不要小看這個(gè)問題， 這兩種選擇會(huì)使倉(cāng)庫(kù)的目錄結(jié)構(gòu)有不小的差異，進(jìn)一步又會(huì)影響到后面組件的開發(fā)，構(gòu)建，發(fā)布，實(shí)現(xiàn)的技術(shù)設(shè)計(jì)
單包架構(gòu)
是什么
如果你選擇把所有的組件看成一個(gè)整體，一起打包發(fā)布。這叫做單包架構(gòu)。單個(gè)倉(cāng)庫(kù)，單個(gè)包，統(tǒng)一維護(hù)統(tǒng)一管理。比如Antd
優(yōu)點(diǎn)
它最大的優(yōu)點(diǎn)是可以通過相對(duì)路徑實(shí)現(xiàn)組件與組件的引用，公共代碼之間的引用。
缺點(diǎn)
缺點(diǎn)就是組件完全耦合在了一起，必須把它作為一個(gè)整體統(tǒng)一發(fā)包。就算只改一個(gè)組件的一個(gè)非常小的功能，都要對(duì)整個(gè)包發(fā)布更新。
比如說 Antd，它就是作為一個(gè)整體的包來盡進(jìn)行管理的。選擇使用單包架構(gòu)的話，那么你就必須提供按需加載的能力，以降低使用者的成本，你可以考慮支持 ES Modules 的 Tree shaking 的功能來實(shí)現(xiàn)按需加載的能力。當(dāng)然你也可以選擇另外一種方案，叫做"多包架構(gòu)"
多包架構(gòu)
是什么
每個(gè)組件彼此獨(dú)立，單獨(dú)打包發(fā)布，單個(gè)倉(cāng)庫(kù)多個(gè)包，統(tǒng)一維護(hù)單獨(dú)管理。
.
├── lerna.json
├── package.json
└── packages/ # 這里將存放所有子 repo 目錄
├── project_1/ # 組件1的包
│ ├── index.js
│ ├── node_modules/
│ └── package.json
├── project_2/ # 組件2的包
│ ├── index.js
│ ├── node_module/
│ └── package.json
...
復(fù)制代碼
優(yōu)點(diǎn)
它最大的優(yōu)勢(shì)是組件發(fā)布靈活，并且天然支持按需使用，
缺點(diǎn)
缺點(diǎn)就是組件與組件之間物理隔離。對(duì)于相互依賴，公共代碼抽象等場(chǎng)景，就只能通過NPM包引用的方式來實(shí)現(xiàn)。
--
在這些場(chǎng)景下的開發(fā)統(tǒng)一發(fā)布，相對(duì)來說沒那么方便，多包架構(gòu)在業(yè)界稱之為 "Monorepo".
在前端領(lǐng)域，我們一般使用第三方庫(kù) Lerna 來維護(hù)這樣的架構(gòu)，Lerna針對(duì)包之間有依賴的場(chǎng)景做了一些特殊優(yōu)化，開發(fā)模式下，它會(huì)把所有存在依賴關(guān)系的包通過軟鏈的形式連在一起，就可以很方便的本地開發(fā)聯(lián)調(diào)。所以這就要求你考慮清楚，
組件庫(kù)之間的組件是否有相互依賴的情況，如果有這種情況，就可以通過Lerna來進(jìn)行處理 如果組件之間依賴特別驗(yàn)證，也可選擇"單包架構(gòu)"
二. 業(yè)務(wù)組件庫(kù)的基礎(chǔ)技術(shù)能力
當(dāng)你確定了整體架構(gòu)之后，就可以開始具體的功能點(diǎn)實(shí)現(xiàn)了。業(yè)務(wù)組件庫(kù)要求整體框架提供五點(diǎn)基礎(chǔ)的技術(shù)能力
1. 構(gòu)建能力
這需要我們可以提供構(gòu)建產(chǎn)物的能力，這里有很多選擇，可以選擇Webpack，Rollup Glup Grunt..... 構(gòu)建組件庫(kù)推薦Rollup， 構(gòu)建項(xiàng)目推薦Webpack. 這里需要特別注意產(chǎn)物的格式要求，像我們常用的cjs, esm,umd格式。
比如說如果你的組件考慮支持 node環(huán)境， 像需要支持ssr, 你就需要打包出 cjs格式的代碼 如果你的組件考慮支持 <script >標(biāo)簽引用，, 你就需要打包出 umd格式的代碼
然后就需要在對(duì)應(yīng)的構(gòu)建工具里進(jìn)行配置
除此之外，還有幾個(gè)非常容易遺漏的點(diǎn)，比如說
組件庫(kù)Bable的配置是否與項(xiàng)目中Babel的配置重復(fù) 依賴包是打包到產(chǎn)物中，還是使用項(xiàng)目中的依賴包。如:lodash, moment... 依賴包的樣式是否打包到產(chǎn)物中以及Polyfill的配置(這里以后再開一篇詳細(xì)說明吧??)
2. 文檔
你需要提供一個(gè)可以實(shí)時(shí)運(yùn)行的文檔服務(wù)。包括支持靜態(tài)內(nèi)容的展示，以及可以查看源碼的實(shí)施運(yùn)行效果，這方面有很多優(yōu)秀的開源庫(kù),比如 StoryBook&Styleguidist，Docz
這里你需要注意一個(gè)典型的錯(cuò)誤行為，那就是調(diào)研的時(shí)候，只調(diào)研一些基礎(chǔ)的功能就開始做選擇，這樣很容易給后面挖坑，你需要考慮盡可能多的情況。比如
有內(nèi)部狀態(tài)的代碼示例能不能支持，例如彈窗類的組件，就需要在示例中做顯示狀態(tài)的切換 如果考慮放移動(dòng)端組件，那么展示效果能不能支持，一般來說，移動(dòng)端的示例，應(yīng)該是通過iframe的形式運(yùn)行在一個(gè)獨(dú)立的頁(yè)面里面。比如說，fiexd定位的移動(dòng)端組件是很常見的一種形式，如果不是iframe，fiexd定位的元素會(huì)鋪滿整個(gè)文檔網(wǎng)頁(yè)
文檔網(wǎng)站的依賴包跟組件的依賴包會(huì)不會(huì)沖突。假設(shè)兩個(gè)依賴包版本不一致的時(shí)候，需要實(shí)現(xiàn)一個(gè)樣式的隔離
3. 本地服務(wù)
業(yè)界一般都是用文檔服務(wù)來當(dāng)本地服務(wù)的。啟動(dòng)本地的文檔服務(wù)就可以查看運(yùn)行的效果。這里你需要關(guān)注的是，本地服務(wù)的使用體驗(yàn)好不好，比如
說有沒有熱更新 編譯速度夠不夠快
還有一個(gè)比較特別的點(diǎn)，有時(shí)候我們會(huì)在本地執(zhí)行build構(gòu)建。構(gòu)建的產(chǎn)物跟本地生成的臨時(shí)產(chǎn)物要能夠做到相互隔離，互不影響
4. 質(zhì)量保證
一方面我們需要提供統(tǒng)一的eslint功能。保證基礎(chǔ)的實(shí)現(xiàn)風(fēng)格和質(zhì)量
另一方面可以考慮引入單元測(cè)試的能力，業(yè)界也有很對(duì)優(yōu)秀的單測(cè)框架，如Jest ，Karma
5. 數(shù)據(jù)統(tǒng)計(jì)
需要統(tǒng)計(jì)組件被多少項(xiàng)目使用，具體在哪個(gè)地方使用。這個(gè)能力的主要目的是提供統(tǒng)計(jì)數(shù)據(jù)以及了解改動(dòng)的參考影響范圍。
你可以通過
組件內(nèi)增加埋點(diǎn) 來進(jìn)行統(tǒng)計(jì)。埋點(diǎn)方案會(huì)有一個(gè)時(shí)效性的限制，在你統(tǒng)計(jì)的時(shí)間周期內(nèi)，如果說該組件的功能沒有用戶用到的這種情況是統(tǒng)計(jì)不到的
定時(shí)掃描分析所有代碼倉(cāng)庫(kù)依賴來進(jìn)行統(tǒng)計(jì)。可以搜索關(guān)鍵詞 dependency tree
除了上訴幾點(diǎn)能力以外，業(yè)務(wù)組件庫(kù)還要求整體框架提供統(tǒng)一換膚的能力，快速創(chuàng)建新標(biāo)準(zhǔn)組件的能力，批量處理組件的能力，以及預(yù)置命名等等
像發(fā)包的命令，自測(cè)的命令，自動(dòng)生成ChangeLog等等這樣的命令。
三. 業(yè)務(wù)組件庫(kù)的對(duì)外文檔服務(wù)
當(dāng)基礎(chǔ)的能力都準(zhǔn)備好之后，我們最后再關(guān)注一下對(duì)外的一個(gè)輸出。也就是我們的文檔網(wǎng)站。這里我們需要把它當(dāng)成一個(gè)線上服務(wù)來搭建，這里需要考慮一個(gè)具體的架構(gòu)是什么
可能是純靜態(tài)資源 配到的CI怎么搭建
總結(jié)
以上就是業(yè)務(wù)組件庫(kù)技術(shù)實(shí)現(xiàn)的幾個(gè)關(guān)鍵點(diǎn)，下面進(jìn)行一個(gè)思維導(dǎo)圖的總結(jié)
參考
極客時(shí)間一個(gè)前端組件庫(kù)分享視頻：https://time.geekbang.org/dailylesson/detail/100056881
關(guān)于本文
作者：大古同學(xué)、李金鵬
https://juejin.cn/post/6940978764293783588
“分享、點(diǎn)贊、在看” 支持一波 