Babel 是一个 JavaScript 编译器,通过解析→转换→生成三步基于 AST 将新语法(如可选链、箭头函数)转为旧环境兼容代码,支持按 browserslist 配置自动降级,但不处理 API 补丁。

Babel 是一个 JavaScript 编译器,核心作用是把新语法写的代码“翻译”成旧环境也能运行的等效代码,比如把 ES2022 的 ?.(可选链)转成带 if 判断的传统写法。
它解决什么问题?
浏览器和 Node.js 版本更新慢,新标准(如 ES2023+)特性不能立刻用。Babel 让你能放心写现代语法,同时兼容老版本运行环境。
- 支持实验性语法(需插件,如装饰器
@) - 转换箭头函数、解构、async/await、类字段等
- 可按目标环境自动决定哪些语法要转(通过
browserslist配置)
转换过程分三步:解析 → 转换 → 生成
不是简单字符串替换,而是基于抽象语法树(AST)操作:
- 解析(Parse):把源码转成 AST(树状结构,描述代码逻辑)
-
转换(Transform):遍历 AST,用插件修改节点(如把
const换成var,展开扩展运算符) - 生成(Generate):把改完的 AST 输出为字符串代码
实际用起来什么样?
你写:
立即学习“Java免费学习笔记(深入)”;
const arr = [1, 2, 3];
const doubled = arr.map((x) => x * 2);
Babel(配合 @babel/preset-env)可能输出:
var arr = [1, 2, 3];
var doubled = arr.map(function (x) {
return x * 2;
});
是否转、怎么转,取决于你的配置——比如设 targets: { chrome: "50" },它就知道 const 和箭头函数都要降级。
基本上就这些。不复杂但容易忽略的是:Babel 只处理语法转换,不补 API(如 Promise、Array.from),那些得靠 polyfill 或 runtime 注入。










