vite-1.0启动代码解析

bin/vite.js

首先入口文件是bin/vite.js，那bin/vite.js又是调用的../dist/node/cli，这个脚本是在我们编译之后才会有的。具体的编译方法，我们可以参考package.json里面的scripts。

package.json

我们可以看下具体脚本：

run-p是一个可以并行运行脚本的命令。可以看到我们分别编译了src/node/client和src/node/server。在它们下面都有自己的TypeScript配置tsconfig.json。 上面那个/dist/node/cli是由src/node/cli.ts编译得来的，我们进入这个文件看一下。

src/node/cli.ts

这里我们可以看到，vite是用了cac来构建命令行应用的，上面是一些全局命令，下面就是serve相关的命令了。具体cac的用法可以参考它的官网。

我们重点看50行和51行，我们可以看到这里就是拿着命令行得到的参数，解析成一个options，然后传给runServe。进一步我们进入runServe来看，这里做了三件事：

1. 通过./server文件创建一个server
2. 给server加上错误处理
3. 启动server并监听传入的端口，如果没有传入，就用3000

src/node/server/index.ts

这里就需要进入src/node/server来分析了，这里有入口文件index.ts。相关代码如下：

第65行的resolveServer就是通过参数来生成一个http的Server，这里不详细展开了。

下面第66行，vite是用的chokidar来监听文件变动。然后就是resolver，这个resolver会经常用到，而且里面的功能也比较多，比如把浏览器发来的请求对应到文件，或者文件对应到请求，这个文件有600多行，我们后面再一步一步分析。

到76行，我们生成了一个context对象，它的类型是ServerPluginContext，这里我们可以这么理解，我们的vite就是一个koa服务器，koa的服务器上面会有一系列的中间件，那vite里面的ServerPlugin就是一个个的中间件。ServerPluginContext就是一个包含中间件所需要的的参数的上下文对象。它是在89行vite的第一个中间件里面注入到vite的上下文里面的。

然后就是这里的102行的resolvedPlugins了，这里的插件很多，而且大部分都可以通过名字猜出来他们是用来干啥的。后面我们会详细讲里面的一部分插件。

最后我们需要注意135到142行，这里简单来说就是会提前做一些优化，优化node_modules下面的包，后面会详细讲。

到这里为止，我们已经发现了，vite最底层就是一个koa搭建的服务器，那些各种功能都是通过koa的中间件完成的，比如HMR，代码注入，代码重写，文件解析等。