开发一个组件库，需要学哪些技术栈呢？

前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~

很多人问我怎么去封装一个组件库，其实这个问题一次性肯定讲不完，因为这分为很多个问题：

• 组件库所需技术栈
• 怎么封装好一个组件
• 组件实战+组件单元测试
• 组件库打包发布

只有这几个环节都了解清楚了，你才能封装一个组件库，不然就算你迷迷糊糊封装了一个组件库，你也学不到什么东西。

我会陆续出四篇文章分别介绍这四个环节，带大家实战一下组件库~

本篇文章，也就是【组件库系列第一篇】，就是介绍一下 封装组件库所需哪些技术栈

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 官方出的一个测试的库，被很多组件库拿来做单元测试，为什么要单元测试呢？因为你的组件库是做给很多人用的，你要确保你的组件库是靠谱的，所以必须在开发完后，进行单元测试，测试没问题，才能发布~