angular schametics 使用记录

什么是 schametics

Schematics是Angular团队发布的一个代码生成工具。它提供了API，可以操作文件并在Angular项目中添加新的依赖项，ng cli 创建模板就是用它。它也可以在非Angular项目中使用，本教程以从Angular项目为例。

使用步骤

安装 Schematics CLI

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

创建空白项目名称为 my-component

schematics blank --name=my-component

命令创建以下文件

λ schematics blank --name=my-component

CREATE my-component/package.json (569 bytes)

CREATE my-component/README.md (639 bytes)

CREATE my-component/tsconfig.json (656 bytes)

CREATE my-component/.gitignore (191 bytes)

CREATE my-component/.npmignore (64 bytes)

CREATE my-component/src/collection.json (231 bytes)

CREATE my-component/src/my-component/index.ts (318 bytes)

CREATE my-component/src/my-component/index_spec.ts (503 bytes)

√ Packages installed successfully.

重要文件介绍

package.json

就是npm的项目描述文件，主要可以处理依赖关系。其中一个属性

  "schematics": "./src/collection.json",

指明项目Schematic的配置文件collection.json的位置

src/collection.json

定义项目元数据，文件内容：

{

  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",

  "schematics": {

    "my-component": {

      "description": "自定义 component.",

      "factory": "./my-component/index#myComponent"

    }

  }

}

可以看到声明一个schematics叫my-component。

description : 描述命令
factory : 指向需要执行的方法。这个schematics将执行my-component目录下index.ts文件下的myComponent方法。

src/my-component/index_spec.ts

是测试文件，忽略。

src/my-component/index.ts

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

export function myComponent(_options: any): Rule {

  return (tree: Tree, _context: SchematicContext) => {

    return tree;

  };

}

Tree类：Schematics不对的文件系统执行任何直接操作。通过Tree将真实文件目录（项目中的代码文件）数据拷贝进一个树状结构里。然后对指定对树的操作。Tree有两个部分，一个是base（真实文件目录），一个是staging area（沙盒），变动都会发生在staging area，除非写入了base部分
Rule类：一个Rule是一个方法。它获取一个Tree，并返回经过改变的一个新的Tree。因此我们对Tree的操作也基本上在Rule中发生。所以可以说，一个Schematic就是一个Rule。

接下来对 src/my-component/index.ts文件简单修改创建一个文件

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

export function myComponent(_options: any): Rule {

  return (tree: Tree, _context: SchematicContext) => {

    //根据参数filename创建一个html文件，内容为 <h1>Hello, World</h1>

    tree.create(`${_options.filename}.html`, '<h1>Hello, World</h1>');

    return tree;

  };

}

这里需要输入参数filename指定文件名。为了防止使用时遗漏，应当做友好交互提示。在schematics声明时可以用scema指定。回到src/collection.json做如下修改：

{

  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",

  "schematics": {

    "my-component": {

      "description": "自定义 component.",

      "factory": "./my-component/index#myComponent",

      "schema": "./my-component/schema.json",

      "aliases":["nh"]

    }

  }

}

(这里顺便用aliases属性去了个别名为nh。ng generate component name能缩写成 ng g c name 就是用了别名。别名可以取多个。)

在my-component中添加声明"schema": "./my-component/schema.json"；

然后在对应目录添加schema.json文件，对参数进行声明。

{

    "$schema": "http://json-schema.org/schema",

    "id": "myAngularComponent",

    "title": "my-componemt的参数声明",

    "type": "object",

    "properties": {

        "filename": {

            "type": "string",

            "description": "文件名:",

            "x-prompt": "请输入文件名:"

        }

    },

    "required": ["filename"]

}

id：一个独一无二字符串

title：一个描述字符串

type：类型

properties：参数的属性，就是_options的声明。

required：指定properties中声明的那些属性为必须项。如果命令不给出将提供提示【x-prompt】，提示用户输入。

接下来编译一下项目，然后把当前schematics项目连接到全局上。

# 编译项目 将ts编译成js

npm run build

# 当前项目连接到全局 类似 npm install -g xxx 的效果，另外link一次就够了，以后改动不需要link。

npm link

过程如下:

λ npm run build

> my-component@0.0.0 build D:\WorkFile\wjz\my-component

> tsc -p tsconfig.json

λ npm link

npm WARN my-component@0.0.0 No repository field.

up to date in 0.773s

C:\Users\xxx\AppData\Roaming\npm\node_modules\my-component -> D:\WorkFile\wjz\my-component

完成 !!!

angualr项目中使用自定义的schematics

（假设你已经安装 ng cli 不复述）

# 创建ng项目 名称 ng-test

ng new ng-test

# 进入目录

cd ng-test

#安装一下依赖

npm install

# 重点来了 将自己的my-component schematics加入

npm link my-component

# 输出类似如下内容 说明成功link

# D:\WorkFile\wjz\templ\ng-test\node_modules\my-component ->  C:\Users\xxx\AppData\Roaming\npm\node_modules\my-component -> D:\WorkFile\wjz\my-component

# 创建自定组件

ng g my-component:nh

#输出如下，由于generate 没有给出必须参数filename,提示需要输入文件名,就是./my-component/schema.json中的所声明

? 请输入文件名: test-schematics

CREATE test-schematics.html (21 bytes)

#由于未指定位置 test-schematics.html创建在ng项目的更目录下。

简单高级玩法

实践开发过程中，我并不会自己写模本。而是在原有的angular模板上改造成自己需要的。回调my-component项目中。

安装 @schematics/angular

这是个 angualr 组件模板，ng cli使用的。

npm i @schematics/angular --save-dev

在项目的目录node_modules@schematics\angular下可以看到模板。现在将component目录和所依赖的third_party目录，utility目录拷贝到src目录下，并将component修改为custom-component或你需要的名称。

ls

collection.json

custom-component/

my-component/

third_party/

utility/

修改 collection.json 文件

{

  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",

  "schematics": {

    "my-component": {

      "description": "自定义 component.",

      "factory": "./my-component/index#myComponent",

      "schema": "./my-component/schema.json",

      "aliases":["nh"]

    },

    "custom-component": {

      "description": "custom angualr component.",

      "factory": "./custom-component",

      "schema": "./custom-component/schema.json",

      "aliases":["cc"]

    }

  }

}

这里新增了一个 schematics 叫 custom-component，别名为cc。

接下里在 ./src/custom-component目录下看到files/__name@dasherize@if-flat__目录,里头有四个文件，分别是：

name@dasherize.type@dasherize.style.template ：样式文件模板
name@dasherize.type@dasherize.html.template ：html文件模板
name@dasherize.type@dasherize.spec.ts.template ：spec文件模板
name@dasherize.type@dasherize.ts.template ：组件ts文件模板

只需要按自己的需求修改模板文件即可。

其他组件雷同。

现在回到先前创建的ng项目测试

#进入 ng项目的app目录，因为创建ng组件需要NgModel

cd src\app\

#创建自定义组件 custom-component 创建一个名为custom的组件

ng g my-component:cc custom

#输出如下内容 创建成功

CREATE src/app/custom/custom.component.html (21 bytes)

CREATE src/app/custom/custom.component.spec.ts (628 bytes)

CREATE src/app/custom/custom.component.ts (275 bytes)

CREATE src/app/custom/custom.component.css (0 bytes)

UPDATE src/app/app.module.ts (396 bytes)

巴特西