总结

原理图是什么?

• 这里援用一个在 Angular 中的定义 原理图是一个基于模板的反对简单逻辑的代码生成器.

  A schematic is a template-based code generator that supports complex logic. It is a set of instructions for transforming a software project by generating or modifying code. Schematics are packaged into collections and installed with npm.
  https://angular.cn/guide/schematics

• 所以相比广义的脚手架来讲, 原理图也能够称为智能代码生成器

通用唬人图

个性

原子性

• Angular开发的原理图框架对文件的操作应用的是虚构文件系统, 所以对文件的任何解决都不会即时的反馈到我的项目中, 只有在所有操作完结, 没有异样时, 才会写入到代码中

通用性

• 尽管为 Angular 开发的原理图, 然而实现不局限于 Angular, 不局限于 前端, 甚至不局限语言
• 只有是文件, 皆可操作

可测试性

• 因为对文件的操作都在虚构文件系统中, 所以能够建设单元测试, 保障每一个原理图执行合乎预期

交互性

• 通过定义 JSON Schema 定义原理图传入字段, 能够设置在命令行中的提醒输出
• 反对 输出 , 单选 , 多选 , 判断 等不同输出形式

版本控制

• 并不是所有批改都间接失效, 保留在虚构文件系统中
• Angular在其中实现了一个相似 git 的简化零碎
• 单文件的批改 (非笼罩) 只有在 commit 时才会变更

• 非 主 tree中文件的批改只有在 merge 后才会失效

  能够通过 branch 创立另一个tree

性能

模板生成

• 也就是最传统的脚手架开发, 只须要调用两个办法就能实现

文件操作

• 能够对当前工作空间内的文件进行create,overwrite,rename,delete

  create在工作空间内创立文件
  overwrite 笼罩工作空间已有文件
  rename 重命名工作空间文件, 在这里门路就是名字, 因而重命名也能够用来挪动文件
  delete 删除工作空间内的文件

• 内置了文件操作 规定, 更不便的对文件解决

代码操作

• 当我的项目中的文件有配套的语法解析工具, 就能够对代码进行解决

• 对代码的解决能够更加准确, 比方按 类型 , 变量名 , 值的不同, 进行不同的批改

  现有前端举荐 .ts->typescript,.html->@angular/compiler,.json->jsonc-parser
  对于其余类型语言, 语法解析工具能够参考这里 https://astexplorer.net/

链式调用

• 以后原理图能够去调用其余原理图, 作为一个 规定, 其余原理图能够解决之后返回, 为下一个规定提供解决好的文件

自动化工作解决

• 如果指定过增加工作, 那么在原理图的文件批改完结, 并写入到硬盘后, 会主动执行

  目前内置的工作包含 初始化仓库 ,npm 装置, 执行其余原理图

能够用来做什么

我的项目初始化

• 这个也是最根底, 利用最宽泛的, 只须要保留文件并执行就能够主动生成

我的项目更新

• 对于我的项目中局部代码须要更新(如依赖更新引发的废除), 能够通过语言解析替换相干节点内容

• 通过其余代码, 进行语法解析取得元数据生成相干逻辑

  这里的元数据因为非 json 格局, 所以须要语法解析取得

源码工厂

• 一个猜测, 通过简单的规定及逻辑, 把文件视为模块, 通过输出的参数, 生成符合要求的源码
• 因为生产的源码是又原理图生成的, 所以可读性与失常开发人员写的统一, 并且不会呈现开发人员犯的低级谬误
• 源码作为生成产品, 不必放心泄露, 因为 真正的源码 是原理图的源码工厂, 而不是生成的源码

名称解释

workflow

• 汇合及原理图工作的惟一环境
• 初始化汇合
• 应用 engine 创立并执行原理图

engine

• 用来创立collection,schematic,SchematicContext
• 读取文件(模板), 转换参数等底层办法

collection

• collection.json的实例
• 初始化原理图

schematic

• 在 collection 中的 schematic 实例
• 调用规定解决传递进去的文件

Tree

• 一个虚拟机文件树
• 原理图的第一个规定 (默认执行的第一个), 传入的Tree 为当前工作空间
• 次要用于传入给 Rule 中, 进行解决

SchematicContext

• 原理图上下文
• 以后原理图实例
• engine

Rule

• 解决传入的Tree
• 返回的 Tree 会给予下一个 Rule 持续进行解决

Source

• 与 rxjs 相似,Angular的原理图引入了 Source(起源) 与Rule(规定)

  Source相当于 rxjs 中的创立操作符,Rule相当于管道符

• Source能够由规定转换为 Tree, 而后提供给Rule 进行解决
• 因为规定是解决传入的文件, 所以 Source 的作用就是限定文件

原理图入门教程

• https://www.bilibili.com/video/BV13h411J7mU

教程所用源码

• https://github.com/wszgrcy/schematics-tutorial