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

这一部分可以通过@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团队开发的一个强大和通用的工作流程工具，开发者可以将变换应用于项目中，例如：创建新组件、添加配置项、修改现有项目，或者更新你的代码来修复更新依赖时带来的breakchange 。
原理
schematics如它名字一样，可以理解为一个描述了具体操作的原理图。
schematics的输入是一个树，包含一个基础区域（一组已经存在的文件）和一个临时区域（要应用于基础区域的更改列表））， schemtics描述了对Tree的修改，并将这些修改合并到临时区域的更改列表中，再往外输出一个新的Tree 。
在整个操作完结，并得到确认后，链条中所有描述的修改才会真正被应用。
更多schematics知识：
优势
和常规的JavaScript脚本工具相比，它的优势在哪呢？
开发便捷提供了丰富而强大的通用能力，帮助开发者快速开发：在codegenerate领域，可以通过使用其模板能力，构建各种类型的动态场景代码模板，快速生成代码。同时还提供了丰富的util ，提供包括ast、git初始化、TslintFixTasktslint处理等能力。
易于调试schmatics由于其虚拟树的设计，在开发阶段支持干运行，并不会对文件系统执行任何直接操作，方便开发者在项目中进行调试，安全无污染。
可扩展性和可重用性从其原理可以看出， schmatics的整体设计，遵循了函数式范式， schematics不会产生副作用（副作用只会被记录在缓存区中），具备原子性。 schematics可以自由Compose成新的schematics 。
测试友好schmatics提供了完备的测试支持库，测试用例书写没有障碍。
schematics封装
既然schematics处理文件很友好，而且刚好能解决文件处理问题，于是我们就引入了schematics完成文件处理，并对它做了一层封装。