Vite 源码系列开篇(0)：寻找 Vite 启动的入口文件

前言

这是 Vite 源码系列的开篇，在该系列中我们会根据 Vite 流程来阅读它的源码。

所以我们先要找到 Vite 启动时的入口文件。想要找到入口文件，我们需要从 Vite 提供的命令开始入手。

Vite 提供了以下几个命令：

vite 在当前目录下启动 Vite 开发服务器，别名：vite dev，vite serve
vite build 构建生产版本。
vite preview 本地预览构建产物。
vite optimize 预构建依赖。

对应的 npm scripts 如下：

json 复制代码

{
  "scripts": {
    "dev": "vite", // 启动开发服务器，别名：`vite dev`，`vite serve`
    "build": "vite build", // 为生产环境构建产物
    "preview": "vite preview", // 本地预览生产构建产物
    "optimize": "vite optimize" // 依赖预构建
  }
}

开发阶段我们在项目目录下的命令行中输入 npm run dev来启动 Vite 开发服务器。所以我们搞清楚 npm run dev 的过程就能找到 Vite 启动的入口文件。

从命令行说起

在 Windows 中，当你想在 cmd 中直接运行某个程序时，你需要先输入该程序名字，然后系统会在 Path 环境变量的路径中去寻找是否有匹配的可执行程序，找到匹配的程序则执行，未找到话则会提示输入的不是内部或者外部的命令。

打开 cmd 输入 set Path，可以查看当前的 Path 环境变量。接着在 cmd 中直接输入 Vite 启动开发服务的命令 vite，可以看到命令行提示没有 vite 这个命令。

开发项目时，Vite 包会被局部安装在项目目录下的 node_modules目录中，由于是局部安装，npm 不会将当前项目下的 node_modules/.bin绝对路径加入到 Path 环境变量中。所以此时 Path 环境变量的路径中并没有能和 Vite 可执行程序匹配的路径，所以无法执行vite这个命令。

一个局部安装的 npm 包的历程

局部安装依赖包时，如果这个包的 package.json 中有 bin 字段，npm 在 node_modules/.bin 文件夹下生成对应的可执行文件。这个可执行文件的作用是使用 Node.js 来执行这个包的 package.json 中 bin 字段对应的 js 文件。
调用 npm run xxx 命令时，npm 将当前目录下的 node_modules/.bin 的绝对路径临时加入到环境变量 PATH 中。
接着系统去 PATH 环境变量的路径中查找 xxx 对应的可执行程序。
匹配到可执行程序后，执行可执行程序，否则提示输入的不是内部或者外部的命令。

Vite 的 npm run dev 过程

安装 Vite 依赖包，创建可执行文件

当我们安装 Vite 时，Vite 包的 package.json 中有 bin 字段，所以 npm 会在 node_modules/.bin 文件夹下生成对应的可执行文件。

打开 node_modules/.bin 文件夹，找到 Vite 的可执行文件，可以发现有三个对应的可执行文件。

vite bash 脚本
vite.cmd cmd 脚本
vite.ps1 powershell 脚本

打开 vite.cmd

通过最后一行可以看出，可执行文件作用是用 Node.js 来执行 vite/bin/vite.js 文件（其它两个文件的作用同样如此）。而 vite/bin/vite.js 这个文件路径正是来自于 Vite 包的 package.json 中的 bin 字段和包名 vite 拼接而成。

使用 Vite 阶段

当在命令行中输入 npm run dev 时，npm run 命令将当前目录下的 node_modules/.bin 的绝对路径临时加入到 Path 环境变量中去。在当前目录下输入 npm run env 可以查看我们的程序运行时的 Path 环境变量。

可以看到 Path 环境变量中多了我们当前项目 node_modules/.bin 地绝对路径。分别为：

D:\Study\v-project\node_modules\.bin
\Study\v-project\node_modules\.bin
\node_modules\.bin

系统去 PATH 环境变量的路径中查找匹配的可执行程序

npm run dev 会对应 package.json 中的 scripts 的 dev 属性，这个属性的值为 vite，所以对应的可执行程序名为 vite。接着系统会在 Path 环境变量的路径D:\Study\v-project\node_modules\.bin目录下找到匹配的可执行程序，也就是 D:\Study\v-project\node_modules\.bin\vite.cmd。

执行可执行文件

系统接着执行可执行文件D:\Study\v-project\node_modules\.bin\vite.cmd ，可执行文件使用 Node.js 执行 vite/bin/vite.js 这个 js 文件。

至此我们就找到了 Vite 启动的入口文件。下一节我们将探索 vite/bin/vite.js 这个文件到底做了什么。

补充

既然最终是执行 node_modules/vite/bin/vite.js 这个文件，那么我们是否可以直接在命令行用 node 来执行这个文件呢？当然是可以的。在当前目录下打开命令行，输入 node ./node_modules/vite/bin/vite.js 可以看到 Vite 服务也能正常启动起来。