Babel 是将新版本 JavaScript（如 ES2015+）转为向后兼容代码（如 ES5）的编译器，解决浏览器对新特性支持不一的问题；它支持箭头函数、解构赋值、类、模块、async/await 等语法转换，并可通过插件实现 polyfill 注入、JSX/TS 支持及智能目标环境适配。
Babel 是一个 JavaScript 编译器，主要作用是把新版本的 JavaScript 代码（比如 ES2015+）转换成向后兼容的老版本代码（比如 ES5），让它们能在当前或旧版浏览器、Node.js 环境中正常运行。
为什么浏览器不直接支持新语法？
浏览器对 JavaScript 新特性的支持是逐步推进的。比如可选链操作符（?.）、空值合并操作符（??）、顶层 await、模块热替换等，可能在 Chrome 最新版已支持，但在 Safari 旧版、IE 或某些企业内网环境里完全不可用。Babel 填补了这个“时间差”——它不等所有环境都支持，而是提前帮你把新写法翻译成稳妥的老写法。
哪些代码通常需要 Babel 转换？
以下常见写法在未转换时，可能在部分环境中报错：
- 箭头函数：
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/await：
async function fetchUser() { return await api.getUser(); }
Babel 不只是“降级”，还能做更多
Babel 的能力不止于语法转换。通过插件和预设（preset），它还能：
立即学习“Java免费学习笔记（深入）”；
Flex3组件和框架的生命周期 中文WORD版
下载
在整本书中我们所涉及许多的Flex框架源码，但为了简洁，我们不总是显示所指的代码。当你阅读这本书时，要求你打开Flex Builder，或能够访问Flex3框架的源码，跟随着我们所讨论源码是怎么工作及为什么这样做。 如果你跟着阅读源码，请注意，我们经常跳过功能或者具体的代码，以便我们可以对应当前的主题。这样能防止我们远离当前的主题，主要是讲解代码的微妙之处。这并不是说那些代码的作用不重要，而是那些代码处理特别的案例，防止潜在的错误或在生命周期的后面来处理，只是我们当前没有讨论它。有需要的朋友可以下载看看
- 自动注入 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 的工具，而是让开发者敢用新特性、又不怕掉队的桥梁。
