InfoQ科技从 Angular转到 React，网易严选的前端工程化实践( 四 )

更多 schematics 知识：
优势
和常规的 JavaScript 脚本工具相比，它的优势在哪呢？

开发便捷

提供了丰富而强大的通用能力，帮助开发者快速开发：在 code generate 领域，可以通过使用其模板能力，构建各种类型的动态场景代码模板，快速生成代码。同时还提供了丰富的 util ，提供包括 ast、git 初始化、TslintFixTask tslint 处理等能力。

易于调试

schmatics 由于其虚拟树的设计，在开发阶段支持干运行，并不会对文件系统执行任何直接操作，方便开发者在项目中进行调试，安全无污染。

可扩展性和可重用性

从其原理可以看出， schmatics 的整体设计，遵循了函数式范式， schematics 不会产生副作用（副作用只会被记录在缓存区中），具备原子性。 schematics 可以自由 Compose 成新的 schematics 。

测试友好

schmatics 提供了完备的测试支持库，测试用例书写没有障碍。
schematics 封装
既然 schematics 处理文件很友好，而且刚好能解决文件处理问题，于是我们就引入了 schematics 完成文件处理，并对它做了一层封装。

本文插图

最底层主要依赖 @angular-devkit/schematics 和 @angular-devkit/core 提供 schematics 基础能力；
将公共能力提取到 @schematics/util 方便开发调用；
提供 schematics 开发模板，方便开发新建 schematics 包；封装 schematics 的 cli ，也就是说它也可以单独调用命令；
资源（通用资源、项目改造资源、模板升级资源等）会做一些整合，这些资源集合将作为物料维护在物料海，将来会跟我们正在开发的物料平台对接；
向上暴露所有的命令，最终在 @sharkr/cli 作为统一出口。

下面再来看下，开发和使用一个 schematics 包需要做点什么呢？

本文插图
首先，对于开发者来说，需要做以下三步：

根据 schematics 规范开发一个 schematics 包
定义配置项（可选）
定义 schema 命令

其次，对于用户来说，需要做以下三步：

使用 @sharkr/cli 调用 schematics 包
输入配置（可选）
完成项目修改

那么 @sharkr/cli 做了什么了？

@sharkr/cli 调用 @sharkr/schematics 插件
schematics 插件解析出自定义配置项，生成用户会话
根据用户会话拿到 option ，传入 option 调用 Rule 函数
修改文件放到暂存区
确认修改后更新物理文件

这里 Rule 函数是需要开发者实现的，任何你想写成文档的都能通过代码方式写在这个 Rule 函数里。
schematics 实践
下面来看一个实际的例子：前段时间我们的项目都需要完成服务上云，为了实现上云，需要调整下 CI 脚本，还要往项目里放一些环境配置文件，涉及到多处文件修改和增加，所以我们写了一个 @sharkr/ng-cloud-add 的 schematics 包达到快速改造项目的目的。以下是效果：

本文插图
核心代码写起来跟写文档类似：

本文插图
以上就讲完了在开发 / 迭代过程中遇到的问题和解决方案，最后再看一下 CICD 阶段做了什么。