从 Angular 转到 React，网易严选的前端工程化实践

作者 | 扑扑香 苞藓控制技术项目组 后端日益发展，从最初的 HTML、CSS、JavaScript 五大基础，到后来的 jQuery、Backbone、AngularJS，再到现在的 Angular、React、Vue 五大框架流行，控制技术的重构既增添了更多的可能，也增添了许多难题。比如：项目组怎样高工作效率合作、工程项目怎样标准化保护、标识符怎样制度化等等。后端产业化的出现，就是为了化解那些日益严重的难题。它意在制订制度化化的后端组织工作流，并制度化标准化工程项目的模组化合作开发和后端天然资源，让标识符的保护和互相协同更为容易更为方便方便快捷。

今年他们项目组由 Angular 控制技术栈变为 React 控制技术栈，在那个大背景下，他们亟需两套健全的产业化计划来协助控制技术栈破冰。在透过确定最终目标、表述制度化、控制技术调研、合作开发实现等一连串关键步骤之后，制定了两套健全的产业化计划。它协助化解合作开发业务流程中的难题，让合作开发更为著眼业务本身，提高整个控制系统生产工作效率。

做为两个产业化计划，最终的最终目标是尽量化解工程项目开发周期里碰到的难题，比如：

制度化保障

每个项目组单厢根据课堂教学实战经验，总结出两套自己的制度化（工程项目制度化和业务流程制度化）。让这两套制度化在破冰到实际的合作开发中时，除了人为的束缚，更多的如果是透过辅助工具束缚。产业化就是把项目组的实战经验结晶到钢架和合作开发模块中，让新工程项目或新成员能F83E43Se那些实战经验。

增效

两个好的产业化计划，是能提升合作开发工作效率的，那个增效包括调用工程项目，完整工程项目的 dev 环境，数据 mock，build 装箱等一连串业务流程，更要让工程项目“构筑 – 合作开发 – 部署”更方便快捷高工作效率，也要方便方便快捷工程项目的后期保护和插值。

减少物力

在合作开发过程中可能会碰到许多多次重复物力的组织工作。比如 A、B 两个控制系统有两个相似的条目页，那个条目页不能做为模块释放出来，但是又在数处能加进，该些天然资源（标识符模版）F83E43Se亟需两个中间传播方式来顺利完成。倘若天然资源 / 工程项目须要升级换代了，大多情况是天然资源合作开发人员出两个升级换代文件格式，然后升级换代的人按照文件格式一点一点修改。这是很多次重复的一份组织工作，因为倘若你手上有六个工程项目，你就须要把相同的事情做一千遍，这一步多次重复的组织工作他们希望能透过辅助工具来顺利完成。

同时，他们的产业化计划如果符合以下四个特点：

渐进式式（控制技术演化能力）易于插值

扩展性（可伸缩、可插拔）易于部门共建

易用性（贴合实际）易破冰

数据统计与分析

基于以上的最终目标，下面来看一下整个产业化的计划设计。

首先，介绍整个计划的架构图：

能看到整个架构图分为四层：

最底层依赖了制度化、webpack、schematics、node、eslint，它是上次架构的基石。

制度化这里包括了工程项目制度化和业务流程制度化，是整套计划须要遵守的约定；因为这套制度化是根据大量的实际业务总结出来的，所以它是贴合业务场景，便于整体计划破冰的。

schematics 引入主要是为了化解上面说到的天然资源相关的难题，后面会详细讲到。

这一层主要是对上层须要实现的功能做两个划分，然后透过插件的形式实现。比如：

将一连串模版释放出来做为两个集合，然后将工程项目调用时须要做的模版选择和模版处理放到 init 插件中顺利完成，不同项目组能根据制度化自表述插件；

合作开发编译阶段须要的 webpack 和 server、build 脚本放在 @sharkr/scripts 插件中顺利完成，不同项目组能根据制度化自表述插件；

前面说到的天然资源F83E43Se和天然资源升级换代难题，统称为文件处理相关，@sharkr/schematics-cli 插件提供那个能力；

@sharkr/eslint-config-react 插件提供 eslint 检查；

还有一部分公共能力封装成 util 插件，方便方便快捷共享。

这种插件的方式能使辅助工具具有很强的扩展性，在跟其他项目组共建时，能很方便方便快捷的做许多自表述，但是又符合标准化的制度化。

第三层是标准化命令层，这一层做的事情就是，最终对用户暴露两个标准化的辅助工具 @sharkr/cli ，在 cli 里去制度化常用的许多命令，当然那些命令的具体实现都是调用下一层的插件。那些命令会应加进工程项目合作开发的开发周期中去。

在这一层中会添加埋点，用于收集命令、项目、使用包等相关情况，以便做数据的统计与分析，了解实际破冰情况，也为未来插值版本提供有效参考。

工程项目开发周期，就是指工程项目从调用，到合作开发（或后期插值），再到 CICD 的这么两个周期。能看到下一层的命令大多都能对应到工程项目开发周期中，比如：

init 顺利完成工程项目调用

dev 能使合作开发人员快速的进入合作开发

add 能给工程项目增加两个天然资源

generate 能执行天然资源里表述的命令

update 协助快速升级换代天然资源

lint 编码制度化校验

test 对合作开发过程中的标识符做两个测试

build 在 CI 阶段能协助顺利完成编译装箱

透过这整个架构能看到，他们的辅助工具能介入到工程项目开发周期里的所有环节，那么那些环节有的许多难题和痛点，也能透过辅助工具去化解。下面将会从工程项目开发周期的角度讲解一下他们产业化的两个具体计划。

首先，在工程项目调用过程中须要化解的两个难题就是：协助制度化破冰。

把规范分为工程项目制度化和业务流程制度化，业务流程制度化上面也介绍了，透过辅助工具做了两个束缚，那么工程项目制度化怎么在调用的时候破冰呢？

他们的做法是，将该些制度化破冰到模版当中，用户透过 @sharkr/cli 去 init 项目，选择合适的模版，init 插件顺利完成模版处理，然后就调用了两个符合制度化的工程项目。

这里提到选择合适模版，init 插件顺利完成模版处理，那 init 插件是怎么做的呢？

每个项目组都会有许多常用的业务场景，比如他们 B 端，会保护好几个模版，纯 web 的、带 node server 的、应用于微应用的，那么这一连串模版做为两个集合，配套的会出两个相应的 init 插件，那个插件能顺利完成这系列模版的调用处理。

执行 init 命令时，cli 调用对应的 init 插件，用户根据提示输入工程项目相关配置项，init 插件根据配置项处理模版。

倘若说其他项目组也有自己的模版，那么同样的，他们也能根据制度化提供模版配套的 init 插件供 cli 调用，方便方便快捷共建。

这是插件的两个优势，能方便方便快捷扩展自表述的部分，但是它也增添了两个小难题。该些插件不是很稳定，可能经常须要更新，它的频繁更新会给用户增添影响。这就须要有两个较好的插件更新机制，方便方便快捷插值。

先来看一下最初采用的插件更新机制，如下图：

用户执行 sr init myapp，调用 @sharkr/cli

@sharkr/cli 检查 init 插件版本

发现版本不是最新的，提示用户 update @sharkr/cli

用户全局 update @sharkr/cli

再次执行 sr init myapp, 调用 @sharkr/cli

@sharkr/cli 调用最新的 init 处理

这种方式须要用户经常手动更新，不是很友好，所以在后来计划设计时，改用了 npx 的方式调用 init 插件。

npx 是 npm5.2 版本中新增的命令，它能临时下载两个模块并且运行它，运行之后再删除那个模块。

用户执行 sr init myapp，调用 @sharkr/cli

@sharkr/cli 使用 npx 调用最新的 init 插件处理

透过计划二，能看到使用 npx 的方式调用插件，能使用户在任何时候使用 init 命令都能调用最新的 init 插件顺利完成工程项目调用。

说完了工程项目调用，再来看一下合作开发 / 插值过程中会碰到哪些难题。

开始工程项目合作开发碰到的第两个难题就是 dev 环境。须要 webpack 配置编译标识符、须要两个本地 server、须要两个数据转发、须要 eslint 配置制度化编码等。

这一部分能透过 @sharkr/scripts 提供 webpack 配置和 server 脚本，在模版里集成调用，用 koa 起两个本地服务，koa 中间件顺利完成转发等。@sharkr/eslint-config-react 表述编码制度化。在那个环节制度化了业务流程和配置，有效的保障工程项目质量。

有了一个完整的 dev 环境，再来看一下前面说到的天然资源F83E43Se和天然资源 / 工程项目升级换代。

天然资源F83E43Se

简单把天然资源分为两类，一类是有固定输入输出，可释放出来的，比如时间控件，下拉条目等；还有一类是无固定输入输出，不可释放出来，但是又具有某些共性的，比如 B 端常见的条目页、详情页，这一部分天然资源没有两个很好的F83E43Se方式。

对于第一类天然资源，能采用封装模块的形式顺利完成天然资源共享：

对于第二类天然资源，以前的做法基本是 Ctrl+c、Ctrl+v 来F83E43Se，这种做法不够高级，还工作效率不高，所以在 cli 中提供了另外一种做法，那就是将标识符模版释放出来到两个 schematic 包里，然后透过 @sharkr/cli 来安装那个包，并且执行里面的 schematic。

天然资源 / 工程项目升级换代

同样的，倘若工程项目或者是天然资源须要升级换代，就须要在工程项目中升级换代依赖，可能还须要修改配置、甚至调整目录结构、修改 api 调用等。这种升级以前的做法是，出一份升级换代文件格式，升级换代者按照文件格式一点一点修改工程项目顺利完成升级换代。倘若有几六个工程项目，就须要几六个人做相同的事几一千遍，这无疑是两个大的物力消耗，做为两个增效辅助工具，就是须要将该些多次重复的组织工作透过标识符完成。

把升级换代文件格式里做的事情编写成 schematic 包

透过 @sharkr/cli 来安装那个包，并且执行里面的 schematic

这么一看，好像很简单，不管是天然资源F83E43Se，还是工程项目升级换代，都写成 schematic 包就好了，那么 schematic 到底是什么呢？

简介

schematics 是 ngCli 项目组合作开发的两个强大和通用的组织工作业务流程辅助工具，合作开发人员能将变换应用于项目中，比如：创建新模块、添加配置项、修改现有工程项目，或者更新你的标识符来修复更新依赖时增添的 break change。

原理

schematics 如它名字一样，能理解为两个描述了具体操作的原理图。

schematics 的输入是两个树，包含两个基础区域（一组已经存在的文件）和两个临时区域（要应用于基础区域的更改条目）），schemtics 描述了对 Tree 的修改，并将那些修改合并到临时区域的更改列表中，再往外输出两个新的 Tree。

在整个操作完结，并得到确认后，链条中所有描述的修改才会真正被应用。

更多 schematics 知识：

https://angular.io/guide/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 阶段做了什么。

该些跟 dev 环境类似，也须要提供 webpack 配置、build 脚本、还束缚了 build 装箱后的目录制度化、配置部署相关文件。

透过介绍以上的许多计划设计，能发现这套辅助工具能让合作开发更著眼业务本身，调用工程项目之后就能直接进入合作开发；多次重复的操作能透过 schematics 顺利完成，省去多次重复的物力成本；工程项目 / 天然资源升级换代能更为快速推进；制度化和文件格式结晶到辅助工具中供使用，非常有利于制度化的遵守。

接下来长远的规划将会从以下两点展开：

与天然资源平台结合。目前放在 schematics 包里的天然资源没有两个很好的展示平台，后续将会对接物料平台，让天然资源更容易被使用。

vscode 可视化扩展能力。为了让合作开发在合作开发过程中更为方便快捷高工作效率，后续会结合 vscode 的插件能力，让添加天然资源更容易。

本篇分享主要从四个方面对产业化课堂教学做了两个阐述：

合作开发制度化的破冰依赖模版收敛工程项目制度化，cli 辅助工具收敛业务流程制度化的方式，并在调用工程项目时将模版应用于实际工程项目场景。

cli 工具的扩展依赖于插件式，对于自表述的部分提供相应插件即可扩展，而插件的更新依赖 npx 调用的方式，化解用户须要频繁更新难题。

方便方便快捷快速调用工程项目，提供完整的 dev 环境和 build 脚本等提升了合作开发工作效率。

天然资源F83E43Se和天然资源 / 工程项目升级换代统称为文件处理，该些借用了 angular 里的 schematics 功能来顺利完成。在该些还讲了什么是 schematics 以及它在 cli 里做了什么。

最后特别感谢同事波哥，给了我非常多的指导和协助！

扑扑香，2016 年毕业，腾讯苞藓业务研发部后端合作开发，先后参与过企业邮、线下店、数据产品等多个工程项目合作开发，目前致力于工作效率辅助工具合作开发。