江苏龙网

  1. 首页 > 资讯 > 科技 > >

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


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

  • 开发便捷
提供了丰富而强大的通用能力 ， 帮助开发者快速开发：在 code generate 领域 ， 可以通过使用其模板能力 ， 构建各种类型的动态场景代码模板 ， 快速生成代码 。 同时还提供了丰富的 util ， 提供包括 ast、git 初始化、TslintFixTask tslint 处理等能力 。
  • 易于调试
schmatics 由于其虚拟树的设计 ， 在开发阶段支持干运行 ， 并不会对文件系统执行任何直接操作 ， 方便开发者在项目中进行调试 ， 安全无污染 。
  • 可扩展性和可重用性
从其原理可以看出 ， schmatics 的整体设计 ， 遵循了函数式范式 ， schematics 不会产生副作用（副作用只会被记录在缓存区中） ， 具备原子性 。 schematics 可以自由 Compose 成新的 schematics 。
  • 测试友好

schmatics 提供了完备的测试支持库 ， 测试用例书写没有障碍 。
schematics 封装
既然 schematics 处理文件很友好 ， 而且刚好能解决文件处理问题 ， 于是我们就引入了 schematics 完成文件处理 ， 并对它做了一层封装 。
InfoQ科技|从 Angular转到 React，网易严选的前端工程化实践
本文插图

  • 最底层主要依赖 @angular-devkit/schematics 和 @angular-devkit/core 提供 schematics 基础能力；
  • 将公共能力提取到 @schematics/util 方便开发调用；
  • 提供 schematics 开发模板 ， 方便开发新建 schematics 包；封装 schematics 的 cli ， 也就是说它也可以单独调用命令；
  • 资源（通用资源、项目改造资源、模板升级资源等）会做一些整合 ， 这些资源集合将作为物料维护在物料海 ， 将来会跟我们正在开发的物料平台对接；
  • 向上暴露所有的命令 ， 最终在 @sharkr/cli 作为统一出口 。
下面再来看下 ， 开发和使用一个 schematics 包需要做点什么呢？
InfoQ科技|从 Angular转到 React，网易严选的前端工程化实践
本文插图

首先 ， 对于开发者来说 ， 需要做以下三步：
  • 根据 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 包达到快速改造项目的目的 。 以下是效果：
InfoQ科技|从 Angular转到 React，网易严选的前端工程化实践
本文插图

核心代码写起来跟写文档类似：
InfoQ科技|从 Angular转到 React，网易严选的前端工程化实践
本文插图

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


推荐阅读


上一篇：IT168|红外热成像三防手机 遨游A9上手体验

下一篇：数评时代|双11果然有好价，索尼三星两款65英寸电视降价