Babel 学习日记（0）

作者：商见曜

来源：恒生LIGHT云社区

作为现代前端项目必备的一种技术，Babel 是一个编译器，用于将前沿的 JS 语法转换为浏览器支持的语法。接下来就让我们一起深入学习一下吧。

Babel 的介绍

Babel 指的是“巴别塔”，出自圣经典故：

当时的人类只说一种语言，联合起来无所不能，要创建一座通向天堂的塔，上帝害怕了，为了分化他们，于是就让人类说不同的语言，人类因此失去了这种力量，分化了。而这座塔就是巴别塔。

Babel 的用途

• 转译 esnext，typescript，flow 等到目标环境支持的 js
  这是最常用的功能，用来吧代码中的 esnext 的语法，ts 和 flow 的语法转为基于目标环境支持的语法的实现。并且可以吧目标环境不支持的 api 进行 polyfill
• 自由自在的编译器
  它暴露了很多的 api，想对源代码进行怎么转译都行
• 代码的静态分析
  对代码进行 parse 之后，能够进行转换，是因为通过 AST 的结构能够理解代码，在转换之前生成目标代码之外，也可以用于分析代码的信息，进行检查。比如 linter，api 文档自动生成工具通过提取注释生成文档等。

Babel 的转译流程

Babel 是 source to source 的转换，整体转译过程分为三步：

1. parse： 通过 parser 将源代码转换为抽象语法树 (AST)
2. transform：遍历 AST，调用各种 transform 插件对 AST 进行增删查改
3. generate: 把转换后的 AST 打印成目标代码，并生成 sourcemap

为什么是三步而不是一步呢？因为源码太乱了，没有统一的格式，直接 source to source 不现实，于是就加一层 AST，将源代码中混乱的、无意义的部分去掉，这样对 AST 操作就能统一起来了。于是一步就变成了三步。(经典中间件思维了)

简单分析一下这三步
parse

前面已经说过 parse 是将源码转换为统一格式的 AST，这个过程是一个词法分析、语法分析的过程；

比如 let name = ‘shangjianyao’; 这样一段代码，parse 先把它分成一个个不能细分的单词（术语叫 token），得到 let,name,=,‘shangjianyao’，这个过程叫词法分析，按照单词的构成规则拆分源码。

之后要把 token 进行递归的组装，生产 AST，这个过程是语法分析，按照不同的语法规则，把一组单词组合成对象。
也就是说先拆了，再按照新规则组装。

transform

transform 阶段对 parse 生成的 AST 进行处理：对 AST 进行深度优先遍历，遍历的过程中处理不同的 AST 节点会调用注册的相应的 vistor 函数（来源于插件），vistor 函数里可以对 AST 节点进行增删改，返回新的节点。这一步是逻辑处理的核心和多变的关键

generate

这个阶段会把 AST 打印成目标字符串，并且会生成 sourcemap。不同的 AST 对应不同结构的字符串。而 sourcemap 记录了从源码到目标代码的转换关系，通过它可以找到目标代码中每个节点对应的源码位置。

好好聊聊 AST

AST （Abstract Syntax Tree）抽象语法树是整个转译流程的核心，它是一个树状结构，有不同类型的节点，基本对应了 JS 语法里的数据类型和语法，我们分别了解一下：

Literal
Literal 字面量，比如 let name = ‘shangjianyao’ 中，shangjianyao 就是一个字符串字面量 StringLiteral，相应的还有数字字面量 NumericLiteral，布尔字面量 BooleanLiteral，null 字面量 NullLiteral，undefined 字面量 UndefinedLiteral，这些都是 Literal，规则就是这样的 --xxLiteral。

Identifier
也即是标识符的意思，变量名、属性名、参数名等各种声明和引用的名字，都是 Ientifer。（js 里的标识符规则是？Identifer 就是这个识别规则）

试试看，下面这段代码里有多少 identifier？

let name = 'shangjianyao';
function sayHello(<