Babel工作原理

 

Taro中用到Babel插件，Babel是一个JavaScrip编译器，将ES6版本的代码转换为向后兼容的JavaScript语法，做的事情：

 

Babel的处理流程

词法解析

词法解析器（Tokenizer）在此阶段将字符串形式的代码转换为Tokens（令牌）。Tokens可以视为是一些语法片段组成的数组。

例如for (const item of items) {} 词法解析后的结果如下:

从上图可以看,每个 Token 中包含了语法片段、位置信息、以及一些类型信息. 这些信息有助于后续的语法分析

语法解析

这个阶段语法解析器（Parser）会把Tokens

转换为AST（抽象语法树）

AST：一个对象树，表示代码的语法结构

例如console.log('hello world')会解析成为:

每个节点都是一个有意义的语法单元，这些节点定义了一些属性来描述节点的信息

AST 是 Babel 转译的核心数据结构，后续的操作都依赖于 AST。

转换

转换阶段会对节点进行增删查改。Babel所有的插件都是在这个阶段进行的。比如语法转换，代码压缩。

最后阶段就是把AST转换为字符串形式的Javascipt，同时这个阶段还会生成Source Map