持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情
关于Babel
Babel是一个广泛使用的转码器，可以将同种语言的高版本规则转换为低版本规则，从而不需要考虑运行环境，直接在现有环境执行。
Babel的转换过程
AST抽象语法树
AST简单理解为：以树的形式来表现编程语言的语法结构。
我们可以借助直观的树形结构转换 AST Explorer 更加直观的理解 AST 结构：生成的树有多个节点，节点有不同的类型，不同类型节点有不同的属性。
比如：当我们敲下
console.log('hello vivi');
则会得到如下的树形结构：
Babel的编译流程
三大步骤：
-
解析阶段Parse： 这一阶段是使用 @babel/parser 将代码解析生成抽象语法树AST。是一个对于js代码的编译过程，该过程分为两个阶段，词法分析和语法分析
- 词法分析：对输入的字符序列做标记化(tokenization)操作。
- 语法分析：处理标记与标记之间的关系，最终形成一颗完整的 AST 结构。
-
转换阶段Transform： 这一阶段使用 @babel/traverse 提供的方法对 AST 进行深度优先遍历，在此过程对AST进行添加，更新及移出等操作。
-
生成阶段Generate： 这一阶段使用 @babel/generator 将上一阶段处理后的 AST 转换为js代码。
可以简单总结为是code to AST到AST to AST到 AST to code的三个过程。
具体过程分析
具体转换阶段的详细逻辑可查看源码
Visitors
我们生成出来的 AST 结构都拥有一个 accept 方法用来接收 visitor 访问者对象的访问，而访问者其中也定义了 visit 方法，使其能够对树状结构不同节点做出不同的处理，借此做到在对象结构的一次访问过程中，我们能够遍历整个对象结构。
Paths
Visitors 在遍历到每个节点的时候，都会给我们传入 path 参数，包含了节点的信息以及节点和所在的位置，供我们对特定节点进行修改
总结
Babel是一个通用的多功能 JavaScript 编译器，可以做到按需转换为低版本支持的代码，从而在现有环境执行诸如ES6语法的代码，或者各类语言，如TS，Flow，JSX等。其内部原理是将JS代码解析生成AST抽象语法树，对AST应用各种插件进行处理后，最终输出编译后的JS代码。
