vite技术揭秘--本地serve的创建

2022-08-20 本文已影响0人习惯水文的前端苏

$\bullet$ 配置合并

$\ast$ 合并的源大致有三种：命令行传入的、默认的和vite.config中定义的

$\alpha$ 命令行

可以看到，vite中使用第三方包cac来快速创建cli

对dev、build、optimize、preview这四种模式做了参数收集工作，与scripts中的脚本指令对应

对于当前的dev模式下，支持的配置项如下

（当前收集到的参数就只有port:3000）

$\beta$ 默认的则是对命令行中或者vite.config中没找到的配置项定义默认值，它多分散在代码逻辑的各处

$\gamma$ vite..config中的则需要查找路径读取

如下，如果指定了--c则进入if，否则，vite会自己到项目根目录下进行查找

找到之后再使用node去读取

合并则主要是通过mergeConfig函数来完成

其实，合并的本质就是对对象同名key做覆盖，这和我们日常coding时写的代码区别不大，只不过它会更复杂一些，情况更多一些。伪代码如下

$\bullet$ 创建server

源码绕来绕去的极其复杂，包括对插件的调用，proxy代理的设置以及热更新处理等，但本质上就是利用的node提供的http模块搭建的本地服务端，然后在此基础上去丰富配置和能力