什么是 Babel
Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.
简单地说，Babel 能够转译 ECMAScript 2015+ 的代码，使它在旧的浏览器或者环境中也能够运行。
Babel是一个编译器，用于将ECMA2015+代码转换为向后兼容的javascript语法，其原因在于目前浏览器并不能及时的兼容js的新语法，而开发过程中我们往往会选择es6、jsx、typescript进行开发，而浏览器并不能识别并执行这些代码，因此就必须将这些代码编译并转换成浏览器识别的代码。
我们可以在 babel.docschina.org/repl 尝试一下。
// es2015 的 const 和 arrow function
const add = (a, b) => a + b;
// Babel 转译后
var add = function add(a, b) {
return a + b;
};
Babel 是如何工作的
首先得要先了解一个概念：抽象语法树（Abstract Syntax Tree, AST），Babel 本质上就是在操作 AST 来完成代码的转译。
-
AST
我们用上面的 const add = (a, b) => a + b;，来看看它生成的 AST 会是怎样的：
{
"type": "Program",
"body": [
{
"type": "VariableDeclaration", // 变量声明
"declarations": [ // 具体声明
{
"type": "VariableDeclarator", // 变量声明
"id": {
"type": "Identifier", // 标识符
"name": "add" // 函数名
},
"init": {
"type": "ArrowFunctionExpression", // 箭头函数
"id": null,
"expression": true,
"generator": false,
"params": [ // 参数
{
"type": "Identifier",
"name": "a"
},
{
"type": "Identifier",
"name": "b"
}
],
"body": { // 函数体
"type": "BinaryExpression", // 二项式
"left": { // 二项式左边
"type": "Identifier",
"name": "a"
},
"operator": "+", // 二项式运算符
"right": { // 二项式右边
"type": "Identifier",
"name": "b"
}
}
}
}
],
"kind": "const"
}
],
"sourceType": "module"
}
我们可以通过一棵“树”来更为直观地展示这句代码的 AST(从第二层的 declarations 开始)：
一个 AST 的根节点始终都是 Program，上面的例子我们从 declarations 开始往下读：
一个VariableDeclaration(变量声明)：声明了一个 name 为 add 的ArrowFunctionExpression(箭头函数)：
params(函数入参)：a和b- 函数体：函数主体是一个
BinaryExpression(二项式)，一个标准的二项式分为三部分： -
left(左边)：aoperator(运算符)：加号 +right(右边)：b
这样就拆解了这一行代码。
如果想要了解更多，可以阅读和尝试：
- 分析
AST：ASTexplorer.net AST规范：github.com/estree/estr…
-
Babel 工作过程
Babel 的功能很纯粹，它只是一个编译器。
大多数编译器的工作过程可以分为三部分：
- 「Parse(解析)」：将源代码转换成更加抽象的表示方法（例如抽象语法树）
- 「Transform(转换)」：对（抽象语法树）做一些特殊处理，让它符合期望
- 「Generate(代码生成)」：将第二步经过转换过的（抽象语法树）生成新的代码
parse和generate就是编译器和生成器，使用者可做的事情是转换，如果没有transform，生成的目标代码和原始代码都是一样的，只是多了属性。转换过程的具体操作需要插件来实现，如果没有使用插件，最后生成的目标代码是和原始代码一样。
下面来看下
const add = (a, b) => a + b，看看它是如何经过 Babel 变成：
var add = function add(a, b) {
return a + b;
};
Parse（解析）
Parse 阶段可以细分为两个阶段：词法分析和语法分析。
词法分析
词法分析阶段可以看成是对代码进行“分词”，它接收一段源代码，然后执行一段 tokenize 函数，把代码分割成被称为Tokens 的东西。Tokens 是一个数组，由一些代码的碎片组成，比如数字、标点符号、运算符号等等等等，例如这样：
[ { "type": "Keyword", "value": "const" }, { "type": "Identifier", "value": "add" }, { "type": "Punctuator", "value": "=" }, { "type": "Punctuator", "value": "(" }, { "type": "Identifier", "value": "a" }, { "type": "Punctuator", "value": "," }, { "type": "Identifier", "value": "b" }, { "type": "Punctuator", "value": ")" }, { "type": "Punctuator", "value": "=>" }, { "type": "Identifier", "value": "a" }, { "type": "Punctuator", "value": "+" }, { "type": "Identifier", "value": "b" }]
通过 esprima.org/demo/parse.… 生成的。
看上去好像很容易啊，就是把一句完整的代码拆成一个个独立个体就好了。但是，我们得让机器知道怎么拆~
我们来试着实现一下 tokenize 函数：
/**
* 词法分析 tokenize
* @param {string} code JavaScript 代码
* @return {Array} token
*/
function tokenize(code) {
if (!code || code.length === 0) {
return [];
}
var current = 0; // 记录位置
var tokens = []; // 定义一个空的 token 数组
var LETTERS = /[a-zA-Z$_]/i;
var KEYWORDS = /const/; // 模拟一下判断是不是关键字
var WHITESPACE = /\s/;
var PARENS = /(|)/;
var NUMBERS = /[0-9]/;
var OPERATORS = /[+*/-]/;
var PUNCTUATORS = /[~!@#$%^&*()/|,.<>?"';:_+-=[]{}]/;
// 从第一个字符开始遍历
while (current < code.length) {
var char = code[current];
// 判断空格
if (WHITESPACE.test(char)) {
current++;
continue;
}
// 判断连续字符
if (LETTERS.test(char)) {
var value = '';
var type = 'Identifier';
while (char && LETTERS.test(char)) {
value += char;
char = code[++current];
}
// 判断是否是关键字
if (KEYWORDS.test(value)) {
type = 'Keyword'
}
tokens.push({
type: type,
value: value
});
continue;
}
// 判断小括号
if (PARENS.test(char)) {
tokens.push({
type: 'Paren',
value: char
});
current++;
continue;
}
// 判断连续数字
if (NUMBERS.test(char)) {
var value = '';
while (char && NUMBERS.test(char)) {
value += char;
char = code[++current];
}
tokens.push({
type: 'Number',
value: value
});
continue;
}
// 判断运算符
if (OPERATORS.test(char)) {
tokens.push({
type: 'Operator',
value: char
});
current++;
continue;
}
// 判断箭头函数
if (PUNCTUATORS.test(char)) {
var value = char;
var type = 'Punctuator';
var temp = code[++current];
if (temp === '>') {
type = 'ArrowFunction';
value += temp;
current ++;
}
tokens.push({
type: type,
value: value
});
continue;
}
tokens.push({
type: 'Identifier',
value: char
});
current++;
}
return tokens;
}
上面这个 tokenize 函数只是自己实现一下，与实际上 Babel 的实现方式还是差不少的，如果感兴趣可以看看github.com/babel/babel…
我们来测试一下：
const tokens = tokenize('const add = (a, b) => a + b')；
console.log(tokens);
[ { "type": "Keyword", "value": "const" }, { "type": "Identifier", "value": "add" }, { "type": "Punctuator", "value": "=" }, { "type": "Paren", "value": "(" }, { "type": "Identifier", "value": "a" }, { "type": "Punctuator", "value": "," }, { "type": "Identifier", "value": "b" }, { "type": "Paren", "value": ")" }, { "type": "ArrowFunction", "value": "=>" }, { "type": "Identifier", "value": "a" }, { "type": "Operator", "value": "+" }, { "type": "Identifier", "value": "b" }]
语法分析
「词法分析」之后，代码就已经变成了一个 Tokens 数组了，现在需要通过「语法分析」把 Tokens 转化为上面提到过的 AST。
现在我们先假设已经实现了这样一个函数，把上面的 Tokens 转化成了一个 AST，进入下一步。
如果感兴趣可以看看官方的做法github.com/babel/babel…
Transform(转换)
这一步做的事情也很简单，就是利用插件操作 AST。
没有插件的babel只是会将源码生成AST，然后在通过生成器生成和原来的源码一模一样的代码，这样的过程是没有任何作用的。
插件发挥作用的地方基本都是在tranfrom过程，当源码通过parse生成了ast后，我们可以通过转换插件，对ast进行操作。比如@babel/plugin-transform-react-jsx是将react中的jsx转换为react的节点对象。这样这些插件都涉及到对ast的操作，babel提供了一些工具插件，让我们可以方便的操作ast节点，也就更方便我们开发适合自己项目的插件。比如在babel官网中设计到的插件。
我们可以看到 AST 中有很多相似的元素，它们都有一个 type 属性，这样的元素被称作「节点」。一个节点通常含有若干属性，可以用于描述 AST 的部分信息。
比如这是一个最常见的 Identifier 节点：
{
type: 'Identifier',
name: 'add'
}
表示这是一个标识符。
所以，操作 AST 也就是操作其中的节点，可以增删改这些节点，从而转换成实际需要的 AST。
更多的节点规范可以在github.com/estree/estr…
Babel 对于 AST 的遍历是深度优先遍历，对于 AST 上的每一个分支 Babel 都会先向下遍历走到尽头，然后再向上遍历退出刚遍历过的节点，然后寻找下一个分支。
还是上面的：
{
"type": "Program",
"body": [
{
"type": "VariableDeclaration", // 变量声明
"declarations": [ // 具体声明
{
"type": "VariableDeclarator", // 变量声明
"id": {
"type": "Identifier", // 标识符（最基础的）
"name": "add" // 函数名
},
"init": {
"type": "ArrowFunctionExpression", // 箭头函数
"id": null,
"expression": true,
"generator": false,
"params": [ // 参数
{
"type": "Identifier",
"name": "a"
},
{
"type": "Identifier",
"name": "b"
}
],
"body": { // 函数体
"type": "BinaryExpression", // 二项式
"left": { // 二项式左边
"type": "Identifier",
"name": "a"
},
"operator": "+", // 二项式运算符
"right": { // 二项式右边
"type": "Identifier",
"name": "b"
}
}
}
}
],
"kind": "const"
}
],
"sourceType": "module"
}
根节点我们就不说了，从 declarations 里开始遍历：
- 声明了一个变量，并且知道了它的内部属性（
id、init），然后我们再以此访问每一个属性以及它们的子节点。 id是一个Idenrifier，有一个name属性表示变量名。- 之后是
init，init也有好几个内部属性：
type是ArrowFunctionExpression，表示这是一个箭头函数表达式params是这个箭头函数的入参，其中每一个参数都是一个Identifier类型的节点；body属性是这个箭头函数的主体，这是一个BinaryExpression二项式：left、operator、right，分别表示二项式的左边变量、运算符以及右边变量。
这是遍历 AST 的白话形式，再看看 Babel 是怎么做的：
Babel 会维护一个称作 Visitor 的对象，这个对象定义了用于 AST 中获取具体节点的方法。
Visitor 一般来说是这样的：
var visitor = {
ArrowFunction() {
console.log('我是箭头函数');
},
IfStatement() {
console.log('我是一个if语句');
},
CallExpression() {}
};
当我们遍历 AST 的时候，如果匹配上一个 type，就会调用 visitor 里的方法。
这只是一个简单的 Visitor。
上面说过，Babel 遍历 AST 其实会经过两次节点：遍历的时候和退出的时候，所以实际上 Babel 中的 Visitor 应该是这样的：
var visitor = {
Identifier: {
enter() {
console.log('Identifier enter');
},
exit() {
console.log('Identifier exit');
}
}
};
比如我们拿这个 visitor 来遍历这样一个 AST：
params: [ // 参数
{
"type": "Identifier",
"name": "a"
},
{
"type": "Identifier",
"name": "b"
}
]
过程可能是这样的...
- 进入
Identifier(params[0]) - 走到尽头
- 退出
Identifier(params[0]) - 进入
Identifier(params[1]) - 走到尽头
- 退出
Identifier(params[1])
当然，Babel 中的 Visitor 模式远远比这复杂...
回到上面的，箭头函数是 ES5 不支持的语法，所以 Babel 得把它转换成普通函数，一层层遍历下去，找到了 ArrowFunctionExpression 节点，这时候就需要把它替换成 FunctionDeclaration 节点。所以，箭头函数可能是这样处理的：
import * as t from "@babel/types";
var visitor = {
ArrowFunction(path) {
path.replaceWith(t.FunctionDeclaration(id, params, body));
}
};
对细节感兴趣的可以翻翻源码github.com/babel/babel…
- @babel/types
这个插件的api非常多。它的作用是创建、修改、删除、查找ast节点，因为ast也是一个树状结构，我们可以像js操作dom节点一样，使用types对ast进行操作。
另外我们知道ast的节点也是分为多种类型，比如ExpressionStatement是表达式、ClassDeclaration是类声明、VariableDeclaration是变量声明等等，同样的这些类型都对应了其创建方法：t.expressionStatement、t.classDeclaration、t.variableDeclaration，也对应了判断方法：t.isExpressionStatement、t.isClassDeclaration、t.isVariableDeclaration。这个插件往往和traverse遍历插件一起使用，因为types只能对单一节点进行操作，一般是在对节点的迭代中使用。
- @babel/traverse
这个插件的作用是对ast进行遍历parse，在迭代的过程中可以定义回调函数，回调函数的参数提供了丰富的增、删、改、查以及类型断言的方法，比如replaceWith/remove/find/isMemberExpression。
下面以一个例子结合types和traverse进行演示。
假设我们在开发过程中使用一个函数findEleById来代替document.getElementById，如果我们直接使用findEle而不对其进行处理，js代码执行过程中是会报错，因为window下是没有这个函数的。但是我们可以使用babel修改其ast，将findEleById改为document.getElementById，这样babel的生成器生成的最新代码就是document.getElementById，然后js引擎就可以编译通过了。
当然这个过程对于开发者是隐藏的，开发者只需要关注于使用findEleById便捷的开发就可以了，后续的操作交给babel。见如下代码：
var t = require('@babel/types');
var {parse} = require('@babel/parser');
var {default: traverse} = require('@babel/traverse');
var {default: generate} = require('@babel/generator');
var orginCode = `findEleById("jyy")`; // 原始代码
// 生成原始AST
var originAST = parse(orginCode, {
sourceType: "module"
});
// 对AST进行遍历并操作
traverse(originAST,{
Identifier(path){
var {node} = path;
// 找到findEleById，将其替换成为目标节点
if(node && node.name === "findEleById"){
var newNode = t.memberExpression(t.identifier("document"), t.identifier("getElementById")); // 创建目标节点
path.replaceWith(newNode); // 替换原始节点
path.stop();
}
}
});
const targetCode = generate(originAST, { /* options */ }, orginCode); // 将转换后的AST生成目标代码
console.log(targetCode); // { code: 'document.getElementById("jyy");',map: null,rawMappings: undefined }
从上面代码可以看到基本的转换过程，生成的最终代码可以直接交付给浏览器引擎编译执行了。
Generate(代码生成)
经过上面两个阶段，需要转译的代码已经经过转换，生成新的 AST 了，最后一个阶段理所应当就是根据这个 AST 来输出代码。
Babel 是通过 github.com/babel/babel… 来完成的。当然，也是深度优先遍历。
class Generator extends Printer {
constructor(ast, opts = {}, code) {
const format = normalizeOptions(code, opts);
const map = opts.sourceMaps ? new SourceMap(opts, code) : null;
super(format, map);
this.ast = ast;
}
ast: Object;
generate() {
return super.generate(this.ast);
}
}
经过这三个阶段，代码就被 Babel 成功了。
