AST

AST（抽象语法树）是一种由编译器或解释器生成的程序源代码的结构表示方式，它可以用树状图的形式展现程序的结构，包括语句、表达式、变量、函数、注释等各种元素，使得程序可以被进一步分析和处理。

babel babel 概念 babel 如何编译？babel 节点 babel的API

babel

babel 概念

babel 就是一个 js 转译器，用于 es next、typescript等代码的转换，同时提供了一些方法。

babel 如何编译？

babel 是 source to source 的转换，整体编译流程分为三步：

parse：通过 parser 把源码转成抽象语法树（AST）

transform：遍历 AST，调用各种 transform 插件对 AST 进行增删改

generate：把转换后的 AST 打印成目标代码，并生成 sourcemap

parse 生成 ast，

transform 对 ast 进行转换，

generate 打印 ast 成目标代码并生成 sourcemap

generator、traverse、 types 、 parse

generator:将AST转化回js代码

parse:将js代码转化为AST

traverse:节点遍历操作的方便功能

types: 提供一个与格式相关的对象合集，可以操作从而生成节点

babel 节点

类型对照表如下

序号	类型原名称	中文名称	描述
1	Program	程序主体	整段代码的主体
2	VariableDeclaration	变量声明	声明一个变量，例如 var let const
3	FunctionDeclaration	函数声明	声明一个函数，例如 function
4	ExpressionStatement	表达式语句	通常是调用一个函数，例如 console.log()
5	BlockStatement	块语句	包裹在 {} 块内的代码，例如 if (condition){var a = 1;}
6	BreakStatement	中断语句	通常指 break
7	ContinueStatement	持续语句	通常指 continue
8	ReturnStatement	返回语句	通常指 return
9	SwitchStatement	Switch 语句	通常指 Switch Case 语句中的 Switch
10	IfStatement	If 控制流语句	控制流语句，通常指 if(condition){}else{}
11	Identifier	标识符	标识，例如声明变量时 var identi = 5 中的 identi
12	CallExpression	调用表达式	通常指调用一个函数，例如 console.log()
13	BinaryExpression	二进制表达式	通常指运算，例如 1+2
14	MemberExpression	成员表达式	通常指调用对象的成员，例如 console 对象的 log 成员
15	ArrayExpression	数组表达式	通常指一个数组，例如 [1, 3, 5]
16	NewExpression	New 表达式	通常指使用 New 关键词
17	AssignmentExpression	赋值表达式	通常指将函数的返回值赋值给变量
18	UpdateExpression	更新表达式	通常指更新成员值，例如 i++
19	Literal	字面量	字面量
20	BooleanLiteral	布尔型字面量	布尔值，例如 true false
21	NumericLiteral	数字型字面量	数字，例如 100
22	StringLiteral	字符型字面量	字符串，例如 vansenb
23	SwitchCase	Case 语句	通常指 Switch 语句中的 Case

babel的API

@babel/parser · Babel 中文文档 | Babel中文网 (babeljs.cn)

Babel的流程分为parse、transform、generate。

每个流程都有很多API

例如


@babel/parser
@babel/core
@babel/generator
@babel/code-frame
@babel/runtime
@babel/template
@babel/traverse
@babel/types

@babel/parser

解析代码它提供了有两个 api：parse 和 parseExpression

@babel/traverse

parse 出的 AST 由 @babel/traverse 来遍历和修改，traverse 去修改

path:path 记录了遍历过程的路径

state:通过state传递或存储一些信息和数据

@babel/types

创建ast和判断AST的类型

IfStatement：创建

isIfStatement、assertIfStatement：判断

@babel/template

types只能单个创建 tempaltes是批量创建

ast: 返回整个ast

program：返回根节点

statements：返回创建的 statems 数组的 AST

@babel/generator

打印成目标代码字符串

@babel/code-frame

babel 的报错一半都会直接打印错误位置的代码，而且还能高亮，

@babel/core

babel 基于上面这些包来实现编译、插件、预设

transformSync

从源代码

transformFileSync

从源代码文件

transformFromAstSync

从源代码 AST