2021/02/22 - Babel是什么，原理是什么，实现语法转换的过程

[lxinr]

Babel 是一个 JavaScript 编译器。它可以把各类版本的js代码编译成使用者所需要的版本

原理

1. 解析

解析步骤接收代码并输出 AST。 这个步骤分为两个阶段：词法分析（Lexical Analysis） 和 语法分析（Syntactic Analysis）

1、词法分析

词法分析即分词，意思就是将一行行的代码分解成一个个token

const msg = '词词词'
// 词法分析将该语句分成四个部分
// const -> 关键字 msg -> 变量名 = -> 赋值 '词词词' -> 字符串

2、语法分析

语法分析阶段，将生成的这些 token 数据，根据一定的语法规则转化为AST

总结来看，解析过程为

code(字符串形式代码) -> tokens(令牌流) -> AST（抽象语法树）

Babel 使用 @babel/parser 解析代码，输入的 js 代码字符串根据 ESTree 规范生成 AST（抽象语法树）

2. 转换

转换步骤接收 AST 并对其进行遍历，在此过程中对节点进行添加、更新及移除等操作。 这是 Babel 或是其他编译器中最复杂的过程。

Babel提供了@babel/traverse(遍历)方法维护这AST树的整体状态，并且可完成对其的替换，删除或者增加节点，这个方法的参数为原始AST和自定义的转换规则，返回结果为转换后的AST

3. 生成

代码生成步骤把最终（经过一系列转换之后）的 AST 转换成字符串形式的代码，同时还会创建源码映射（source maps）。

代码生成其实很简单：深度优先遍历整个 AST，然后构建可以表示转换后代码的字符串。

Babel使用 @babel/generator 将修改后的 AST 转换成代码，生成过程可以对是否压缩以及是否删除注释等进行配置，并且支持 sourceMap

参考：

[实践系列]Babel原理