Vite ![]()
![]()
Vite 是已成为现代前端开发最重要的基础设施之一
vite dev 发生了什么
vite 的 CLI 工具使用 cacjs/cac 作为框架，如果对此工具不了解，可以先去它的仓库看看
在 cli.ts 中，定义了一个根命令，就是不带二级参数，即 vite 命令，以及别名 vite serve 和 vite dev，所以三者是完全等价的，都代表启动一个开发服务
上面有两个关键步骤，通过 createServer 创建一个服务，以及调用 server.listen() 监听 5173 端口。
node 方面的初始化工作就完成了，具体里面的细节我们下面再说
浏览器访问
我们打开浏览器，访问 http://localhost:5173，假设我们是使用 create-vite 创建的 vue 的模版项目，我们看到的应该是下面的内容：
具体发生了什么呢？
我们逐步分享浏览器的请求，以及 vite 服务器的响应，首先，浏览器向服务器请求根路径 http://localhost:5173
在 vite 服务这边，NodeJs 服务的创建是直接调用的原生的 node:http 模块的 createServer 方法，中间件框架使用了 senchalabs/connect
在中间件中，对于根请求的处理在：
我们默认的就是一个 spa 程序，对 index.html 的处理，在 indexHtmlMiddleware 中间件中：
主要的工作就是读取你项目中的那个 index.html 文件的原始内容，然后调用 server.transformIndexHtml 方法处理，再返回处理后的内容，这个方法内部调用了 createDevHtmlTransformFn 方法，它的代码如下：
上面的 resolveHtmlTransforms 作用就是从 vite.config.ts 中读取所有的 plugins 插件，拿到里面的针对 HTML 转换的钩子 resolveHtmlTransforms，然后对插件的调用时机排序，得到一个 transformHooks 数组，然后依次链式调用，最终得到转换后的 html 文件，返回浏览器，即：
由于默认的模版并没有插件进行转换，所以我们看到了内容和原始本地的 index.html 文件没什么区别
后续请求的处理
根据返回的 html 内容可以看到，浏览器首先会请求 /@vite/client 这个 script 标签的 src，这个是 HMR 相关的 js，我们先忽略
然后重中之重就是请求了 src/main.ts 文件，这个是我们的主要内容的入口，主要内容的处理交给 transformMiddleware 中间件：
他的内容，如果是 JS/CSS/Import 请求，都会走到这里来处理：
transformRequest 方法是 vite 转换的重点和难点，核心的流程都在这个步骤里面