【Babel】Babel的工作原理

Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其它环境中。

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

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

Babel的工作流程图：

 工作原理描述：

Babel 首先是把原始代码（第一个Code）通过babylon 转换成抽象语法树（Abstract Syntax Tree, AST），接下来使用 babel-traverse 将抽象语法树转换成目标语法的抽象语法树，如：ES5或ES3，此外还可以通过plugins干预进行其它处理，转换成最终的AST，最后通过 babel-generator 将抽象语法树转换成浏览器可识别的代码。