总结

原理图是什么?

• 这里援用一个在 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