初识 vite 原理，vite 是如何启动项目的

"scripts": {
  "dev": "vite"
},

function start() {
  return import('../dist/node/cli.js')
}

start()

const cli = cac('vite')

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
  .option('--host [host]', `[string] specify hostname`)
  .option('--port <port>', `[number] specify port`)
  .option('--https', `[boolean] use TLS + HTTP/2`)
  .option('--open [path]', `[boolean | string] open browser on startup`)
  .option('--cors', `[boolean] enable CORS`)
  .option('--strictPort', `[boolean] exit if specified port is already in use`)
  .option('--force', `[boolean] force the optimizer to ignore the cache and re-bundle`)
  .action()

cli.action(async (/* 入参数 */) => {
  filterDuplicateOptions(options)
  // 核心：启动本地 server
  const { createServer } = await import('./server')
  try {
    const server = await createServer({
      root,
      base: options.base,
      mode: options.mode,
      configFile: options.config,
      logLevel: options.logLevel,
      clearScreen: options.clearScreen,
      optimizeDeps: { force: options.force },
      server: cleanOptions(options),
    })

    await server.listen()

    // 控制台输出本地 server 启动结果
    const info = server.config.logger.info

    server.printUrls()
    // 定义控制台的操作快捷键
    bindShortcuts(server, {})
  } catch (e) {
    process.exit(1)
  }
})

const config = await resolveConfig(inlineConfig, 'serve')
const { root, server: serverConfig } = config
const httpsOptions = await resolveHttpsConfig(config.server.https)
const { middlewareMode } = serverConfig

const resolvedWatchOptions = resolveChokidarOptions(config, {
  disableGlobbing: true,
  ...serverConfig.watch,
})

const httpServer = middlewareMode
  ? null
  : await resolveHttpServer(serverConfig, middlewares, httpsOptions)
const ws = createWebSocketServer(httpServer, config, httpsOptions)

if (httpServer) {
  setClientErrorHandler(httpServer, config.logger)
}

const watcher = chokidar.watch(
  [root, ...config.configFileDependencies, config.envDir],
  resolvedWatchOptions
) as FSWatcher

// 文件变化操作
watcher.on('change', async (file) => {
  file = normalizePath(file)
  moduleGraph.onFileChange(file)

  await onHMRUpdate(file, false)
})

// 文件新增和删除操作
watcher.on('add', onFileAddUnlink)
watcher.on('unlink', onFileAddUnlink)

const moduleGraph: ModuleGraph = new ModuleGraph((url, ssr) =>
  container.resolveId(url, undefined, { ssr })
)

const container = await createPluginContainer(config, moduleGraph, watcher)

const server: ViteDevServer = {
  // ===== 核心属性 =====
  config, // 配置属性
  middlewares, // 中间件
  httpServer, // HTTP server 实例
  watcher, // chokidar 文件监听实例
  pluginContainer: container, // 插件容器
  ws, // WebSocket 实例
  moduleGraph, // 模块依赖图

  // ===== 核心方法 =====
  // index.html 转换方法
  transformIndexHtml: createDevHtmlTransformFn(server),
  // 启动 server 方法
  async listen(port?: number, isRestart?: boolean) {
    ;/.../
  },
  // 打开浏览器
  openBrowser() {
    ;/.../
  },
  // 关闭 server
  async close() {
    ;/.../
  },
  // 打印 url
  printUrls() {
    ;/.../
  },
  // 重启 server
  async restart(forceOptimize?: boolean) {
    ;/.../
  },
}

const postHooks: ((() => void) | void)[] = []
for (const hook of config.getSortedPluginHooks('configureServer')) {
  postHooks.push(await hook(server))
}

// 其他中间件定义...

// 执行 post 插件
postHooks.forEach((fn) => fn && fn())

// 处理 index.html 中间件
middlewares.use(indexHtmlMiddleware(server))

import connect from 'connect'

const middlewares = connect() as Connect.Server

// 计算操作执行时间
middlewares.use(timeMiddleware(root))

// 处理是否允许跨域
middlewares.use(corsMiddleware(typeof cors === 'boolean' ? {} : cors))

// 请求代理
middlewares.use(proxyMiddleware(httpServer, proxy, config))

// base 地址处理
middlewares.use(baseMiddleware(server))

// 通过 launch-editor-middleware，在代码编辑器打开指定的文件，跳转到指定行号
middlewares.use('/__open-in-editor', launchEditorMiddleware())

// 热更新 ping header 处理
middlewares.use(function viteHMRPingMiddleware(req, res, next) {
  if (req.headers['accept'] === 'text/x-vite-ping') {
    res.writeHead(204).end()
  } else {
    next()
  }
})

// 处理 public 目录
middlewares.use(servePublicMiddleware(config.publicDir, config.server.headers))

// 响应请求之前，对请求的文件进行预处理
middlewares.use(transformMiddleware(server))

// 静态文件处理
middlewares.use(serveRawFsMiddleware(server))
middlewares.use(serveStaticMiddleware(root, server))

// 处理单页应用退回问题
middlewares.use(htmlFallbackMiddleware(root, config.appType === 'spa'))

// 处理 index.html
middlewares.use(indexHtmlMiddleware(server))

// 处理 404 情况
middlewares.use(function vite404Middleware(_, res) {
  res.statusCode = 404
  res.end()
})

// 错误处理
middlewares.use(errorMiddleware(server, middlewareMode))