基于Vite的组件库工程化实战,1:1 还原开源前端组件库搭建全过程

你会学到什么?

  • 从 0 到 1 完成一套组件库工程化的搭建;
  • 学会利用迭代思维和 MVP 开发项目;
  • 学会制定项目规范和用自动化工具进行检查;
  • 学会运用测试驱动开发 TDD;
  • 学会使用 Github Action 完成 CI/CD
  • 学会前端软件包的发布方法。

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

课程简介

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

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

如果要弄懂工程化,动手实践是学习的最好方式。 如果你想弄懂什么东西就最好自己亲手造一个,最好的轮子应该就是组件库了。组件库的搭建过程,就是一个完美的工程化实践。 从项目的搭建,选择合适的开发服务,配置代码验证规则,到最后的集成发布,整个生命周期都蕴含着大量工程化知识。

基于Vite的组件库工程化实战,1:1 还原开源前端组件库搭建全过程

去年我们 【花果山团队】进行 element3 组件库的开发工作,也曾经把 Element 工程化的过程用文章进行过总结(Vue3组件库工程化实战 — Element3),受到了很多读者的好评,跟着然叔搭建一遍,很快就 Get 了组件库搭建这个技能。

今年然叔决定对组件库的工程化搭建过程进行一次更加系统的整理,并且使用最新的 Vite 技术栈。实现一个可以实操的前端组件库项目,1:1 还原主流组件库的工程化搭建过程,再配上详细的步骤说明和基础知识讲解。带你从一个只会写业务的前端小白进阶为前端工程化搭建高手。

课程安排

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

这门课程遵循两个原则:

  • 造轮子思想 – 通过实战模拟一个真实的组件库开发;
  • 敏捷开发方式 – 每节一个主题持续迭代。
基于Vite的组件库工程化实战,1:1 还原开源前端组件库搭建全过程

我也看过很多工程化实战的文章和资料,大多数都是将各种技术一次性组装在一起。我觉得这样并不利于学习,即使是实战也不是一个好的实践方案,一个项目的工程化是慢慢积累和迭代出来的。所以本次课会遵循敏捷开发原则,从一个MVP(最小化可行产品)开始每个小节添加一个特性。每个小节都是从一个User Story开始展开。希望通过这样的的方式给大家一个最佳的实战体验。

课程目录

1 开篇词:学习前端工程化就从搭建组件库开始
2 MVP原型系统: 将组件封装为组件库
3 CSS样式:用UnoCSS实现原子化CSS
4 文档建设:创建具备Demo示例功能的文档网站
5 单元测试(一): 使用Jest进行前端单元测试
6 单元测试 (二): 搭建Vitest的单元测试环境
7 规范化: Eslint + Prettier + Husky
8 软件包封装: 如何发布兼容多种 JS 模块标准的软件包?
9 持续集成 CI: 基于 github Action 的回归验证
10 开发许可证:维护自己的版权、拒绝拿来党
11 组件发布: 建立语义化版本与提交软件包仓库 Npm
12 建立组件库生态: 利用 Monorepo 方式管理组件库生态
13 按需引入: 实现组件库的按需引入功能
14 文档部署: 用 Vercel 部署你的线上文档
15 README: 编写标准的 README
16 品质保证:覆盖率测试报告
17 社区参与: 如何管理社区的 PullRequest?
18 敏捷开发: 用 Github 看板和 issue 管理需求
19 架构复用: 创建 CLI 工具提高研发体验
20 融入Vue 生态: 编写 vue-cli 插件让 Vue 用户找到你
21 结语

讲师介绍

全栈然叔

  • Vue3.0 Contributor;
  • 全栈工程师、架构师;
  • 掘金优秀创作者 Lv5;
  • Github China Top500;
  • 16年项目开发管理经验;
  • 项目: 711电子商务系统;
  • 持续学习者。

发表评论

登录后才能评论