Babel编译及抽象语法树(AST)

  • Jul, 05 2019
  • JavaScript

Babel编译及抽象语法树(AST)

众所周知,Babel可以将es6代码转译成es5,让所有浏览器都可以运行代码。

Babel是怎么转译的?

分为三个阶段: parsing、transforming、generating。

  1. 解析(parsing):将代码字符串解析成抽象语法树。
  2. 转换(transforming):对抽象语法树进行转换操作。
  3. 生成(generating):根据变换后的抽象语法树再生成代码字符串。

流程:

  1. babylon解析es6代码=>得到AST
  2. plugin用babel-traverse对AST树进行遍历转译=>得到新的AST树
  3. 用babel-generator通过AST树生成ES5代码

我们在.babelrc里配置的presetsplugins是在第二步进行的

什么是抽象语法树(AST)?

抽象语法树(abstract syntax code,AST)是源代码的抽象语法结构的树状表示,树上的每个节点都表示源代码中的一种结构,这所以说是抽象的,是因为抽象语法树并不会表示出真实语法出现的每一个细节,比如说,嵌套括号被隐含在树的结构中,并没有以节点的形式呈现。抽象语法树并不依赖于源语言的语法,也就是说语法分析阶段所采用的上下文无文文法,因为在写文法时,经常会对文法进行等价的转换(消除左递归,回溯,二义性等),这样会给文法分析引入一些多余的成分,对后续阶段造成不利影响,甚至会使合个阶段变得混乱。因此,很多编译器要经常独立地构造语法分析树,为前端后端建立一个清晰的接口。