Babel 是将新版本 JavaScript（如 ES2015+）转为向后兼容代码（如 ES5）的编译器，解决浏览器对新特性支持不一的问题；它支持箭头函数、解构赋值、类、模块、async/await 等语法转换，并可通过插件实现 polyfill 注入、JSX/TS 支持及智能目标环境适配。
Babel 是一个 JavaScript 编译器，主要作用是把新版本的 JavaScript 代码（比如 ES2015+）转换成向后兼容的老版本代码（比如 ES5），让它们能在当前或旧版浏览器、Node.js环境中正常运行。
为什么浏览器不直接支持新语法？
浏览器对 JavaScript 新特性的支持是逐步推进的。比如可选链操作符（
）、空值合并操作符（
）、顶层 await、模块热替换等，可能在 Chrome 最新版已支持，但在 Safari 旧版、IE 或某些企业内网环境里完全不可用。Babel 填补了这个“时间差”——它不等所有环境都支持，而是提前帮你把新写法翻译成稳妥的老写法。
哪些代码通常需要 Babel 转换？
以下常见写法在未转换时，可能在部分环境中报错：
箭头函数：
解构赋值：
类和继承：
模块导入导出：
async/await：
Babel 不只是“降级”，还能做更多
Babel 的能力不止于语法转换。通过插件和预设（preset），它还能：
立即学习
“
Java免费学习笔记（深入）
”；
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
自动注入 polyfill（如 Promise、Array.from），补全缺失的全局 API
支持 JSX、TypeScript 语法，成为 React 或 TS 项目的标配工具
集成到构建流程（Webpack/Vite），实现开发时实时转译
配合 @babel/preset-env 智能判断目标环境，只转换需要的部分，减少冗余代码
简单例子：转换前 vs 转换后
原始代码（ES2020）：
const result = data?.items?.[0]?.name ?? 'default';
经 Babel 处理后（ES5 兼容）：
var _data$items, _data$items$;
var result = (_data$items = data == null ? void 0 : data.items) === null || _data$items === void 0 ? void 0 : (_data$items$ = _data$items[0]) === null || _data$items$ === void 0 ? void 0 : _data$items$.name || 'default';
基本上就这些。Babel 不复杂但容易忽略——它不是替代 JavaScript 的工具，而是让开发者敢用新特性、又不怕掉队的桥梁。
?.??const add = (a, b) => a + b;const { name, age } = user;class Animal { constructor(name) { this.name = name; } }import React from 'react'; export default App;async function fetchUser() { return await api.getUser(); }