小册上新|基于 Vite 的组件库工程化实战

1,798 阅读7分钟

你好,我是全栈然叔,有着十二年大型项目开发管理经验的程序员。负责过大型电商(Yahoo - 711电子商务平台)以及证券系统的设计开发工作。从 Java 到前端,参加过很多大型项目的工程搭建工作经验。

在工作过程中,我发现前端工程化一直是前端圈大热的话题。

虽然,现在项目框架和各种脚手架都趋于成熟,一个前端小白几乎可以在不具备任何工程化知识的情况下,利用成熟的脚手架搭建一个前端应用,里面的工程化细节也无需过多去关心。

但这只是限于初级的程序员,一旦项目趋于复杂,会提出各种定制化的要求。 或者引入新的技术,或者需要兼容性和性能提升……这就需要不断地修改自己的工程化方案进行适应,对程序员工程化的能力提出了挑战。

如果要弄懂工程化,动手实践是学习的最好方式  如果你想弄懂什么东西,就最好自己亲手造一个,我觉得最好的轮子应该就是组件库了。组件库的搭建过程,就是一个完美的工程化实践。

从项目的搭建,选择合适的开发服务,配置代码验证规则,到最后的集成发布,整个生命周期都蕴含着大量工程化知识。实战过程中,你会遇到很多真实的问题,遇到问题才有提高的机会。

所以,然叔希望通过一次实战,使用最新的 Vite 技术栈,还原开源前端组件库搭建全过程,让大家把工程化的十八般武艺练精。

图片

图片另外,然叔也是一个造轮子的爱好者,随便放几篇,你也可以浏览然叔的造轮子专栏。

为什么要选 Vite 栈?

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

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

有兴趣的同学可以看一下然叔去年写的文章《Vue3组件库工程化实战 --Element3》。

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

而 Vite 出现后,我们会首选 Vite。从 2021 年开始,知名组件库都选择 Vite 技术栈,比如:element-plus华为DevUI  、Varlet (VueConf中尤雨溪点名过的) ,就说明了它的优势。

1.效率高:运行速度快,编译快

运行效率方面其实是 Vite 的原生特点,主要来自 Bundless 机制 + Esbuild 高效编译器两个方面。

其实在基于 Webpack 开发过程中,每次更新代码到你能从浏览器中看到效果都需要等待一段时间,这段时间主要都花在重新打包上面。Vite 利用浏览器对 esm 的原生支持代替了打包过程,很好地解决了这部分时间的开销。

另外对代码的编译也采用了基于 Go 语言开发的 Esbuild。构建速度可以得到 10~100 倍的提升。

image.png

2.体验好:原生支持 ESM 与 Typescript

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

3.扩展强:生态好、改装配件一应俱全

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

4.生态内工具通用配置

对于构建工具的选择上,其实无论是 Rollup 还是 Webpack,都也可以完成对组件库的打包输出。

Vite 可以很好地做到开发服务和构建的同配置。虽然目前 Vite 还是使用双引擎架构,但是配置的一致性是可以保证的。甚至于后面的文档建设和 Vitest 都可以使用同样的配置。

经典组件库(Element)Vite栈组件库(Element-plus)
开发服务器webpack-dev-serverVite
文档建设webpack + markdownVite-Press
测试工具JestVitest
语法编辑器BabelVite(内置esbuild)
代码规范EslintEslint
代码风格PrettierPrettier

5.强大生态:Vitepress 和 Vitest

Vitepress 是由尤大神主导的静态网站生成器。最初的版本是 Vuepress 最早用于发布,可以很好地将 markdown 格式的文档转换为静态站点。

在 Vite 时代升级为 Vitepress 继承的 Vite 的优秀特性启动快热加载性能好而且最重要的是可以和Vite同配置。利用合理的插件配置,可以将正在开发的插件直接展示在文档中。

另外一个盟友,也是由 Vue 核心成员 antfu 主导的基于 Vite 测试框架 ——Vitest

以前前端测试普遍使用 Jest,包括 Vue 本身都是使用 Jest 进行单元测试。Vitest 可以认为是一个保留了Jest 写法并且利用了Vite热更新技术的新测试框架。看中它,除了有更高的测试效率外,更重要的还是与 Vite 的通用配置能力。

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

这门课程如何设计?

实战的关键在于如何营造一个逼真的学习环境。

这门课程遵循两个原则:

  • 造轮子思想:通过实战模拟一个真实的组件库开发;
  • 敏捷开发方式:每节一个主题持续迭代。

image.png

我也看过很多工程化实战的文章和资料,大多数都是将各种技术一次性组装在一起,我觉得这样并不利于学习,即使是实战也不是一个好的实践方案。

一个项目的工程化是慢慢积累和迭代出来的。所以本次课会遵循敏捷开发原则,从一个 MVP(最小化可行产品)开始每个小节添加一个特性,每个小节都是从一个 User Story 开始展开,希望通过这样的的方式给大家一个最佳的实战体验。

通过这门课程的学习,你将:

  • 获得一次真实组件库搭建的实战经验;
  • 系统化理解各种工程化工具的配置过程和实践经验;
  • 获得完整的案例设计以及即插即用的案例代码,可用于指导日常开发过程的常见业务场景和实现方法。

写在最后

好啦,最后也诚挚邀请大家一起跟然叔学习这门课,全面掌握组件库搭建的整个过程。搭建一个属于自己的组件库。让工程化能力成为你前端事业上的一个闪亮的“关键词”。

也推荐大家通过这个课程了解更多的开源项目知识。能够多参与开源社区,掌握最新的动态,并为社区贡献自己的力量。

上新特惠,限时6折

8月10日~8月17日,小册限时 6 折,仅需 ¥ 17.94 !

点击下方图片,一起加入学习吧!👇

图片