写在前面
Schematics 是前端开发工作流工具，例如：创建一个组件、变更配置项至当前项目。并且不限制任何语言环境；虽然如此，但 Schematics 目前依然只能依赖 Angular Cli 来运行相应的命令行。
本文是在重构 ng-alain schematics 时阅读 @angular-devkit 源码的一些记录；而关于 Schematics 的运用在知乎上有好几篇不错的文章，我将尽可能跳开一些不必要的重复性工作，建议阅读本文时可以同下列文章一起阅读。
指令类型
Schematics 一共包含四个指令：
-
add添加一个 Library 至项目 -
new创建一个新 Angular 项目 -
generate基于 Schematics 创建或修改文件 -
update更新应用程序或依赖项
其实除了 add 会事先执行一次 npm i （取决于 angular.json 的 cli/packageManager 配置值，默认：npm）指令以外，其他指令实际上都是基于 Schematics 创建或修改文件。
generate 指令会更纯粹，需要你手动指定 Schematic 名称，例如：ng g class <ClassName>。其他三个指令是对其进一步简化，像 ng add 实际相当于 ng g ng-add 这里的 ng-add 是固定名称，若你希望创建一个支持 ng add 那么你就必须有一个 ng-add 的 Schematic。
执行原理
Schematics 执行核心的本质就是在维护一个非常大的 Observable 数据流，这里的数据就是文件树。
核心的主轴是执行一个 Schematics 时会在开始时构建一个虚拟文件系统 virtual-fs 就像 Rxjs 的 Observable，后续的操作符都是对文件系统的变更动作，最后将虚拟文件系统的内容影射至物理文件中。
一个 Schematics 可以包含多个不同的指令，例如默认 Angular Schematics 有非常多我们熟悉的 module、component 等，而管理这些指令是通过 collection.json 配置项。
Schematics 创建完虚拟文件系统环境后，紧跟着依 collection.json 构建 Collection 对象，再根据指令中的名称创建 Schematic 对象；并且调用并运行 Schematic Name 所对应目录名下 index.ts 文件，例如一个 Schematic 完整的代码结构：
function rule1() {
return (host: Tree, context: SchematicContext) => {
// doing
};
}
export default function(options: ApplicationOptions): Rule {
return (host: Tree, context: SchematicContext) => {
return chain([ rule1(), rule1() ]);
}
}
最终返回一个 Rule 类型，其本质是：
(tree: Tree, context: SchematicContext) => Tree | Observable<Tree> | Rule | void
若返回的是一个 Observable 类型时意味者这里的空间变得无限大：
function rule1() {
return (host: Tree, context: SchematicContext) => {
return of(host);
};
}
比如构建自己的远程代码片断库。
任务器
Schematics 除了运行 Schematic 指令以外，还需要一些对项目进行额外操作，例如：安装Node依赖包、初始化 Git 等。其实运行 Schematic 指令本身也是一种任务。这些任务是通过 SchematicContext 进行管理。
例如我们希望在执行一个 Schematic 指令后调用一次 Node 依赖包的安装，只需要调用内置的 NodePackageInstallTask 任务：
(host: Tree, context: SchematicContext) => {
context.addTask(new NodePackageInstallTask());
}
Angular.json
angular.json 与 Schematic 有着非常密切的关系，大多数需要通过 angular.json 配置信息来获取目录路径、默认配置项等信息。特别是当编写 Schematic 时总是需要考虑多项目的情况，因此绝大多数都需要依赖 angular.json 来确认具体项目名及路径信息。
每一个 Schematic 指令都有相应的参数信息，这些参数信息也可以直接被映射在 angular.json 上面并当成默认参数值：
{
"schematics": {
"ng-alain:list": {
"spec": false
},
"@schematics/angular:component": {
"spec": false
}
}
}
通过 ng g ng-alain:module <name>（或 ng g component <name>）生成时将忽略测试文件；当然对于这些默认参数的转化都是 Schematics 内自动完成。
总结
以上是一些简单总结，Schematics 可玩性非常强，它是运行在一个 Node 容器内，因此可以使用当下所有 Node 类库。
而 Schematics 的操作除了文件以外，也会对文件内容进行修改，这一些也很有意思。像 ts 文件可以利用 typescript 类库来获取或调整 ts 文件内容某个变量名或值。而 html 文件可以利用 parse5 来解析并修改，绝大多数文件类型都可以找到相对应的现有类库来支持。
Schematics 只是 @angular-devkit 中的一小部分而已，还包括：Architect 用于改变 Angular cli 的运行机制，虽然本质上是在改变 Webpack 配置文件，但谁叫 Webpack 有着无限可能呢。
原先
@angular-devkit是作为一个独立的仓储位于 @angular/devkit，然而不久前被合并入@angular-cli里。
（完）
网友评论