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)