1.什么是babel

babel是一个javascript编译器，主要用于将采用ECMAScript2015+语法编写的代码转换为向后兼容的javascript语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

// Babel 输入： ES2015 箭头函数
[1, 2, 3].map(n => n + 1);

// Babel 输出： ES5 语法实现的同等功能
[1, 2, 3].map(function(n) {
  return n + 1;
});

2.抽象语法树（AST）

要了解Babel的工作原理，那首先需要了解抽象语法树，因为Babel插件就是作用于抽象语法树。

首先我们编写的代码在编译阶段解析成抽象语法树（AST），然后经过一系列的遍历和转换，然后再将转换后的抽象语法树生成为常规的js代码。

代码解析成AST的目的就是方便计算机更好地理解我们的代码(在线转换：https://astexplorer.net/)

let a=1

形成的json：

{
  "type": "Program",
  "start": 0,
  "end": 7,
  "body": [
    {
      "type": "VariableDeclaration",
      "start": 0,
      "end": 7,
      "declarations": [
        {
          "type": "VariableDeclarator",
          "start": 4,
          "end": 7,
          "id": {
            "type": "Identifier",
            "start": 4,
            "end": 5,
            "name": "a"
          },
          "init": {
            "type": "Literal",
            "start": 6,
            "end": 7,
            "value": 1,
            "raw": "1"
          }
        }
      ],
      "kind": "let"
    }
  ],
  "sourceType": "module"
}

3.babel的工作流程

Babel 的三个主要处理步骤分别是： 解析（parse），转换（transform），生成（generate）。

解析

将代码解析成抽象语法树(AST)，每个js引擎都有自己的AST解析器。解析过程中有两个阶段： 词法分析和语法分析。

词法分析阶段把字符串形式的代码转换为令牌（tokens）流，令牌类似于AST中节点；

语法分析阶段则会把一个令牌流转换成 AST的形式，同时这个阶段会把令牌中的信息转换成AST的表述结构。

转换

Babel接受得到AST并通过babel-traverse对其进行深度优先遍历，在此过程中对节点进行添加、更新及移除操作。
这部分也是Babel插件介入工作的部分。

生成

将经过转换的AST通过babel-generator再转换成js代码，过程就是深度优先遍历整个AST，然后构建可以表示转换后代码的字符串。

（待更新）