Angular ng --help 源码分析

先准备一下

随便找个空文件夹，运行 npm i @angular/cli@19.0.7

使用 npx --package=<pkg>[@<version>] -- <cmd> [args...] 运行 ng --help

C:\Users\zhouhuajian\Desktop\demo>npx --package=@angular/cli -- ng --help
ng

Commands:
  ng build [project]             Compiles an Angular application or library into an output directory named dist/ at the
                                 given output path.                                                         [aliases: b]
  ng generate                    Generates and/or modifies files based on a schematic.                      [aliases: g]
  ng new [name]                  Creates a new Angular workspace.                                           [aliases: n]
  ng serve [project]             Builds and serves your application, rebuilding on file changes.       [aliases: dev, s]
  ng version                     Outputs Angular CLI version.                                               [aliases: v]
  ... 省略其他命令

Options:
  --help     Shows a help message for this command in the console.                                             [boolean]
  --version  Show Angular CLI version.                                                                         [boolean]

For more information, see https://angular.dev/cli/.

这帮助文档怎么显示出来的呢？

探险开始 🙌🙌🙌

开始探险

node_modules\@angular\cli\package.json 的 bin 配置表示 ng 命令的入口是 ./bin/ng.js

{
  "name": "@angular/cli",
  "version": "19.0.7",
  "description": "CLI tool for Angular",
  "bin": {
    "ng": "./bin/ng.js"
  }
}  

ng.js 最核心的代码就一行

require('./bootstrap');

booststrap.js 最核心的代码也就一行

void import('../lib/init.js');

大约一百万行代码的左绕右绕…… 😅😅😅

重点来了

node_modules\@angular\cli\src\command-builder\command-runner.js

// 省略了不少的代码 
exports.runCommand = runCommand;
// 使用了 yargs 库，这个是命令行处理工具，自带 --help 功能
const yargs_1 = __importDefault(require("yargs"));
// 运行命令
async function runCommand(args, logger) {
  /*
  遍历所有命令模块，添加命令、别名、描述、处理器等
  例如：
  class BuildCommandModule {
    command = 'build [project]';
    describe = 'Compiles an Angular application or library into an output directory named dist/ at the given output path.';
  }
  class ServeCommandModule {
    command = 'serve [project]';
    describe = 'Builds and serves your application, rebuilding on file changes.';
  }
  */
  for (const CommandModule of await getCommandsToRegister(positional[0])) {
    localYargs = (0, command_1.addCommandModuleToYargs)(localYargs, CommandModule, context);
  }
  await localYargs
    // 帮助文档最前面的 ng 
    // 和 Commands 里面最前的 ng 这里设置
    .scriptName('ng') 
    // 帮助文档 Options 里面 --help 后面的那句话这里设置
    .help('help', 'Shows a help message for this command in the console.')
    // Commands Options Positionals 加点好看的颜色
    .updateStrings({
      'Commands:': color_1.colors.cyan('Commands:'),
      'Options:': color_1.colors.cyan('Options:'),
      'Positionals:': color_1.colors.cyan('Arguments:'),
    })
    // 帮助文档最后那句话，这里设置
    .epilogue('For more information, see https://angular.dev/cli/.\n')
    .parseAsync();
  return process.exitCode ?? 0;
}

还有 many many many 内容，等着少侠去探索，加油！💪💪💪

---

Fight with Huajianketang.