扩展 NX 生成组件答案

【问题标题】：Extending NX generate component扩展 NX 生成组件
【发布时间】：2021-09-08 07:52:31
【问题描述】：

在我的 Monorepo 中，我使用了两种类型的组件。

是应用程序的标准组件，nx g c foo 在这里可以正常工作。
是库的库组件。在这里，我专门使用辅助入口点。所以一个组件总是有一个 index.ts、一个 public_api.ts、一个 bar.module.ts 和一个 package.json 文件。

我的问题是，如何扩展nx g c foo 的标准功能，以便它自动创建这些文件？

【问题讨论】：

【解决方案1】：

您可能想编写自己的原理图集。
请检查documentation、some nice articles和sources。
基本上，您从新组件原理图中扩展的代码将如下所示：

import { chain, externalSchematic, Rule } from '@angular-devkit/schematics';

export default function(schema: any): Rule {
    // add your custom code here

    return chain([
        externalSchematic('@nrwl/schematics', 'module', {
          ...module options
        }),
        externalSchematic('@nrwl/schematics', 'component', {
          ...component options
        }),

        // and here
    ]);
}

更新

使用 nx 生成器 API 编写的相同：

import { wrapAngularDevkitSchematic } from '@nrwl/devkit/ngcli-adapter';
import {
  Tree,
  formatFiles,
  generateFiles,
  joinPathFragments,
  names,
} from '@nrwl/devkit';
// this is your custom generator schema
import { Schema } from './models/schema.model';

export default async function (tree: Tree, schema: Schema) {
  const moduleGenerator = wrapAngularDevkitSchematic(
    '@schematics/angular',
    'module'
  );
  const componentGenerator = wrapAngularDevkitSchematic(
    '@schematics/angular',
    'component'
  );

  // it will create a custom module for you
  await moduleGenerator(tree, {
    name: ...module name,
    project: ...project to add module,
    path: ...path to add module file,
  });

  // it will create a custom component for you
  await componentGenerator(tree, {
    name: ...your name,
    project: ...project to add component,
  });

  // it's a branch where you can add your package.json and index.ts
  // you should create template files for them in ./files folder
  generateFiles(
    tree, // the virtual file system
    joinPathFragments(__dirname, './files'), // path to the file templates
    joinPathFragments('libs/'), // destination path of the files
    {
      ...schema,
      ...names(schema.name),
      tmpl: '',
    } // config object to replace variable in file templates
  );


  return tree;
}

查看他们的tests 了解更多示例。

【讨论】：

谢谢回答。只是为了澄清。您的解决方案仅适用于角度示意图，对吗？我可能会误解 nx，但我认为 nx 可以让我编写可以在项目的任何地方使用的原理图。我不确定，但我认为这就是 @nrwl/nx-plugins 的用途。
查看此链接nx.dev/latest/angular/generators/using-schematics。不，角度示意图（如 nx 生成器）只是代码生成工具，因此它适用于任何基于 js/ts 的项目。但是，是的，nx 插件的 API 略有不同。更新了答案
非常感谢您的出色回答。我能够解决我的问题，并且总体上更好地理解了整个主题。
发布付费文章的链接？这是否允许？
@code 我相信当我发布它时它不在付费墙之下。删除了链接。