你好，我是全栈然叔，有着十二年大型项目开发管理经验的程序员。负责过大型电商（Yahoo - 711电子商务平台）以及证券系统的设计开发工作。从Java到前端，参加过很多大型项目的工程搭建工作经验。
去年我们 【花果山团队】进行 element3 组件库的开发工作。也曾经把 Element 工程化的过程用文章进行过总结（Vue3组件库工程化实战 -- Element3）。这里面收到了很多读者的好评。很希望通过自己造轮子的方法实践一次组件库。跟着然叔搭建一遍，很快就Get了组件库搭建这个技能。
今年然叔决定对组件库的工程化搭建过程进行一次更加系统的整理。并且使用最新的Vite技术栈。
为什么要选Vite栈？
在Vite被发明之前，经典的组件库(比如:element)的工具栈选择大概是这样：
- 构建工具 - Rollup；
- 文档建设 - Webpack + Markdown插件；
- 单元测试 - Jest；
有兴趣的同学可以看一下然叔去年写的文章《Vue3组件库工程化实战 --Element3》。
由于组件库属于库 (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 进行开发，不需要添加任何转移器，甚至无需任何配置。
- 扩展强： 生态好、改装配件一应俱全
目前 Vite2.0 已经完全实现了插件化，并且插件众多，在流行的 Vue 和 React 生态都有良好的支持。如果你想使用JSX，只需要注册相应相应的插件就可以使用。
- 生态内工具通用配置
对于构建工具的选择上，其实无论是 Rollup 还是 Webpack，都也可以完成对组件库的打包输出。选择Vite的原因是，Vite可以很好地做到开发服务和构建的同配置。虽然目前 Vite 还是使用双引擎架构，但是配置的一致性是可以保证的。甚至于后面的文档建设和 Vitest 都可以使用同样的配置。
| 经典组件库（Element） | Vite栈组件库（Element-plus） | |
|---|---|---|
| 开发服务器 | webpack-dev-server | Vite |
| 文档建设 | webpack + markdown | Vite-Press |
| 测试工具 | Jest | Vitest |
| 语法编辑器 | Babel | Vite(内置esbuild) |
| 代码规范 | Eslint | Eslint |
| 代码风格 | Prettier | Prettier |
- 强大生态：Vitepress和Vitest
俗话说一个好汉三个帮，下面介绍一下Vite生态的这两个好盟友。
首先是 Vitepress，Vitepress 是由尤大神主导的静态网站生成器。最初的版本是 Vuepress 最早用于发布，可以很好地将 markdown 格式的文档转换为静态站点。在 Vite 时代升级为 Vitepress 继承的 Vite 的优秀特性启动快热加载性能好而且最重要的是可以和Vite同配置。利用合理的插件配置，可以将正在开发的插件直接展示在文档中。
另外一个盟友，也是由 Vue 核心成员 antfu 主导的基于 Vite 测试框架。以前前端测试普遍使用 Jest，包括 Vue 本身都是使用 Jest 进行单元测试。Vitest 可以认为是：一个保留了Jest 写法并且利用了Vite热更新技术的新测试框架。看中它，除了有更高的测试效率外，更重要的还是与 Vite 的通用配置能力。
动手实践，学习工程化
其实，这次基于Vite搭建组件库，也是为了能带大家一起系统学习前端工程化知识。
前端工程化一直是前端圈大热的话题，诚然在一个项目框架和各种脚手架都趋于成熟的年代。一个前端小白几乎可以在不具备任何工程化知识的情况下，利用成熟的脚手架搭建一个前端应用。里面的工程化细节也无需过多去关心。
当然这只是限于初级的程序员，一旦项目趋于复杂，会提出各种定制化的要求，或者引入新的技术，也或许需要更过兼容性和性能提升的要求，这就需要不断地修改自己的工程化方案进行适应。
如果要弄懂工程化，动手实践是学习的最好方式。 如果你想弄懂什么东西就最好自己亲手造一个，我觉得最好的轮子应该就是组件库了。
组件库的搭建过程，就是一个完美的工程化实践。 从项目的搭建，选择合适的开发服务，配置代码验证规则，到最后的集成发布，整个生命周期都蕴含着大量工程化知识。
实战过程中，你会遇到很多真实的问题，遇到问题才是提高的机会，所以然叔希望通过这样的一次实战，让大家把工程化的十八般武艺练精。
另外，然叔也是一个造轮子的爱好者，随便放几篇，你也可以浏览然叔的造轮子专栏。：
这门课程是如何设计？
实战的关键在于如何营造一个逼真的学习环境。
这门课程遵循两个原则：
- 造轮子思想 - 通过实战模拟一个真实的组件库开发；
- 敏捷开发方式 - 每节一个主题持续迭代。
也看过很多工程化实战的文章和资料，大多数都是将各种技术一次性组装在一起。我觉得这样并不利于学习。即使是实战也不是一个好的实践方案。一个项目的工程化是慢慢积累和迭代出来的。所以本次课会遵循敏捷开发原则。从一个MVP(最小化可行产品)开始每个小节添加一个特性。每个小节都是从一个User Story开始展开。希望通过这样的的方式给大家一个最佳的实战体验。
你从这门课程中获得什么？
通过这门课程的学习，你将:
- 获得一次真实组件库搭建的实战经验；
- 系统化理解各种工程化工具的配置过程和实践经验;
- 获得完整的案例设计以及即插即用的案例代码，可用于指导日常开发过程的常见业务场景和实现方法。
写在最后
好啦，最后也诚挚邀请大家一起跟然叔学习这门课，全面掌握组件库搭建的整个过程。搭建一个属于自己的组件库。让工程化能力成为你前端事业上的一个闪亮的“关键词”。
也推荐大家通过这个课程了解更多的开源项目知识。能够多参与开源社区，掌握最新的动态，并为社区贡献自己的力量。