前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~

很多人問我怎么去封裝一個組件庫，其實這個問題一次性肯定講不完，因為這分為很多個問題：

• 組件庫所需技術棧
• 怎么封裝好一個組件
• 組件實戰+組件單元測試
• 組件庫打包發布

只有這幾個環節都了解清楚了，你才能封裝一個組件庫，不然就算你迷迷糊糊封裝了一個組件庫，你也學不到什么東西。

我會陸續出四篇文章分別介紹這四個環節，帶大家實戰一下組件庫~

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

pnpm + menorepo

這是現在很多組件庫，其實不止組件庫，很多開源項目都是使用了 pnpm + menorepo 來進行項目的管理，組件庫也不例外，很多知名的組件庫都是使用 pnpm + menorepo 來管理項目的，大家要去看 pnpm 子項目管理的機制，比如 Element-plus 用 pnpm 管理幾個子項目

• 指令
• 組件
• hooks
• 語言

常用工具庫

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

• lodash是一個原生的工具庫
• vueuse是一個vue的hooks庫

TypeScript

用 typescript 來開發組件庫是現在的主流，至少基本的類型使用你要會

vite | esbuild

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

vitest

vitest 是 vite 官方出的一個測試的庫，被很多組件庫拿來做單元測試，為什么要單元測試呢？因為你的組件庫是做給很多人用的，你要確保你的組件庫是靠譜的，所以必須在開發完后，進行單元測試，測試沒問題，才能發布~

這是對他人負責，也是對自己負責~

less

用來寫樣式的，當然如果你想用css也行。。

自動化發包

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