为什么要写该专栏
一方面,是为了提升自己的影响力,比如在平台中积累人气,这其实是一笔无形的财富,它必将对日后的跳槽或转行有一定的助力
另一方面,是为了自我学习与进步。早些年,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