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 将抽象语法树转换成浏览器可识别的代码。