17370845950

Babel 是一个 JavaScript 编译器，核心作用是将新标准语法（如 const、async/await、?.）转为旧环境兼容的等价代码，仅做语法转换（transpilation），不解释执行也不打包模块。

什么是 Babel？

Babel 是一个 JavaScript 编译器，核心作用是把用新标准写的代码（比如 const、async/await、class、可选链 ?.）转成旧环境能运行的等价代码（比如换成 var、Promise 链、函数表达式）。它不解释执行，也不打包模块，只做语法转换（transpilation）。

为什么浏览器/Node 不直接支持新语法？

JavaScript 标准（ECMAScript）每年更新，但浏览器和运行时实现有滞后性。比如 ??（空值合并运算符）2025 年才进入 ES2025，IE 完全不支持，旧版 Safari 13.1 之前也不支持；Array.prototype.toReversed() 是 ES2025 的，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 的复杂点不在安装，而在判断「哪些语法真需要转」「哪些 API 要补」「哪些环境该被放弃」——这些决策直接影响包体积和兼容边界。