為什么要做？

18年的時(shí)候覺得寫ui組件庫的人都好牛，出于好奇看了elementui、iview和Vant的源碼。從那之后就萌生了自己也可以嘗試搭個(gè)組件庫試試，一是可以學(xué)習(xí)到很多知識(shí)，二是可以向牛人靠齊。可那時(shí)候又是個(gè)菜鳥，從0到1搭建對(duì)我來說是件很難的事情。當(dāng)時(shí)借助從vue-cli創(chuàng)建的項(xiàng)目，做了修修改改，這樣簡單的組件庫就出來了vvmui，現(xiàn)在回頭看看那時(shí)候做的東西是真的菜。。。

近些年來，隨著前端項(xiàng)目的復(fù)雜度越來越高，前端工程化的概念也被越來越重視，在很多面試中也會(huì)問到對(duì)前端工程化的理解。稍微有點(diǎn)規(guī)模的團(tuán)隊(duì)都會(huì)設(shè)計(jì)出一套適合當(dāng)前業(yè)務(wù)需求的前端架構(gòu)，開發(fā)、規(guī)范、測(cè)試、lint、構(gòu)建、部署、監(jiān)控、集成、微服務(wù)等等。所以自己從0到1搭建個(gè)組件庫可以學(xué)到。

• lint規(guī)范的接入，prettier的格式化統(tǒng)一，husky的卡點(diǎn)校驗(yàn)。
• Monorepo多包代碼風(fēng)格的項(xiàng)目管理。
• 組件的單元測(cè)試。
• 發(fā)布自己的工具包到npmjs市場(chǎng)。
• 使用 Github Action 完成 CI/CD。
• 靈活的利用打包工具，vite、gulp等等。

組件庫的技術(shù)選型

因?yàn)橹敖佑|過lerna+yarn的Monorepo代碼風(fēng)格項(xiàng)目，所以這次在組件庫的搭建上會(huì)嘗試使用pnpm。至于pnpm就不給大家介紹了，不了解的可以自行到pnpm官網(wǎng)了解。個(gè)人認(rèn)為，pnpm對(duì)內(nèi)存管理的優(yōu)化簡直是Mac用戶的救兵。才用了兩三年的電腦，內(nèi)存已被使用不少了。

組件庫的方向

組件庫會(huì)選擇做移動(dòng)端，其次會(huì)從多端的方向去做，支持H5、Taro。通過Taro的多端機(jī)制去適配多端，如果有時(shí)間的話還會(huì)考慮支持uni-app。

我為什么會(huì)選擇移動(dòng)端方向？

我一直認(rèn)為PC端的組件庫是非常成熟了，特別是在表單收集方面的組件是非常成熟而且規(guī)范。在移動(dòng)端上表單收集的組件以及表單校驗(yàn)的交互細(xì)節(jié)就變得非常復(fù)雜了。開源組件本身的設(shè)計(jì)與業(yè)務(wù)不符合，就會(huì)讓開發(fā)者陷入被動(dòng)。所以我一直希望自己能完整開發(fā)一些通用的組件，讓我在下次接觸到類似的組件時(shí)，雖然業(yè)務(wù)設(shè)計(jì)有出入，但我也不會(huì)變的無從下手。

組件庫的設(shè)計(jì)

結(jié)語

首先自己做組件庫并不是為了炫技，開源的組件庫已經(jīng)非常多了，重復(fù)造輪子的意義不大。但是這個(gè)從0到1的過程，不僅讓自己學(xué)到了很多東西，而且也是熱愛自己這一行的一種表現(xiàn)。如果只是為了在這一行混口飯吃，各種開源的輪子已經(jīng)能解決你遇到的大部分問題了。

其次，在寫這篇文章的時(shí)候，組件庫的完成度已經(jīng)接近70%了。寫作水平差更新的慢，有問題請(qǐng)輕噴。

最后，后面覺得差不多了會(huì)把代碼倉庫的地址補(bǔ)上，還有組件庫的在線體驗(yàn)地址。

相關(guān)文章

Monorepo風(fēng)格的組件工程搭建

以上就是對(duì)于組件庫的思考及技術(shù)梳理詳解的詳細(xì)內(nèi)容，更多關(guān)于組件庫技術(shù)梳理的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論