第 24 卷

常见转译插件： @babel/plugin-transform-arrow-functions（箭头函数）、 @babel/plugin-transform-destructuring（解构赋值）、 @babel/plugin-

transform-classes（class 语法）等。

（2）polyfill（补丁）

核心作用：补充 ES6+ 新增的内置对象和方法（API），解决“API 缺失”问题。例如 Promise、 Array.prototype.includes、 Object.assign、 Map/Set 等，这些是“API 层面”的新

增特性，旧浏览器中不存在这些对象或方法，仅靠语法转译无法解决。

示例：

Code block

1// 原始 ES6 代码（使用 Promise API）

2new Promise((resolve) => resolve(1)).then(console.log);

3

当前主流的 polyfill 方案： core-js@3（Babel 官方推荐，替代旧版 @babel/polyfill），可按需补充所需 API。

1. 核心区别总结

对比维度transform-plugins（转译插polyfill（补丁）

件）

解决问题语法不兼容（旧浏览器无法识API 缺失（旧浏览器没有别 ES6+ 语法）ES6+ 新增的对象/方法）

入

示例场景let/const → var、箭头函数新增 Promise、

• 普通函数Array.prototype.flat

1. 协同工作示例

一段包含 ES6+ 语法和 API 的代码，需要转译插件和 polyfill 共同处理：

Code block

处理流程：

1. 转译插件（如 @babel/plugin-transform-arrow-functions）将箭头函数转为普通函数（语法转

译）。

1. polyfill（core-js@3）补充 Promise API（API 补充）。

最终兼容 ES5 的代码：

Code block

1// 转译 + polyfill 后 2import "core-js/modules/es.promise.js"; // 按需引入 Promise polyfill

3

码”的桥梁。

1. Babel 编译流程与 AST 的关系

Babel 的编译过程分为三个核心步骤，每个步骤都依赖 AST 实现：

（1）步骤1：解析（Parse）→ 生成 AST

核心任务：将原始的 ES6+ 代码字符串解析为 AST，拆解代码的语法结构（如函数、变量、表达式、语句等）。

实现工具： @babel/parser（原 babylon），支持 ES6+、JSX、TypeScript 等语法的解析。解析过程分为两个阶段：

• 词法分析（Lexical Analysis）：将代码字符串拆分为最小的语法单元（token），如关键字

（let、const）、标识符（变量名）、运算符（+、=）、标点符号（{}、()）等。

• 语法分析（Syntactic Analysis）：根据语法规则，将 token 组合为结构化的 AST 节点（如

VariableDeclaration、ArrowFunctionExpression、CallExpression 等），并建立节点间的层级关系（如函数包含变量声明，变量声明包含标识符）。

示例：原始代码 const add = (a, b) => a + b; 解析后生成的 AST 简化结构：

Code block

1{ 2"type": "Program", // 根节点：程序

3"body": [ 4{

5"type": "VariableDeclaration", // 变量声明节点 6"kind": "const", // 声明类型：const

7"declarations": [ 8{