你好,我是全栈然叔,有着十二年大型项目开发管理经验的程序员。负责过大型电商(Yahoo - 711电子商务平台)以及证券系统的设计开发工作。从 Java 到前端,参加过很多大型项目的工程搭建工作经验。
在工作过程中,我发现前端工程化一直是前端圈大热的话题。
虽然,现在项目框架和各种脚手架都趋于成熟,一个前端小白几乎可以在不具备任何工程化知识的情况下,利用成熟的脚手架搭建一个前端应用,里面的工程化细节也无需过多去关心。
但这只是限于初级的程序员,一旦项目趋于复杂,会提出各种定制化的要求。 或者引入新的技术,或者需要兼容性和性能提升……这就需要不断地修改自己的工程化方案进行适应,对程序员工程化的能力提出了挑战。
如果要弄懂工程化,动手实践是学习的最好方式 。 如果你想弄懂什么东西,就最好自己亲手造一个,我觉得最好的轮子应该就是组件库了。组件库的搭建过程,就是一个完美的工程化实践。
从项目的搭建,选择合适的开发服务,配置代码验证规则,到最后的集成发布,整个生命周期都蕴含着大量工程化知识。实战过程中,你会遇到很多真实的问题,遇到问题才有提高的机会。
所以,然叔希望通过一次实战,使用最新的 Vite 技术栈,还原开源前端组件库搭建全过程,让大家把工程化的十八般武艺练精。
另外,然叔也是一个造轮子的爱好者,随便放几篇,你也可以浏览然叔的造轮子专栏。
- 做了一夜动画,让大家十分钟搞懂Webpack - 掘金
- 彻底搞懂HTTP协议 - 天天造轮子 - 掘金
- 坚持造轮子第六天 - Mixin -装备合成路径 - 掘金
- 坚持造轮子第一天 - 模板引擎 - 掘金
为什么要选 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 倍的提升。
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-server | Vite |
文档建设 | webpack + markdown | Vite-Press |
测试工具 | Jest | Vitest |
语法编辑器 | Babel | Vite(内置esbuild) |
代码规范 | Eslint | Eslint |
代码风格 | Prettier | Prettier |
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。
这门课程如何设计?
实战的关键在于如何营造一个逼真的学习环境。
这门课程遵循两个原则:
- 造轮子思想:通过实战模拟一个真实的组件库开发;
- 敏捷开发方式:每节一个主题持续迭代。
我也看过很多工程化实战的文章和资料,大多数都是将各种技术一次性组装在一起,我觉得这样并不利于学习,即使是实战也不是一个好的实践方案。
一个项目的工程化是慢慢积累和迭代出来的。所以本次课会遵循敏捷开发原则,从一个 MVP(最小化可行产品)开始每个小节添加一个特性,每个小节都是从一个 User Story 开始展开,希望通过这样的的方式给大家一个最佳的实战体验。
通过这门课程的学习,你将:
- 获得一次真实组件库搭建的实战经验;
- 系统化理解各种工程化工具的配置过程和实践经验;
- 获得完整的案例设计以及即插即用的案例代码,可用于指导日常开发过程的常见业务场景和实现方法。
写在最后
好啦,最后也诚挚邀请大家一起跟然叔学习这门课,全面掌握组件库搭建的整个过程。搭建一个属于自己的组件库。让工程化能力成为你前端事业上的一个闪亮的“关键词”。
也推荐大家通过这个课程了解更多的开源项目知识。能够多参与开源社区,掌握最新的动态,并为社区贡献自己的力量。
上新特惠,限时6折
8月10日~8月17日,小册限时 6
折,仅需 ¥ 17.94
!
点击下方图片,一起加入学习吧!👇