AST&脚手架实现

• AST 介绍
• 编译原理的基本思路
• 简单的编译器的实现
• 脚手架的核心原理

AST

抽象语法树

add(2+4)

less/sass => css 跨端技术栈

编译时：rax => 小程序

编译器 compiler

从一种语言转换为另一种语言 ES6 => ES5

编译器的基本思路

add(1+1)

ES6 -> @babel/parser -> AST -> @babel/traverse -> new AST -> @babel/generator -> ES5

1. parser 解析 1.1 词法分析
   • 源码 -> tokens 1214 gao ;= [] ()
   • 正则验证语法以及去除多余字符 1.2 语法分析
   • 将tokens重新整理成语法相互关联的表达形式
2. transform 转换阶段，让一种AST转成new AST
   • taro 从一种DSL 转成另一个 DSL 2.1 可移植性强 2.2 层次清晰(树状结构)
3. generate 代码生成阶段
   • new AST 树形结构 -> code
   • 递归生成代码
4. compiler 编译过程

// 1. input -> tokenizer -> tokens
// 2. tokens -> parser -> AST
// 这里存在一个visitor
// Visitor 是一种设计模式，用于遍历抽象语法树（Abstract Syntax Tree，AST）并执行特定操作
// Visitor 模式的基本思想是将对 AST 的操作与 AST 的结构分离开来，使得可以在不修改 AST 结构的情况下轻松添加新的操作
// Visitor 模式通常用于语义分析、优化和代码生成等阶段，其中每个阶段都可能需要对 AST 进行不同类型的操作
// 3. AST -> tanrsform -> new AST
// 4. new AST -> generator -> output

const input = "(add(2 4))"
const output = "add(2 4)"
const tokens = [
    { type: "paren", value: "(" },
    { type: "name", value: "add" },
    { type: "number", value: "2" },
    { type: "number", value: "4" },
    { type: "paren", value: ")" },
]
const AST = {
    type: "program",
    body:{
        // ...
    }
}
const newAST = {
    type: "program",
    body:{
        // ...
    }
}

一个简单的编译器

脚手架实现 cli

• 减少重复性工作
• 开发规约
• 统一开发项目目录
• 统一开发环境