如何扩展NX generate component命令自动生成库组件所需文件

核心思路是基于Nx的自定义生成器能力，封装原生组件生成器，根据目标项目类型自动匹配生成逻辑，无需修改原有使用习惯。

操作步骤 #

1. 创建本地自定义生成器插件 #

在Monorepo根目录执行以下命令，生成专属的本地生成器存储库：

nx g @nx/plugin:plugin workspace-generators --directory=tools/generators

再为该插件新增component生成器入口：

nx g @nx/plugin:generator component --project=workspace-generators

2. 编写分支逻辑 #

编辑生成器主文件tools/generators/workspace-generators/src/generators/component/generator.ts，实现两类组件的分支生成逻辑：

• 若目标为应用类型项目：直接调用原生@nx/angular:component生成器输出标准组件
• 若目标为库类型项目：先调用原生生成器生成基础组件文件，再额外生成次级入口点所需的4个文件
  核心代码示例：

import { Tree, generateFiles, joinPathFragments, readProjectConfiguration } from '@nx/devkit';
import { componentGenerator as ngComponentGenerator } from '@nx/angular';
import type { ComponentGeneratorSchema } from './schema';

export async function componentGenerator(tree: Tree, options: ComponentGeneratorSchema) {
  // 先执行原生组件生成逻辑
  await ngComponentGenerator(tree, options);
  
  // 校验目标是否为库项目，非库直接返回
  const projectConfig = readProjectConfiguration(tree, options.project);
  if (projectConfig.projectType !== 'library') return;

  // 生成次级入口点额外文件
  generateFiles(
    tree,
    joinPathFragments(__dirname, './files'), // 模板文件存放路径
    joinPathFragments(projectConfig.sourceRoot, options.name), // 输出路径
    { ...options, tmpl: '' } // 模板变量替换
  );
}

3. 新增模板文件 #

在生成器目录下新建files文件夹，存入4个模板文件：

• index.ts.template：

  export * from './public_api';
  

• public_api.ts.template：

  export * from './lib/<%= name %>.component';
  export * from './<%= name %>.module';
  

• <%= name %>.module.ts.template：

  import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { <%= classify(name) %>Component } from './lib/<%= name %>.component';
  
  @NgModule({
    declarations: [<%= classify(name) %>Component],
    imports: [CommonModule],
    exports: [<%= classify(name) %>Component],
  })
  export class <%= classify(name) %>Module {}
  

• package.json.template：

  {
    "name": "@your-org/<library-name>/<%= name %>",
    "main": "index.ts",
    "typings": "index.ts"
  }
  

  注意将@your-org/<library-name>替换为你实际的库包名前缀。

4. 配置别名兼容原有使用习惯 #

修改根目录nx.json，将默认的component生成器指向你自定义的实现，执行nx g c foo时会自动触发自定义逻辑：

{
  "generators": {
    "@nx/angular:component": {
      "implementation": "./tools/generators/workspace-generators/src/generators/component/generator.ts"
    }
  }
}

可选优化 #

你可以在生成器的schema.json中新增可选参数，比如--secondary-entry，只有加该参数时才生成次级入口点文件，适配同个库下不同组件的生成需求。

内容的提问来源于stack exchange，提问作者Harrys Kavan