AST 语法树&
Babel
理解编译器如何「看懂」你的代码，以及 Babel 如何将现代 JavaScript 转化为任何浏览器都能运行的版本。
什么是 AST？
抽象语法树 (Abstract Syntax Tree) 是源代码结构的树形表示。每个节点代表源码中的一个结构——变量声明、函数调用、表达式等。编译器、转译器、Lint 工具、代码压缩器都依赖 AST 来理解代码。
为什么需要 AST？
计算机无法直接理解 "const x = 1" 这样的字符串含义。AST 将代码结构化，让程序能够：分析代码结构、检测错误、进行代码转换、自动生成代码。它是程序理解程序的桥梁。
Babel 是什么？
Babel 是一个 JavaScript 编译器（转译器），主要用于将新版 ES6+ 语法转换为向后兼容的 ES5 代码。它由 Parse → Transform → Generate 三个核心阶段组成，并通过插件系统实现高度可扩展的代码转换。
Babel 的核心价值
Babel 不仅支持语法转换（Syntax Transform），还能通过 Polyfill 补充新的内置 API（如 Promise、Map），通过插件实现代码优化、自动国际化、性能追踪等。它是现代前端工程化的基石之一。
AST 节点探索器
const greeting = "hello";type:"Program" → 子节点: variable
Babel 三阶段管线
Parse
解析
将源代码字符串转换为 AST 语法树
- 词法分析 (Tokenize)
- 语法分析 (Parse)
Transform
转换
遍历 AST，应用插件进行代码转换
- Visitor 模式遍历
- 插件链式处理
Generate
生成
将转换后的 AST 重新生成目标代码字符串
- 代码拼接
- Source Map 生成
代码转换全流程
const greeting = "hello";Babel 插件实验场
const add = (a, b) => a + b;@babel/plugin-transform-arrow-functions
将上图左侧的现代语法自动转换为右侧的兼容写法
Babel 配置速查
{
"presets": [
["@babel/preset-env", {
"targets": "> 0.25%, not dead",
"useBuiltIns": "usage",
"corejs": 3
}],
"@babel/preset-react",
"@babel/preset-typescript"
],
"plugins": [
"@babel/plugin-transform-runtime"
]
}一组插件的集合。如 @babel/preset-env 包含所有将 ES6+ 转为 ES5 的插件。
最小转换单元，每个插件负责一种语法转换。如箭头函数、模板字符串等。
补充运行时缺失的 API（如 Promise、Array.from），通过 core-js 实现。
映射转换后代码到原始代码位置，便于调试。
Visitor 模式：Babel 插件的心脏
什么是 Visitor 模式？
Babel 遍历 AST 时使用 Visitor 模式：你定义一个对象，其属性名对应 AST 节点类型。当遍历器进入或离开某类型节点时，自动调用对应的回调函数。
// my-plugin.js
module.exports = function () {
return {
visitor: {
// 当遍历器进入 VariableDeclaration 节点
VariableDeclaration(path) {
if (path.node.kind === "const") {
path.node.kind = "var"; // 直接修改 AST
}
}
}
};
};
// babel.config.json
// { "plugins": ["./my-plugin.js"] }编译 vs 转译 vs 解释
编译 (Compile)
输入 → 输出：高级语言 → 机器码 / 字节码
示例：C → 机器码
工具：GCC, Clang, V8 (JIT)
转译 (Transpile)
输入 → 输出：高级语言 → 同级高级语言
示例：ES6+ → ES5
工具：Babel, TypeScript, SWC
解释 (Interpret)
输入 → 输出：源代码 → 直接执行
示例：Python 逐行执行
工具：Python, Ruby (MRI)