原理图开发指南
总结 原理图是什么?
- 这里引用一个在
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 格式,所以需要语法解析获得
- 一个猜想,通过复杂的规则及逻辑,把文件视为模块,通过输入的参数,生成符合要求的源码
- 由于生产的源码是又原理图生成的,所以可读性与正常开发人员写的一致,并且不会出现开发人员犯的低级错误
- 源码作为生成产品,不用担心泄露,因为
真正的源码是原理图的源码工厂,而不是生成的源码
- 集合及原理图工作的唯一环境
- 初始化集合
- 使用
engine创建并执行原理图
- 用来创建
collection,schematic,SchematicContext - 读取文件(模板),转换参数等底层方法
collection.json的实例- 初始化原理图
- 在
collection中的schematic实例 - 调用规则处理传递进去的文件
- 一个虚拟机文件树
- 原理图的第一个规则(默认执行的第一个),传入的
Tree为当前工作空间 - 主要用于传入给
Rule中,进行处理
- 原理图上下文
- 当前原理图实例
engine
- 处理传入的
Tree - 返回的
Tree会给予下一个Rule继续进行处理
- 【原理图开发指南】与
rxjs类似,Angular的原理图引入了Source(来源)与Rule(规则)
Source相当于rxjs中的创建操作符,Rule相当于管道符 Source可以由规则转换为Tree,然后提供给Rule进行处理- 由于规则是处理传入的文件,所以
Source的作用就是限定文件
- https://www.bilibili.com/video/BV13h411J7mU
- https://github.com/wszgrcy/schematics-tutorial
