为什么要写该专栏
一方面,是为了提升自己的影响力,比如在平台中积累人气,这其实是一笔无形的财富,它必将对日后的跳槽或转行有一定的助力
另一方面,是为了自我学习与进步。早些年,webpack大行其道,被奉为高级前端的座上宾,而当下,vite亦成为进阶的必备技能
如何获取源码
小节对应的源码可以通过github获取
关于更新进度
预计12月10日开始,每周更新2-3篇
关于本专栏
源码是最好的老师,它为我们传道、授业、解惑。但能否将其转化为自己的知识还需要我们自己去努力。笔者一直相信对比记忆是最佳的学习方式。故本小册的全部章节都由两大核心部分构成:前半部分用以分析源码;后半部分对功能点进行分析、实现与还原
本专栏假设读者已经是一个vite
的深度使用者,因此笔者不会花费篇幅说明如何创建用例。不过读者仍可以从svite 的 playground 目录获得相应的用例创建参考
本专栏会同步开发一个名为svite
的工程。它的目的是帮助读者更好的理解vite
。读者可以把它当作对源码的总结、梳理和对比来看,但更建议读者跟着笔者思路并结合自己的思考一字一行的完成svite
的编写,只有在不断的踩坑-思考-解决这一过程中才能真正的理解和掌握vite
,更重要的是得到编码能力、问题处理能力和逻辑思维能力的提升
关于 svite
- 为什么不是
mini-vite
这是笔者有意和市面上的手写vite
进行区分的,因为它们往往只包含了vite
的最原始、最小运行逻辑,而对其功能点的实现却鲜有提及,而功能点如何被落地才是vite
的真正强大和值得学习之处
svite
包含哪些
svite
几乎包含了vite
除了ssr
外的所有核心能力
svite
有什么特点
强调分析,笔者会分析为什么需要这么做,出发点是什么,具体如何实现
强调对比,笔者会尽可能用不一样的思路实现与vite同样的功能
强调简化,采取更小、更少的代码实现功能,不考虑边界
超出vite,不局限于vite
源码本身,对于笔者认为比较重要而vite
中采用第三方npm
包实现的功能点,笔者会抛弃对npm
包的调用而是带领读者从0
到1
开发
- 如何开发
svite
svite
模拟了从0
到1
开发vite
的迭代过程,因此,它并不会一次性对某个功能点进行全方位的讲解,比如在分析vite
中如何实现依赖打包的小节中,笔者虽然对http
缓存相关的属性进行了说明,但笔者认为在此处引入是一种纸上谈兵的做法,因此在svite
中实现对应小节时直接选择了跳过,其真正的实现是在接入了vue3
之后,由于模块文件的不断增多而作为优化需求被列入开发计划的
关于章节划分
第一章:对vite dev
阶段的特性与功能点进行分析并还原
第二章:对vite build
阶段的特性与功能点进行分析并还原
第三章:使用vite
开发一个支持热更新的vue
约定式路由解决方案
关于小节划分
本小册每一节均被划分成了4-6
个部分
- 前言
以产品或业务视角,提出svite
现存的问题或需要满足的功能需求
- 源码分析
通过逐行解读vite
源码以找出解决svite
中相关问题的实现方案
- 代码实现
分析并落地功能
- 调试
自测环节,对当前实现的功能进行调试,并对相关报错进行分析与解决
- fixbug(可选)
对前边小节的调试环节未及时发现的bug
进行分析并解决
- 总结
对当前小节进行分析归纳
关于阅读建议
1.不建议读者跳小节阅读,因为每一个小节之间都具有一定的连贯性,比如,对于已经分析过的公用功能点,笔者再次遇到时,不会再次进入相关模块进行逐行分析
2.不建议花费精力和时间在本小节主题之外的逻辑上,它们有些并不重要,有些会在后边的小节中作为功能点或问题被提出并解决
3.尽可能在读完前言中的需求之后,先尝试自己在vite
源码中寻找答案,在svite
的实现过程中,尽可能的在笔者的思路上做进一步的思维发散
关于受众人群
-
对构建工具实现原理感兴趣的人
-
对原生
JavaScript
、TypeScript
和node
有一定的掌握和理解 -
学习源码本身是一件枯燥的事情,在业余时间去实现一个大体量的工程更是一件耗费精力的工作。因此笔者希望你是一个有恒心、有毅力、并且热爱
coding
的人
关于小册目录
1.揭秘pnpm create vite
2.svite工程搭建
3.本地server的创建流程
4.加载index.html
5.配置文件
6.defineConfig引发的问题思考与解决方案分析与实现
7.插件化方案设计
8.在svite中引入插件系统
9.依赖预构建--依赖扫描
10.依赖预构建--依赖打包
11.依赖预构建--依赖缓存
12.在svite中引入依赖预构建
13.模块解析器
14.借力模块解析器,让预构建全面开花
15.vite4.2引入的子路径导入是如何实现的
16.vite中实现的模块解析算法
17.import.meta.env
18.import.meta.env的数据来源
19.transformIndexHtml
20.自动打开浏览器
21.完成请求闭环
22.vite是如何处理cjs模块加载的
23.构建模块视图
24.resolve.extensions
25.热更新基础设施搭建
26.通信协议与心跳重连
27.import.meta.hot
28.视图更新与数据包生成
29.数据包响应与overlay图层
30.hot.accept与hot.invalidate
31.alias别名
32.esm模块的__filename与__dirname注入
33.静态资源的导入
34.资源管理中心的搭建
35.json具名导入
36.批量导入
37.import.meta.glob增强与端口号冲突优化
38.导入worker脚本
39.原生worker语法的兼容支持与原因分析
40.public目录
41.开箱即用的WebAssembly
42.原生css模块的导入与样式提取
43..module.css模块化
44.开箱即用的less预处理器
45.url与image-set
46.@import语法支持
47.style与link标签
48.vite不支持行内样式中使用url函数的处理办法
49.vite4.4中是如何实现Lightning CSS支持的
50.视图与热更新
51.plugin-vue工程搭建与svite联调测试
52.上下文的准备与config钩子调度
53.扫描vue模块的script标签中的第三方依赖
54.template与script标签
55.将vue组件实例渲染到web浏览器
56.style标签
57.scoped、module与lang属性
58.自定义元素
59.支持sfc中使用TypeScript
60.vue模块的热更新处理
61.支持使用jsx编写vue组件
62.proxy跨域代理
63.http缓存
64.404与请求降级
65.支持导入.ts文件
66.打开vscode中的指定文件
67.支持sourcemap调试
68.rollup的兼容支持
69.rollup的构建参数准备
70.构建结果输出与public文件夹迁移
71.打包index.html入口
72.打包script标签内容
73.打包静态文件
74.打包worker脚本
75.打包数据url
76.打包commonjs
77.打包css
78.css代码分割与压缩
79.tree-shaking
80.代码压缩
81.打包vendor
82.import构建分析
83.动态import导入
84.模块预加载
85.输出构建日志
86.浏览器兼容性支持
87.unplugin-router工程搭建
88.初始化准备与入口点扫描
89.生成配置文件
90.替换客户端导入
91.重写vue-router打包文件
92.实现文件监视器
93.与客户端建立更新连接
94.实现动态路由
95.实现嵌套路由
96.实现404路由
97.实现权限路由
98.实现prompt路由
99.动态生成路由的typescript映射提示
100.client.ts的自动重定向
101.git realease 与 git tag 的自动化生成与 npm 包的自动发布
102.支持webpack