Babel 是一个广泛使用的 JavaScript 编译器，将现代 JavaScript 代码转换为向后兼容的版本。
Babel 运行原理
Babel 的执行由三个主要阶段组成：解析（Parsing）、转换（Transformation）和代码生成（Code Generation）。
解析（Parsing）
在处理源代码之前，Babel 执行两个子步骤：
- 词法分析：将源代码分解为最小的语法单元——关键字、标识符、运算符、字符串——生成 token 流。
- 语法分析：将 token 流转换为抽象语法树（AST）。这种 JavaScript 代码的树形表示包含表示各个语法结构的节点。
转换（Transformation）
这是 Babel 的核心阶段，通过修改 AST 节点将源代码转换为目标代码。
关键概念包括：
- Visitor：定义访问 AST 节点时执行方法的对象。
- Path：表示 AST 节点位置的对象，存储父节点、子节点和祖先信息。
- State：包含当前转换上下文的对象，可在 visitor 方法之间共享。
- Scope：表示代码作用域的对象，包括变量、函数和类。
- Binding：表示节点绑定关系和相关变量信息的对象。
代码生成（Code Generation）
Babel 将修改后的 AST 转换回代码，支持 ES5、ES6 或其他 JavaScript 变体。
插件基础
插件是接受 Babel 上下文和配置选项来转换 AST 的函数或对象。它们通常返回新的或修改后的 AST。
示例插件
module.exports = function (babel) {
const { types: t } = babel;
return {
visitor: {
Identifier(path) {
if (path.node.name === 'foo') {
path.node.name = 'bar';
}
},
},
};
};这个插件将所有 foo 标识符替换为 bar。
插件详解
在插件中，babel 参数包含 Babel 的 API。visitor 属性定义转换规则——每个属性对应一个 AST 节点类型，其函数指定转换操作。
示例使用了 Babel 的 types 属性（包含所有 AST 节点构造函数）和 path 参数（表示当前节点位置的 Path 对象）。修改 path.node 即可更改当前节点。