前言

大家好，我是林三心，用最通俗易懂的話講最難的知識(shí)點(diǎn)是我的座右銘，基礎(chǔ)是進(jìn)階的前提是我的初心~

很多人問(wèn)我怎么去封裝一個(gè)組件庫(kù)，其實(shí)這個(gè)問(wèn)題一次性肯定講不完，因?yàn)檫@分為很多個(gè)問(wèn)題：

• 組件庫(kù)所需技術(shù)棧
• 怎么封裝好一個(gè)組件
• 組件實(shí)戰(zhàn)+組件單元測(cè)試
• 組件庫(kù)打包發(fā)布

只有這幾個(gè)環(huán)節(jié)都了解清楚了，你才能封裝一個(gè)組件庫(kù)，不然就算你迷迷糊糊封裝了一個(gè)組件庫(kù)，你也學(xué)不到什么東西。

我會(huì)陸續(xù)出四篇文章分別介紹這四個(gè)環(huán)節(jié)，帶大家實(shí)戰(zhàn)一下組件庫(kù)~

本篇文章，也就是【組件庫(kù)系列第一篇】，就是介紹一下封裝組件庫(kù)所需哪些技術(shù)棧

pnpm + menorepo

這是現(xiàn)在很多組件庫(kù)，其實(shí)不止組件庫(kù)，很多開(kāi)源項(xiàng)目都是使用了 pnpm + menorepo 來(lái)進(jìn)行項(xiàng)目的管理，組件庫(kù)也不例外，很多知名的組件庫(kù)都是使用 pnpm + menorepo 來(lái)管理項(xiàng)目的，大家要去看 pnpm 子項(xiàng)目管理的機(jī)制，比如 Element-plus 用 pnpm 管理幾個(gè)子項(xiàng)目

• 指令
• 組件
• hooks
• 語(yǔ)言

常用工具庫(kù)

在開(kāi)發(fā)的過(guò)程中，可以用一些第三方的工具庫(kù)來(lái)大大提高開(kāi)發(fā)效率，比如 lodash、vueuse，當(dāng)然我們不需要對(duì)它們過(guò)于深入了解，只需要用到的時(shí)候查查文檔就行

• lodash是一個(gè)原生的工具庫(kù)
• vueuse是一個(gè)vue的hooks庫(kù)

TypeScript

用 typescript 來(lái)開(kāi)發(fā)組件庫(kù)是現(xiàn)在的主流，至少基本的類型使用你要會(huì)

vite | esbuild

如果我們想要打包一個(gè) vue 組件庫(kù)，我們可以用 vite 或 esbuild 去打包

vitest

vitest 是 vite 官方出的一個(gè)測(cè)試的庫(kù)，被很多組件庫(kù)拿來(lái)做單元測(cè)試，為什么要單元測(cè)試呢？因?yàn)槟愕慕M件庫(kù)是做給很多人用的，你要確保你的組件庫(kù)是靠譜的，所以必須在開(kāi)發(fā)完后，進(jìn)行單元測(cè)試，測(cè)試沒(méi)問(wèn)題，才能發(fā)布~

這是對(duì)他人負(fù)責(zé)，也是對(duì)自己負(fù)責(zé)~

less

用來(lái)寫樣式的，當(dāng)然如果你想用css也行。。

自動(dòng)化發(fā)包

最后打包后肯定是要使用 npm 或 pnpm 去發(fā)包，至少你要知道 npm 怎么發(fā)包~如果你連基本的 npm 打包都不會(huì)，那你怎么去理解自動(dòng)化發(fā)包呢？