启动过程

  • Umi 命令会执行 bin/umi.js 文件，该文件直接运行 cli/cli.ts 中的 run() 方法 ```javascript import { logger, yParser } from ‘@umijs/utils’; import { DEV_COMMAND } from ‘../constants’; import { Service } from ‘../service/service’; import { dev } from ‘./dev’; import { checkLocal, checkVersion as checkNodeVersion, setNoDeprecation, setNodeTitle, } from ‘./node’;

interface IOpts { presets?: string[]; }

export async function run(opts?: IOpts) { // 检查node环境 checkNodeVersion(); // 检查是否是本地 checkLocal(); // 设置Node title setNodeTitle(); // 设置是否将弃用警告消息打印到stderr setNoDeprecation(); // 解析命令行参数 const args = yParser(process.argv.slice(2), { alias: { version: [‘v’], help: [‘h’], }, boolean: [‘version’], });

// 设置环境变更nodeenv为开发或者生产环境 const command = args.[0]; if ([DEVCOMMAND, ‘setup’].includes(command)) { process.env.NODE_ENV = ‘development’; } else if (command === ‘build’) { process.env.NODE_ENV = ‘production’; } // 判断是否存在预设 if (opts?.presets) { process.env.UMI_PRESETS = opts.presets.join(‘,’); } // 判断开发和生产环境下执行不同的命令 if (command === DEV_COMMAND) { // 执行dev方法 dev(); } else { try { // 生产环境直接实例化Service类并执行run2方法 await new Service().run2({ name: args.[0], args, }); } catch (e: any) { logger.error(e); process.exit(1); } } }

  2. - 开发环境执行的dev方法
  3. ```typescript
  4. import fork from './fork';
  6. export function dev() {
  7.   // fork一个子进程并设置scriptPath
  8.   const child = fork({
  9.     scriptPath: require.resolve('../../bin/forkedDev'),
  10.   });
  11.   // ref:
  12.   // http://nodejs.cn/api/process/signal_events.html
  13.   // https://lisk.io/blog/development/why-we-stopped-using-npm-start-child-processes
  14.   // 监听当主进程退出时，手动结束掉子进程
  15.   process.on('SIGINT', () => {
  16.     child.kill('SIGINT');
  17.     // ref:
  18.     // https://github.com/umijs/umi/issues/6009
  19.     process.exit(0);
  20.   });
  21.   process.on('SIGTERM', () => {
  22.     child.kill('SIGTERM');
  23.     process.exit(1);
  24.   });
  25. }

  • foredDev文件

    1. (async () => {
    2. try {
    3.   // 解析参数
    4.   const args = yParser(process.argv.slice(2));
    5.   // 初始化Service实例
    6.   const service = new Service();
    7.   // 执行run2方法
    8.   await service.run2({
    9.     name: DEV_COMMAND,
    10.     args,
    11.   });
    12.   // 监听退出相关事件
    13.   let closed = false;
    14.   // kill(2) Ctrl-C
    15.   process.once('SIGINT', () => onSignal('SIGINT'));
    16.   // kill(3) Ctrl-\
    17.   process.once('SIGQUIT', () => onSignal('SIGQUIT'));
    18.   // kill(15) default
    19.   process.once('SIGTERM', () => onSignal('SIGTERM'));
    20.   function onSignal(signal: string) {
    21.     if (closed) return;
    22.     closed = true;
    23.     // 退出时触发插件中的 onExit 事件
    24.     service.applyPlugins({
    25.       key: 'onExit',
    26.       args: {
    27.         signal,
    28.       },
    29.     });
    30.     process.exit(0);
    31.   }
    32. } catch (e: any) {
    33.   logger.error(e);
    34.   process.exit(1);
    35. }
    36. })();

    Service类

  • 从上述启动过程来看，主要核心还是在Service类中 ```typescript export class Service extends CoreService { constructor(opts?: any) { // 设置UMI_DIR目录 process.env.UMI_DIR = dirname(require.resolve(‘../../package’)); // 获取当前工作目录 const cwd = getCwd(); // 调用super函数传入相关配置信息 super({

    1. ...opts,
    2. // 环境变量
    3. env: process.env.NODE_ENV,
    4. // 当前工作目录
    5. cwd,
    6. // 默认配置文件
    7. defaultConfigFiles: DEFAULT_CONFIG_FILES,
    8. frameworkName: FRAMEWORK_NAME,
    9. // 预设
    10. presets: [require.resolve('@umijs/preset-umi'), ...(opts?.presets || [])],
    11. // 插件
    12. plugins: [
    13.   existsSync(join(cwd, 'plugin.ts')) && join(cwd, 'plugin.ts'),
    14.   existsSync(join(cwd, 'plugin.js')) && join(cwd, 'plugin.js'),
    15. ].filter(Boolean),

    }); } async run2(opts: { name: string; args?: any }) { let name = opts.name; if (opts?.args.version || name === ‘v’) {

    1. name = 'version';

    } else if (opts?.args.help || !name || name === ‘h’) {

    1. name = 'help';

    } // 执行CoreService类中的run方法 return await this.run({ …opts, name }); } }

  2. - CoreService来自于@umijs/core库中src/service/service.ts
  3. ```typescript
  4.   async run(opts: { name: string; args?: any }) {
  5.     const { name, args = {} } = opts;
  6.     args._ = args._ || [];
  7.     // shift the command itself
  8.     if (args._[0] === name) args._.shift();
  9.     this.args = args;
  10.     this.name = name;
  12.     // 当前umi阶段为init阶段
  13.     this.stage = ServiceStage.init;
  14.     //  加载工作目录下.env文件中的环境变量并设置到process.env上
  15.     loadEnv({ cwd: this.cwd, envFile: '.env' });
  16.     // 获取工作目录中package.json信息及package.json路径并挂载至this上
  17.     let pkg: Record<string, string | Record<string, any>> = {};
  18.     let pkgPath: string = '';
  19.     try {
  20.       pkg = require(join(this.cwd, 'package.json'));
  21.       pkgPath = join(this.cwd, 'package.json');
  22.     } catch (_e) {
  23.       // APP_ROOT
  24.       if (this.cwd !== process.cwd()) {
  25.         try {
  26.           pkg = require(join(process.cwd(), 'package.json'));
  27.           pkgPath = join(process.cwd(), 'package.json');
  28.         } catch (_e) {}
  29.       }
  30.     }
  31.     this.pkg = pkg;
  32.     this.pkgPath = pkgPath;
  33.     // 获取用户配置信息
  34.     // 1. 获取用户配置文件并挂载到config实例上
  35.     const configManager = new Config({
  36.       cwd: this.cwd,
  37.       env: this.env,
  38.       defaultConfigFiles: this.opts.defaultConfigFiles,
  39.     });
  40.     // 用户配置挂载至Services类上
  41.     this.configManager = configManager;
  42.     this.userConfig = configManager.getUserConfig().config;
  43.     // 初始化预设及插件
  44.     const { plugins, presets } = Plugin.getPluginsAndPresets({
  45.       cwd: this.cwd,
  46.       pkg,
  47.       plugins: [require.resolve('./generatePlugin')].concat(
  48.         this.opts.plugins || [],
  49.       ),
  50.       presets: [require.resolve('./servicePlugin')].concat(
  51.         this.opts.presets || [],
  52.       ),
  53.       userConfig: this.userConfig,
  54.       prefix: this.opts.frameworkName || DEFAULT_FRAMEWORK_NAME,
  55.     });
  56.     // 当前umi阶段为initPresets阶段
  57.     this.stage = ServiceStage.initPresets;
  58.     const presetPlugins: Plugin[] = [];
  59.     // 注册预设及插件
  60.     // 循环初始化预设，preset插入到队首，plugins插入到队尾，主要保证执行的顺序和关系
  61.     while (presets.length) {
  62.       await this.initPreset({
  63.         preset: presets.shift()!,
  64.         presets,
  65.         plugins: presetPlugins,
  66.       });
  67.     }
  68.     plugins.unshift(...presetPlugins);
  69.      // 当前umi阶段为initPlugins阶段
  70.     this.stage = ServiceStage.initPlugins;
  71.     // 循环初始化plugin
  72.     while (plugins.length) {
  73.       await this.initPlugin({ plugin: plugins.shift()!, plugins });
  74.     }
  75.     // 生成plugin map对象
  76.     for (const id of Object.keys(this.plugins)) {
  77.       this.keyToPluginMap[this.plugins[id].key] = this.plugins[id];
  78.     }
  79.     // 收集相关默认配置
  80.     for (const id of Object.keys(this.plugins)) {
  81.       const { config, key } = this.plugins[id];
  82.       if (config.schema) this.configSchemas[key] = config.schema;
  83.       if (config.default !== undefined) {
  84.         this.configDefaults[key] = config.default;
  85.       }
  86.       this.configOnChanges[key] = config.onChange || ConfigChangeType.reload;
  87.     }
  88.     // 获取相关path路径
  89.     const paths = getPaths({
  90.       cwd: this.cwd,
  91.       env: this.env,
  92.       prefix: this.opts.frameworkName || DEFAULT_FRAMEWORK_NAME,
  93.     });
  94.     // 重新定义输出路径
  95.     if (this.config.outputPath) {
  96.       paths.absOutputPath = join(this.cwd, this.config.outputPath);
  97.     }
  98.     // 当前umi阶段为resolveConfig阶段
  99.     this.stage = ServiceStage.resolveConfig;
  100.     const config = await this.applyPlugins({
  101.       key: 'modifyConfig',
  102.       initialValue: lodash.cloneDeep(
  103.         configManager.getConfig({
  104.           schemas: this.configSchemas,
  105.         }).config,
  106.       ),
  107.       args: { paths },
  108.     });
  109.     const defaultConfig = await this.applyPlugins({
  110.       key: 'modifyDefaultConfig',
  111.       initialValue: this.configDefaults,
  112.     });
  113.     // 合并默认配置以及用户配置
  114.     this.config = lodash.merge(defaultConfig, config) as Record<string, any>;
  115.     this.paths = await this.applyPlugins({
  116.       key: 'modifyPaths',
  117.       initialValue: paths,
  118.     });
  119.      // 当前umi阶段为collectAppData阶段
  120.     this.stage = ServiceStage.collectAppData;
  121.     // 收集app相关数据信息
  122.     this.appData = await this.applyPlugins({
  123.       key: 'modifyAppData',
  124.       initialValue: {
  125.         // base
  126.         cwd: this.cwd,
  127.         pkg,
  128.         pkgPath,
  129.         plugins,
  130.         presets,
  131.         name,
  132.         args,
  133.         // config
  134.         userConfig: this.userConfig,
  135.         mainConfigFile: configManager.mainConfigFile,
  136.         config,
  137.         defaultConfig: defaultConfig,
  138.         // TODO
  139.         // moduleGraph,
  140.         // routes,
  141.         // npmClient,
  142.         // nodeVersion,
  143.         // gitInfo,
  144.         // gitBranch,
  145.         // debugger info,
  146.         // devPort,
  147.         // devHost,
  148.         // env
  149.       },
  150.     });
  151.     // 当前umi阶段为onCheck阶段
  152.     this.stage = ServiceStage.onCheck;
  153.     await this.applyPlugins({
  154.       key: 'onCheck',
  155.     });
  156.     // 当前umi阶段为onStart阶段
  157.     this.stage = ServiceStage.onStart;
  158.     await this.applyPlugins({
  159.       key: 'onStart',
  160.     });
  161.      // 当前umi阶段为runCommand阶段
  162.     this.stage = ServiceStage.runCommand;
  163.     const command = this.commands[name];
  164.     assert(command, `Invalid command ${name}, it's not registered.`);
  165.     return command.fn({ args });
  166.   }

run中生命周期：

  • init stage
  • initPresets stage
  • initPlugins stage
  • resolveConfig stage
  • collectAppData stage
  • onCheck stage
  • onStart stage

  • runCommand stage

    init stage

  • Service 通过调用 Plugin.getPluginsAndPresets 静态方法来获取所有的插件

    1. static getPluginsAndPresets(opts: {
    2.   cwd: string;
    3.   pkg: any;
    4.   userConfig: any;
    5.   plugins?: string[];
    6.   presets?: string[];
    7.   prefix: string;
    8. }) {
    9.   function get(type: 'plugin' | 'preset') {
    10.     const types = `${type}s` as 'plugins' | 'presets';
    11.     return [
    12.       // opts中，在调用 Plugin.getPluginsAndPresets 时可以向其传入部分插件
    13.       ...(opts[types] || []),
    14.       // env 中，环境变量里可以添加插件
    15.       ...(process.env[`${opts.prefix}_${types}`.toUpperCase()] || '')
    16.         .split(',')
    17.         .filter(Boolean),
    18.       // 从用户配置中获取环境变量
    19.       ...(opts.userConfig[types] || []),
    20.     ].map((path) => {
    21.       assert(
    22.         typeof path === 'string',
    23.         `Invalid plugin ${path}, it must be string.`,
    24.       );
    25.       let resolved;
    26.       // 校验path是否存在
    27.       try {
    28.         resolved = resolve.sync(path, {
    29.           basedir: opts.cwd,
    30.           extensions: ['.tsx', '.ts', '.mjs', '.jsx', '.js'],
    31.         });
    32.       } catch (_e) {
    33.         throw new Error(`Invalid plugin ${path}, can not be resolved.`);
    34.       }
    36.       return new Plugin({
    37.         path: resolved,
    38.         type,
    39.         cwd: opts.cwd,
    40.       });
    41.     });
    42.   }
    43.   return {
    44.     presets: get('preset'),
    45.     plugins: get('plugin'),
    46.   };
    47. }

    Plugin类

    从上面代码可以看到，在init阶段获取所有的插件时，实例化Plugin类

    1. export class Plugin {
    2.  constructor(opts: IOpts) {
    3.   this.type = opts.type;
    4.   // 将文件路径转换为兼容 window 的路径
    5.   this.path = winPath(opts.path);
    6.   this.cwd = opts.cwd;
    7.   // 检验路径是否存在
    8.   assert(
    9.     existsSync(this.path),
    10.     `Invalid ${this.type} ${this.path}, it's not exists.`,
    11.   );
    13.   let pkg = null;
    14.   let isPkgEntry = false;
    15.   // 查找最近的 package.json 文件
    16.   const pkgJSONPath = pkgUp.pkgUpSync({ cwd: this.path })!;
    17.   if (pkgJSONPath) {
    18.     // 加载插件package.json文件
    19.     pkg = require(pkgJSONPath);
    20.     // package.json入口文件是否一致
    21.     isPkgEntry =
    22.       winPath(join(dirname(pkgJSONPath), pkg.main || 'index.js')) ===
    23.       winPath(this.path);
    24.   }
    25.   this.id = this.getId({ pkg, isPkgEntry, pkgJSONPath });
    26.   this.key = this.getKey({ pkg, isPkgEntry });
    27.   this.apply = () => {
    28.     // 注册require加载器
    29.     register.register({
    30.       implementor: esbuild,
    31.     });
    32.     register.clearFiles();
    33.     let ret;
    34.     try {
    35.       // 加载插件代码
    36.       ret = require(this.path);
    37.     } catch (e: any) {
    38.       throw new Error(
    39.         `Register ${this.type} ${this.path} failed, since ${e.message}`,
    40.       );
    41.     }
    42.     // 删除require文件缓存
    43.     for (const file of register.getFiles()) {
    44.       delete require.cache[file];
    45.     }
    46.     register.restore();
    47.     // 根据插件打包后的格式进行返回
    48.     return ret.__esModule ? ret.default : ret;
    49.   };
    50. }
    51. }