我们知道， package.json 文件的 bin 字段是用来指定要运行的命令及运行命令所要执行的文件

vite 命令执行的文件

vite 的配置如下：

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

好了，我们知道启动 dev-server 的 vite 命令，实际运行的就是 bin/vite.js 文件，那我们进去看看：

1. 入口：vite/bin/vite.js

判断当前目录是否包含 node_modules 目录，若不包含，则需要 source-map 支持

#!/usr/bin/env node // 固定格式，用来指定命令运行的环境（node）

if (!__dirname.includes('node_modules')) {
  try {
    // only available as dev dependency
    require('source-map-support').install();
  } catch (e) {}
}

2. 检查 process.argv 是否是 debug 模式

// check debug mode first before requiring the CLI.
const debugIndex = process.argv.findIndex((arg) =>
  /^(?:-d|--debug)$/.test(arg),
);
const filterIndex = process.argv.findIndex((arg) =>
  /^(?:-f|--filter)$/.test(arg),
);

if (debugIndex > 0) {
  let value = process.argv[debugIndex + 1];
  if (!value || value.startsWith('-')) {
    value = 'vite:*';
  } else {
    // support debugging multiple flags
    // with comma-separated list
    value = value
      .split(',')
      .map((v) => `vite:${v}`)
      .join(',');
  }
  process.env.DEBUG = value;

  if (filterIndex > 0) {
    const filter = process.argv[filterIndex + 1];
    if (filter && !filter.startsWith('-')) {
      process.env.VITE_DEBUG_FILTER = filter;
    }
  }
}

3. 导入编译后的 cli 脚本

const profileIndex = process.argv.indexOf('--profile');

function start() {
  require('../dist/node/cli');
}

// 如果配置了 profile 参数
if (profileIndex > 0) {
  // 截掉 '--profile'
  process.argv.splice(profileIndex, 1);
  const next = process.argv[profileIndex];
  if (next && !next.startsWith('-')) {
    process.argv.splice(profileIndex, 1);
  }
  // 创建会话连接（webkit inspector）
  const inspector = require('inspector');
  const session = (global.__vite_profile_session = new inspector.Session());
  session.connect();
  session.post('Profiler.enable', () => {
    session.post('Profiler.start', start);
  });
} else {
  // 正常启动
  start();
}

4. 进入 cli.js，源码：vite/src/node/cli.ts

import { cac } from 'cac'; /* 一个简单且强大的命令行库，比 commander 更轻量 */
import chalk from 'chalk'; /* 美化控制台日志记录 */
import { performance } from 'perf_hooks'; /* node.js 收集性能指标的对象 */
import { BuildOptions } from './build'; /* 打包 📦 配置项 */
import { ServerOptions } from './server'; /* 启动服务的配置项 */
import { createLogger, LogLevel } from './logger'; /* 打印日志 */
import { resolveConfig } from '.'; /* 处理配置项的方法 */
import { preview } from './preview'; /* 打包结果预览方法 */

// 使用 cac 生成 cli 实例
const cli = cac('vite');

5. 全局 cli 选项及清理选项

// global options
interface GlobalCLIOptions {
  '--'?: string[];
  c?: boolean | string;
  config?: string;
  base?: string;
  l?: LogLevel;
  logLevel?: LogLevel;
  clearScreen?: boolean;
  d?: boolean | string;
  debug?: boolean | string;
  f?: string;
  filter?: string;
  m?: string;
  mode?: string;
}
/**
 * removing global flags before passing
 * as command specific sub-configs
 * 删除全局 cli 配置
 */
function cleanOptions<Options extends GlobalCLIOptions>(
  options: Options,
): Omit<Options, keyof GlobalCLIOptions> {
  const ret = { ...options };
  delete ret['--'];
  delete ret.c;
  delete ret.config;
  delete ret.base;
  delete ret.l;
  delete ret.logLevel;
  delete ret.clearScreen;
  delete ret.d;
  delete ret.debug;
  delete ret.f;
  delete ret.filter;
  delete ret.m;
  delete ret.mode;
  return ret;
}

6. cli 参数定义

这里我们就只研究一下开发环境下的功能实现，生产环境/预览环境后续再考虑吧～

// 下面是一些核心参数，如 -c 指定配置文件等
cli
  .option('-c, --config <file>', `[string] use specified config file`)
  .option('--base <path>', `[string] public base path (default: /)`)
  .option('-l, --logLevel <level>', `[string] info | warn | error | silent`)
  .option('--clearScreen', `[boolean] allow/disable clear screen when logging`)
  .option('-d, --debug [feat]', `[string | boolean] show debug logs`)
  .option('-f, --filter <filter>', `[string] filter debug logs`)
  .option('-m, --mode <mode>', `[string] set env mode`);

// dev 开发环境，主要针对 server 的参数配置
cli
  .command('[root]') // 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(devAction);
/* 这里将 action 函数抽出来单独看，免得篇幅过长，拎不清注意点 */

cli.help(); // 命令行使用 -h / --help 参数，输出帮助信息
cli.version(require('../../package.json').version); // vite 版本号

cli.parse(); // 解析命令行参数

devAction 函数 ：

const devAction = async (
  root: string,
  options: ServerOptions & GlobalCLIOptions,
) => {
  // output structure is preserved even after bundling so require()
  // is ok here
  const { createServer } = await import('./server'); // 导入创建 dev-server
  try {
    const server = await createServer({
      root,
      base: options.base,
      mode: options.mode,
      configFile: options.config,
      logLevel: options.logLevel,
      clearScreen: options.clearScreen,
      server: cleanOptions(options),
    });
    // native Node http server instance or null
    if (!server.httpServer) {
      throw new Error('HTTP server not available');
    }
    await server.listen(); // 启动 dev-server
    const info = server.config.logger.info; // info 日志

    info(
      chalk.cyan(`\n  vite v${require('vite/package.json').version}`) +
        chalk.green(` dev server running at:\n`),
      {
        clear: !server.config.logger.hasWarned,
      },
    );
    // 调用 logger.ts 的 printCommonServerUrls 方法打印 dev-server 运行的 url
    server.printUrls();

    // __vite_start_time 在执行 vite 命令时
    // 赋值为 performance.now()，记录启动服务的开始时间
    if (global.__vite_start_time) {
      // 服务启动时间（ms）
      const startupDuration = performance.now() - global.__vite_start_time;
      info(`\n  ${chalk.cyan(`ready in ${Math.ceil(startupDuration)}ms.`)}\n`);
    }
  } catch (e) {
    // 打印服务启动失败的日志
    createLogger(options.logLevel).error(
      chalk.red(`error when starting dev server:\n${e.stack}`),
      { error: e },
    );
    // 结束进程
    process.exit(1);
  }
};

7. createServer

// vite/src/node/server/index.ts
export async function createServer(
  inlineConfig: InlineConfig = {},
): Promise<ViteDevServer> {
  // 这个方法里，大概做了下面这些事：
  // 1. 处理服务的启动配置
  const config = await resolveConfig(inlineConfig, 'serve', 'development');
  const httpsOptions = await resolveHttpsConfig(config.server.https);

  // 2. 检查 config.server.middlewareMode 是否 === true，若是将其置为 'ssr'
  // connect 包创建连接（方便使用中间件来扩展的 node http server 框架）
  const middlewares = connect() as Connect.Server;
  const httpServer = middlewareMode
    ? null
    : await resolveHttpServer(serverConfig, middlewares, httpsOptions);
  // resolveHttpServer 方法用来区分使用 http / https / http2 (npm package)来
  // 创建 server 并返回赋值给 httpServer

  // 3. 创建 webSocket 实例
  const ws = createWebSocketServer(httpServer, config, httpsOptions);

  // 4. 使用 chokidar 监听 文件 修改
  const { ignored = [], ...watchOptions } = serverConfig.watch || {};
  const watcher = chokidar.watch(path.resolve(root), {
    ignored: [
      '**/node_modules/**',
      '**/.git/**',
      ...(Array.isArray(ignored) ? ignored : [ignored]),
    ],
    ignoreInitial: true,
    ignorePermissionErrors: true,
    disableGlobbing: true,
    ...watchOptions,
  }) as FSWatcher;

  // 5. 创建 pluginContainer，创建模块映射表
  const container = await createPluginContainer(config, moduleGraph, watcher);

  const moduleGraph: ModuleGraph = new ModuleGraph((url) =>
    container.resolveId(url),
  );
  const closeHttpServer = createServerCloseFn(httpServer);

  // 6. 创建 server 对象
  const server: ViteServer = {
    config,
    middlewares,
    get app() {
      // 过期的 api
      return middlewares;
    },
    httpServer,
    watcher,
    pluginContainer: container,
    ws,
    moduleGraph,
    transformWithEsbuild,
    transformRequest(url, options) {
      return transformRequest(url, server, options);
    },
    transformIndexHtml: null!, // to be immediately set
    ssrLoadModule(url) {
      // ... 服务端渲染加载 module
    },
    listen(port?: number, isRestart?: boolean) {
      // 启动 dev-server 方法
      return startServer(server, port, isRestart);
    },
    async close() {
      // 退出 dev-server
      // watcher，ws，container，httpServer
    },
    printUrls() {
      // 打印日志
    },
    async restart(forceOptimize: boolean) {
      // 调用 restartServer 方法，重启 dev-server
    },
    // _xxxx  一些私有属性
  };

  // 立即创建转换 html 的方法
  server.transformIndexHtml = createDevHtmlTransformFn(server);

  // 7. package 缓存
  const { packageCache } = config;
  const setPackageData = packageCache.set.bind(packageCache);
  packageCache.set = (id, pkg) => {
    if (id.endsWith('.json')) {
      watcher.add(id);
    }
    return setPackageData(id, pkg);
  };

  // 8. watcher 监听文件变化：change, add, unlink
  // 具体可见 【热更新机制】
  watcher.on('change', async (file) => {
    /* ...other code */
  });

  // 9. 一堆中间件的应用
  // /node/server/middlewares/*.ts

  return server; // 返回创建的 server 对象
}