前言

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

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

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

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

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

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

pnpm + menorepo

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

• 指令
• 組件
• hooks
• 語言

常用工具庫

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

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

TypeScript

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

vite | esbuild

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

vitest

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

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

less

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

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

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