Vite项目启动都做了什么？

在之前的开发中我们主要运用 vue-cli 来搭建项目，它是基于 webpack 的脚手架工具。随着 vite 的出现，这个可以提供更快、更精简的构建工具，给我们带来了另一种开发体验。在后续的项目中我们也尝试使用 vite 做开发，整个过程十分流畅，因此也想通过对源码的分析，去深入了解 vite 及 vite 插件在项目开发中起到的作用，以及是怎么加载 vue 文件的。

npm init vue@latest 

可以看到在 vite.config.ts 中会有默认的基础配置，其中涉及到 vite 官方插件 @vitejs/plugin-vue ，对于处理浏览器不识别的 .vue 文件，起到关键性作用。

过程分析

我们从 npm run dev 开始，会涉及到项目启动运行的过程、浏览器访问后文件的处理、文件热更新及缓存等，沿着这条思路，去分析下 vite 项目在启动及开发的过程中都做了什么？

运行项目

当我们在终端输入 npm run dev 的时候，npm 会在当前目录的 node_modules/.bin 查找要执行的程序，当使用 npm install 安装 vite 依赖时，在 vite 的package.json 文件中配置有 bin 字段，此时就会在 node_modules 文件夹下面的 .bin 目录中复制 bin 字段链接的执行文件，它其实是命令名到本地文件名的映射，bin 文件中呈现的是 shell 脚本，去执行 vite/bin/vite.js 文件，这样做是因为命令行中并没有 vite 的命令，我们在调用执行文件时，可以不带路径，直接使用命令名来执行相对应的执行文件。

启动服务

根据 vite/bin/vite.js 路径，在 vite 源码中的 bin 目录可以下找到 vite.js 文件,会调用 start 方法，引入 dist 目录下的服务端文件，该文件为打包后的内容，具体代码可以vite/src/node/cli.ts中查看，用于启动服务端。

在cli.ts中，首先通过 cac (一个JavaScript库，用于构建应用的CLI)，创建命令行交互，用 picocolors 来修改终端输出字符的样式，它和 chalk 的功能一样，但是体积小，速度快，满足研发过程中的需要，如果你正在开发一个库，可以试一下这两个的组合。

当在终端输入npm run dev时，会执行 cli.action 中的回调函数：

import { cac } from 'cac'
import colors from 'picocolors'

// dev
cli.command('[root]', 'start dev server') // default command.alias('serve') // the command is called 'serve' in Vite's API.alias('dev') // alias to align with the script name....action(async (root: string, options: ServerOptions & GlobalCLIOptions) => {const { createServer } = await import('./server')try {// 创建服务const server = await createServer({root,base: options.