為什么要做？

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

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

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

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

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

組件庫的方向

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

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

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

組件庫的設計

結(jié)語

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

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

最后，后面覺得差不多了會把代碼倉庫的地址補上，還有組件庫的在線體驗地址。

相關(guān)文章

Monorepo風格的組件工程搭建

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

最新評論