Babel是什么？新语法为何重要？

Babel 是一个专注于语法转换（transpilation）的 JavaScript 编译器，它将开发者钟爱的新标准语法（如 const、async/await、可选链?.、空值合并??等）自动降级为旧版浏览器和运行时（如IE、老旧Safari或低版本Node.js）能够安全执行的等价代码，从而弥合语言演进与环境支持之间的鸿沟；它不解释执行、不打包模块，但需配合合理的配置（如 @babel/preset-env + browserslist + core-js）才能精准平衡兼容性、包体积与开发体验——用得好，让你写得前沿、跑得广泛；配错了，轻则白屏静默失败，重则徒增冗余代码。

什么是 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。

不转换会遇到哪些典型错误？

常见现象包括：

• 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是什么？新语法为何重要？》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！