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

本文插图

用户执行 sr init myapp ，调用 @sharkr/cli
@sharkr/cli 使用 npx 调用最新的 init 插件处理

通过方案二，可以看到使用 npx 的方式调用插件，可以使用户在任何时候使用 init 命令都能调用最新的 init 插件完成项目初始化。
说完了项目初始化，再来看一下开发 / 迭代过程中会遇到哪些问题。
完成项目初始化进入开发阶段，这个阶段应该是关注业务本身、减少重复工作、高效快速的。
1、dev 环境
开始项目开发遇到的第一个问题就是 dev 环境。需要 webpack 配置编译代码、需要一个本地 server、需要一个数据转发、需要 eslint 配置规范编码等。
这一部分可以通过 @sharkr/scripts 提供 webpack 配置和 server 脚本，在模板里集成调用，用 koa 起一个本地服务， koa 中间件完成转发等。 @sharkr/eslint-config-react 定义编码规范。在这个环节规范了流程和配置，有效的保障项目质量。

有了一个完备的 dev 环境，再来看一下前面说到的资源复用和资源 / 项目升级。
2、资源复用和资源 / 项目升级
资源复用
简单把资源分为两类，一类是有固定输入输出，可抽离的，例如时间控件，下拉列表等；还有一类是无固定输入输出，不可抽离，但是又具有某些共性的，例如 B 端常见的列表页、详情页，这一部分资源没有一个很好的复用方式。
对于第一类资源，可以采用封装组件的形式完成资源共享：

本文插图

对于第二类资源，以前的做法基本是 Ctrl+c、Ctrl+v 来复用，这种做法不够高级，还效率不高，所以在 cli 中提供了另外一种做法，那就是将代码模板抽离到一个 schematic 包里，然后通过 @sharkr/cli 来安装这个包，并且执行里面的 schematic 。

本文插图

资源 / 项目升级

同样的，假如项目或者是资源需要升级，就需要在项目中升级依赖，可能还需要修改配置、甚至调整目录结构、修改 api 调用等。这种升级以前的做法是，出一份升级文档，升级者按照文档一步步修改项目完成升级。假如有几十个项目，就需要几十个人做相同的事几十遍，这无疑是一个大的人力消耗，作为一个提效工具，就是需要将这部分重复的工作通过代码完成。

本文插图

把升级文档里做的事情编写成 schematic 包
通过 @sharkr/cli 来安装这个包，并且执行里面的 schematic
这么一看，好像很简单，不管是资源复用，还是项目升级，都写成 schematic 包就好了，那么 schematic 到底是什么呢？
简介
schematics 是 ngCli 团队开发的一个强大和通用的工作流程工具，开发者可以将变换应用于项目中，例如：创建新组件、添加配置项、修改现有项目，或者更新你的代码来修复更新依赖时带来的 break change 。
原理
schematics 如它名字一样，可以理解为一个描述了具体操作的原理图。

schematics 的输入是一个树，包含一个基础区域（一组已经存在的文件）和一个临时区域（要应用于基础区域的更改列表））， schemtics 描述了对 Tree 的修改，并将这些修改合并到临时区域的更改列表中，再往外输出一个新的 Tree 。
在整个操作完结，并得到确认后，链条中所有描述的修改才会真正被应用。