1.学习前端工程化就从搭建组件库开始

1756字约6分钟

2024-10-03

目的

使用最新的 Vite 技术栈，通过自己造轮子的方法实践一次组件库，Get 组件库搭建这个技能。

为什么要选 Vite

在 Vite 被发明之前，经典的组件库(比如: element )的工具栈选择大概是这样：

构建工具 - Rollup；
文档建设 - Webpack + Markdown 插件；
单元测试 - Jest；

由于组件库属于库 (Lib) 的开发更符合 Rollup 的使用场景，在 Vite 出现以前，这也是最好的选择。

不过现在，Vite 原生可以支持 ESM 的代码或者 Typescript，如果想把传统项目中的组件重构到组件库的话，也没有什么太大的迁移成本。而且 Bundless 快捷如飞的开发体验确实用了就回不去了，所以如果没有旧的代码包袱，肯定是要上 Vite。

从 2021 年开始，知名组件库都选择这个技术栈，比如：element-plus、华为 DevUI、Varlet (VueConf 中尤雨溪点名过的)，就说明了它的优势。

效率高：运行速度快，编译快

运行效率方面其实是 Vite 的原生特点，主要来自 Bundless 机制 + Esbuild 高效编译器两个方面。其实在基于 Webpack 开发过程中，每次更新代码到你能从浏览器中看到效果都需要等待一段时间，这段时间主要都花在重新打包上面。Vite 利用浏览器对 esm 的原生支持代替了打包过程，很好地解决了这部分时间的开销。另外对代码的编译也采用了基于 Go 语言开发的 Esbuild。构建速度可以得到 10~100 倍的提升。

体验好：原生支持 ESM 与 Typescript

以往一个项目如果想支持 ESM 或者 Typescript ，需要使用 Babel 转译器进行转译。Vite 作为最新的开发服务器，原生就对 ESM、Typescript 进行了支持。也就是说使用 Vite 可以直接使用 Typescript 进行开发，不需要添加任何转移器，甚至无需任何配置。

扩展强：生态好、改装配件一应俱全

目前已经完全实现了插件化，并且插件众多，在流行的 Vue 和 React 生态都有良好的支持。如果你想使用 JSX，只需要注册相应相应的插件就可以使用。

生态内工具通用配置

对于构建工具的选择上，其实无论是 Rollup 还是 Webpack，都也可以完成对组件库的打包输出。选择 Vite 的原因是，Vite 可以很好地做到开发服务和构建的同配置。虽然目前 Vite 还是使用双引擎架构，但是配置的一致性是可以保证的，甚至后面的文档建设和测试都可以使用同样的配置。

	经典组件库（Element）	Vite 栈组件库（Element-plus）
开发服务器	webpack-dev-server	Vite
文档建设	webpack + markdown	Vite-Press
测试工具	Jest	Vitest
语法编辑器	Babel	Vite(内置 esbuild)
代码规范	Eslint	Eslint
代码风格	Prettier	Prettier

强大的生态：Vitepres s 和 Vitest

下面介绍一下 Vite 生态的这两个好盟友。

首先是 Vitepress，Vitepress 是由尤大主导的静态网站生成器。最初的版本是 Vuepress 最早用于发布，可以很好地将 markdown 格式的文档转换为静态站点。在 Vite 时代升级为 Vitepress 继承的 Vite 的优秀特性启动快热加载性能好而且最重要的是可以和 Vite 同配置。利用合理的插件配置，可以将正在开发的插件直接展示在文档中。

另外一个盟友 Vitest，也是由 Vue 核心成员 antfu 主导的基于 Vite 测试框架。以前前端测试普遍使用 Jest，包括 Vue 本身都是使用 Jest 进行单元测试。Vitest 可以认为是：一个保留了 Jest 写法并且利用了 Vite 热更新技术的新测试框架。看中它，除了有更高的测试效率外，更重要的还是与 Vite 的通用配置能力。