Babel 是一个 JavaScript 编译器，核心作用是将新标准语法（如 const、async/await、?.）转为旧环境兼容的等价代码，仅做语法转换（transpilation），不解释执行也不打包模块。
什么是 Babel？
Babel 是一个 JavaScript 编译器，核心作用是把用新标准写的代码（比如 const、async/await、class、可选链 ?.）转成旧环境能运行的等价代码（比如换成 var、Promise 链、函数表达式）。它不解释执行，也不打包模块，只做语法转换（transpilation）。
为什么浏览器/Node 不直接支持新语法？
JavaScript 标准（ECMAScript）每年更新，但浏览器和运行时实现有滞后性。比如 ??（空值合并运算符）2020 年才进入 ES2020，IE 完全不支持，旧版 Safari 13.1 之前也不支持；Array.prototype.toReversed() 是 ES2023 的，Chrome 117+ 才支持。Babel 填补了「你写得爽」和「用户跑得动」之间的 gap。
不转换会遇到哪些典型错误？
常见现象包括：
php中级教程之ajax技术
下载
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。它不是新的编程语言，而是一种使用现有标准的新方法，最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容，不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。《php中级教程之ajax技术》带你快速
-
SyntaxError: Unexpected token 'const'（IE 或老版 Android WebView） -
SyntaxError: Unexpected identifier 'await'（Node.js v6 或未开启--harmony-async-await） -
TypeError: Cannot use import statement outside a module（在不支持原生 ES 模块的环境中直接运行import） - 页面白屏且控制台静默报错（某些低版本微信内置浏览器对解构赋值或箭头函数解析失败但不抛异常）
怎么配 Babel 才不踩坑？
关键不是装上就完事，而是明确目标环境再选插件/预设：
- 用
@babel/preset-env替代一堆零散插件，它会根据browserslist配置自动决定需要转哪些语法 -
browserslist写法要具体，避免模糊表述："last 2 versions, not dead, > 1%"可行，"supports es6"无效 - JSX、TypeScript、动态
import()等非标准语法需额外加@babel/preset-react或@babel/preset-typescript - 注意
core-js：Babel 只转语法，不补 API（如Array.from、Object.assign），需手动引入 polyfill 或用@babel/polyfill（已废弃）+core-js/stable
module.exports = {
presets: [
['@babel/preset-env', {
targets: { node: 'current' }, // 或使用 browserslist
useBuiltIns: 'usage',
corejs: 3
}]
]
};
Babel 的复杂点不在安装，而在判断「哪些语法真需要转」「哪些 API 要补」「哪些环境该被放弃」——这些决策直接影响包体积和兼容边界。 
