【總結(jié)】前端業(yè)務(wù)組件庫(kù)怎么樣做到極致？
對(duì)于前端同學(xué)來(lái)說(shuō)， 業(yè)務(wù)組件庫(kù)肯定不陌生，很多前端團(tuán)隊(duì)都會(huì)選擇建設(shè)業(yè)務(wù)組件庫(kù)來(lái)解決
業(yè)務(wù)組件跨項(xiàng)目復(fù)用的問(wèn)題 同時(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)還是太宏觀了，不好理解，所以接下來(lái)，我就分別介紹這三個(gè)關(guān)鍵點(diǎn)到底是什么。你可以參考這些關(guān)鍵點(diǎn)來(lái)進(jìn)行相關(guān)技術(shù)調(diào)研
一. 業(yè)務(wù)組件庫(kù)的整體架構(gòu)設(shè)計(jì)
對(duì)于業(yè)務(wù)組件庫(kù)的整體架構(gòu)設(shè)計(jì)而言，核心問(wèn)題是業(yè)務(wù)組件庫(kù)的代碼時(shí)如何來(lái)組織和管理。
首先，我們把代碼倉(cāng)庫(kù)建好。業(yè)界一般會(huì)把同一類組件庫(kù)用單個(gè)倉(cāng)庫(kù)的形式維護(hù)，并且把組件開發(fā)成NPM包的形式，這里的重點(diǎn)是，**你要考慮把所有的組件打包成一個(gè)大的NPM包，還是分割是一個(gè)個(gè)獨(dú)立的小NPM包 。**不要小看這個(gè)問(wèn)題， 這兩種選擇會(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)是可以通過(guò)相對(duì)路徑實(shí)現(xiàn)組件與組件的引用，公共代碼之間的引用。
缺點(diǎn)
缺點(diǎn)就是組件完全耦合在了一起，必須把它作為一個(gè)整體統(tǒng)一發(fā)包。就算只改一個(gè)組件的一個(gè)非常小的功能，都要對(duì)整個(gè)包發(fā)布更新。
比如說(shuō) Antd，它就是作為一個(gè)整體的包來(lái)盡進(jìn)行管理的。選擇使用單包架構(gòu)的話，那么你就必須提供按需加載的能力，以降低使用者的成本，你可以考慮支持 ES Modules 的 Tree shaking 的功能來(lái)實(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)景，就只能通過(guò)NPM包引用的方式來(lái)實(shí)現(xiàn)。
--
在這些場(chǎng)景下的開發(fā)統(tǒng)一發(fā)布，相對(duì)來(lái)說(shuō)沒那么方便，多包架構(gòu)在業(yè)界稱之為 "Monorepo".
在前端領(lǐng)域，我們一般使用第三方庫(kù) Lerna 來(lái)維護(hù)這樣的架構(gòu)，Lerna針對(duì)包之間有依賴的場(chǎng)景做了一些特殊優(yōu)化，開發(fā)模式下，它會(huì)把所有存在依賴關(guān)系的包通過(guò)軟鏈的形式連在一起，就可以很方便的本地開發(fā)聯(lián)調(diào)。所以這就要求你考慮清楚，
組件庫(kù)之間的組件是否有相互依賴的情況，如果有這種情況，就可以通過(guò)Lerna來(lái)進(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格式。
比如說(shuō)如果你的組件考慮支持 node環(huán)境， 像需要支持ssr, 你就需要打包出 cjs格式的代碼 如果你的組件考慮支持? 国产a级 一片 | 国产激情婷婷 | 操逼视频在线免费观看 | 欧美性BBB槡BBB槡BBB | 国产美女插逼 |<kbd id="afajh"><form id="afajh"></form></kbd> <strong id="afajh"><dl id="afajh"></dl></strong> <del id="afajh"><form id="afajh"></form></del> <th id="afajh"><progress id="afajh"></progress></th> <b id="afajh"><abbr id="afajh"></abbr></b> <th id="afajh"><progress id="afajh"></progress></th>