简单入门 Angular 的 schematics

1. 前置条件

npm install -g @angular-devkit/schematics-cli

2. 创建自定义schematics

创建一个空的 schematics，名称 ： see

schematics blank --name=see # name 是必须给定的选项

项目结构如下：

=>see
   =>src
      =>see
            index.ts
            schema.ts
            schema.json
      collection.json
  .gitignore
  .npmignore
  package.json
  README.md
  tsconfig.json

默认的文件内容

src/see/index.ts

import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';

// You don't have to export the function as default. You can also have more than one rule factory
// per file.
export function ncSee(options: any): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    return tree;
  };
}

src/collection.json

{
  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
  "schematics": {
    "nc-see": {
      "description": "A blank schematic.",
      "factory": "./see"
    }
  }
}

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "tsconfig",
    "lib": ["es2017", "dom"],
    "declaration": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "noEmitOnError": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "noUnusedParameters": false,
    "noUnusedLocals": false,
    "rootDir": "src/",
    "skipDefaultLibCheck": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strictNullChecks": true,
    "target": "es6",
    "types": ["jasmine", "node"]
  },
  "include": ["src/**/*"],
  "exclude": ["src/*/files/**/*"]
}

3. 新增 schema 选项

结构如下

=>nz-table
      =>index.ts
      =>schema.ts
      =>schema.json

如：ng-zorro 的 nz-table 示例如下：

src/collection.json

{
  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
  "schematics": {
    "see": {
      "description": "A blank schematic.",
      "factory": "./nc-see/index#ncSee"
    },
    "see-table": {
      "description": "nz-table schematic.",
      "factory": "./nz-table",
      "schema": "./nz-table/schema.json"
    },
    "see-form": {
      "description": "nz-form schematic.",
      "factory": "./nz-form/index#ncSee",
      "schema": "./nz-form/schema.json"
    }
  }
}

schema 选项说明

• description: schema 提示
• factory: schem 处理
• schema : schema 配置文件

src/nz-table/index.ts

import { chain, mergeWith } from "@angular-devkit/schematics";
import {
  apply,
  filter,
  move,
  Rule,
  template,
  url,
  branchAndMerge
} from "@angular-devkit/schematics";
import { normalize } from "@angular-devkit/core";
import { dasherize, classify } from "@angular-devkit/core/src/utils/strings";
import { schemaOptions } from "./schema";

const stringUtils = { dasherize, classify };

function filterTemplates(options: schemaOptions): Rule {
  if (!options.service) {
    return filter(
      path =>
        !path.match(/\.service\.ts$/) &&
        !path.match(/-item\.ts$/) &&
        !path.match(/\.bak$/)
    );
  }
  return filter(path => !path.match(/\.bak$/));
}

export default function(options: schemaOptions): Rule {
  // TODO: Validate options and throw SchematicsException if validation fails
  options.path = options.path ? normalize(options.path) : options.path;

  const templateSource = apply(url("./files"), [
    filterTemplates(options),
    template({
      ...stringUtils,
      ...options
    }),
    move("src/app/see-table")
  ]);

  return chain([branchAndMerge(chain([mergeWith(templateSource)]))]);
}

src/nz-table/schema.ts

export interface schemaOptions {
  name: string;
  appRoot: string;
  path: string;
  sourceDir: string;
  service: boolean;
}

src/nz-table/schema.ts

{
  "$schema": "http://json-schema.org/schema",
  "id": "see-table",
  "title": "see-table",
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "default": "name"
    },
    "path": {
      "type": "string",
      "default": "app"
    },
    "appRoot": {
      "type": "string"
    },
    "sourceDir": {
      "type": "string",
      "default": "src/app"
    },
    "service": {
      "type": "boolean",
      "default": false,
      "description": "Flag to indicate whether service should be generated.",
      "alias": "vgs"
    }
  }
}

4. 编译自下定义 schema

npm run build
npm link

5. 使用自定义 schema

 schematics see:see-form --name=test-see-table --service

6. 在 Angular CLI 项目中使用自定义 schema

ng new ng6 --skip-install
yarn --registry https://registry.npm.taobao.org
npm link ../see

然后

 ng g see:see-form --service --name=see-form-schema

天之骄子 2018。8。25 深圳

待续。。。

Angular 修仙QQ群号【648681235