vite源码 - 开始

要学习 vite 源码，一开始需要看 vite 包的 package.json 文件。

在 package.json 文件中，会配置 bin 字段，该字段用来配置可执行命令。也是 vite 的入口文件。

package.json 复制代码

{
  "bin": {
    "vite": "bin/vite.js"
  },
}

bin/vite.js

这个文件是一个壳文件，主要做了以下几件事：

初始化调试和错误处理逻辑
处理命令行参数
处理编译缓存
加载真正的 cli 逻辑

这里的逻辑相对简单，最重要的就是加载真正的 cli 逻辑。

js 复制代码

function start() {
  try {
    // 开启编译缓存
    module.enableCompileCache?.()
    // 定时清除编译缓存
    setTimeout(() => {
      try {
        module.flushCompileCache?.()
      } catch {}
    }, 10 * 1000).unref()
  } catch {}
  // 加载真正的 cli 逻辑
  return import('../dist/node/cli.js')
}

cli

cli 文件的作用一句话就可以说清，那就是使用 cac 定义 cli 命令，并启动。这里的 cac 包是一个命令行框架。

伪代码复制代码

// 初始化
const cli = cac('vite')
// 定义命令
cli
  .command(....)
// 启动
cli.parse()

定义的命令有以下几个：

dev
build
optimize
preview

这里重点看开发环境的命令。

dev 命令

csharp 复制代码

cli
  .command('[root]', 'start dev server') // 配置默认命令
  .alias('serve') // 配置别名 serve
  .alias('dev') // 配置别名 dev
  // 删除命令配置相关
  .action(async (root: string, options: ServerOptions & GlobalCLIOptions) => {
    filterDuplicateOptions(options)
    const { createServer } = await import('./server')
    try {
      const server = await createServer({
        root,
        base: options.base,
        mode: options.mode,
        configFile: options.config,
        configLoader: options.configLoader,
        logLevel: options.logLevel,
        clearScreen: options.clearScreen,
        server: cleanGlobalCLIOptions(options),
        forceOptimizeDeps: options.force,
      })

      await server.listen()
      server.printUrls()
      // 快捷键相关逻辑
      // ...
    } catch (e) {
      // 错误处理逻辑
    }
  })

可以看到，整个命令的核心代码非常简单，就是引入 createServer 函数，创建一个 server，并启动。

结束

以上的内容已经在 vite 源码中找到一个入口了，知道在调用 vite 时会发生什么，但是也有很多问题。比如：

如何创建 server 的？
配置文件怎么生效的？
插件怎么执行的？
如何处理静态资源文件？
在请求时发生了什么？

等等问题，还需要进一步学习。