如何更改现有nx架构的模板文件

Question

我最近开始使用https://nx.dev/来重组现有的具有多个react前端和redux状态管理的monorepo。

nx提供了使用@nrwl/react:redux模式创建新的redux切片的能力，比如：nx g @nrwl/react:redux <sliceName>。这太棒了！但是，用于创建新文件的模板不符合我的需要(例如，我不使用redux-thunk.)我想用我自己的模板。

我用nx g workspace-schematic redux-module创建了一个新的自定义原理图，并调整它以扩展@nrwl/react:redux，如下所示：

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

export default function(schema: any): Rule {
  return chain([
    externalSchematic('@nrwl/react', 'redux', {
      name: schema.name
    })
  ]);
}

有人能告诉我如何从这里开始使自定义原理图使用我自己的模板文件吗？

谢谢!

Answer 1

您可以在目录中拥有模板文件，加载它们，然后复制到目标目的地。

Dir结构：

Project_root
|- tools
   |- schematics
      |- your_schematics
         |- index.ts  
         |- templates
            |- __name@dasherize__.custom.ts

内容：

/* __name@dasherize__.custom.ts */

export class <%= classify(name) %>Custom {
    constructor () {}
}

/* index.ts */

import { chain, externalSchematic, Rule, url, apply, move, mergeWith, MergeStrategy, template, SchematicContext } from '@angular-devkit/schematics';
import { dasherize, classify } from '@angular-devkit/core/src/utils/strings';
import { normalize, strings } from '@angular-devkit/core';


export default function(schema: any): Rule {
  const libFileName = dasherize(schema.name);
  const projectDirectory = schema.directory
    ? normalize(schema.directory + '/' + libFileName)
    : libFileName;
  const projectRoot = normalize('libs/' + projectDirectory);

  return chain([
     externalSchematic('@nrwl/workspace', 'lib', schema),
     addCustomFileToLib(schema, projectRoot)
  ]);
}

function addCustomFileToLib(schema: any, projectRoot: string): Rule {
  const templateFiles = url("./templates");
  const newTree = apply(templateFiles, [
    move(projectRoot),
    template({
      ...strings,
      ...schema // pass the objects containing the properties & functions to be used in template file
    })
  ]);
  return mergeWith(newTree, MergeStrategy.Default);
}

注意:模板文件名(__name@dasherize__.custom.ts)是一个表达式，它将根据执行图表时从cli传递的名称arg进行编译/更改。