我最近开始使用https://nx.dev/来重组具有多个React前端和Redux状态管理的现有Monorepo。
nx提供了使用@nrwl/react:redux
示意图(如nx g @nrwl/react:redux <sliceName>
)开箱即用创建新的redux slice的功能。这很棒!但是,用于创建新文件的模板不符合我的需求(例如,我不使用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
})
]);
}
任何人都可以告诉我如何从这里继续以使自定义原理图使用我自己的模板文件吗?
谢谢!
答案 0 :(得分:0)
您可以将模板文件放在目录中,然后加载它们,然后将其复制到目标位置。
目录结构:
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进行编译/更改。