干什么的

Javascript 编译器，或者说转译器

负责转译 ES6等新语法为旧语法让浏览器能够看明白 JavaScript 代码

注意是 语法，也就是一些新的但不是完全新的东西，更多的是语法糖

而新的一些变量或者说 全新的东西

• Promise
• WeakMap
• generator

• …

  他都不知道转译为旧代码的什么东西，当然搞不了了

  工作流程

1. 解析 Parsing ：将代码解析为 抽象语法树，也就是你可能常能见到的 AST 的缩写
2. 转换 Transformation ：再将 AST 转换为 旧语法的 AST
3. 生成 Code Generation：再根据旧的 AST生成旧语法的代码

解析

AST ，学过编译原理的就有印象。
就是源代码的抽象树状结构表示

分词

将代码字符串切割为语法单元数组

什么是语法单元数组？就是代码的最小单元。

• 关键词
• 标识符
• 运算符
• 数字
• 空格
• 注释
• …

  语法分析

  构建单元之间的关系。对语句和表达式进行识别，这是一个递归过程，解析失败就要回溯，换一种方式进行解析。直到生成最终语法树

  转换

  Babel 的插件就是工作在这一步骤中。
  官方也会提供一些插件，就被成为 Preset

有趣的是相关的执行顺序：

1. plugin 在 preset 前运行
2. plugin 从左到右
3. preset 从右到左

// .babelrc
{
    "preset":[
        //...
    ],
    "plugin":[
        //...
    ],
}

生成

用babel-generator由 AST 生成旧语法的代码