快捷導(dǎo)航

對于組件庫的思考及技術(shù)梳理詳解

更新時間：2023年02月01日 14:11:20 作者：Fone丶峰

這篇文章主要為大家介紹了對于組件庫的思考及技術(shù)梳理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

為什么要做？

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

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

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

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

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

組件庫的方向

組件庫會選擇做移動端，其次會從多端的方向去做，支持H5、Taro。通過Taro的多端機制去適配多端，如果有時間的話還會考慮支持uni-app。

我為什么會選擇移動端方向？

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