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

文章图片
最底层主要依赖@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脚本等提升了开发效率。资源复用和资源/项目升级统称为文件处理，这部分借用了angular里的schematics功能来完成。在这部分还讲了什么是schematics以及它在cli里做了什么。最后特别感谢同事波哥，给了我非常多的指导和帮助！
作者简介
扑扑香， 2016年毕业，网易严选业务研发部前端开发，先后参与过企业邮、线下店、数据产品等多个项目开发，目前致力于效率工具开发。