Babel：让新版 JavaScript 代码跑在所有浏览器上

JavaScript 每年都在推出新的语法特性，但浏览器的跟进速度参差不齐。你在项目里用了 ??、?. 或者顶层 await，结果老版本 Chrome 或者 Node 直接报错。这就是 Babel 要解决的问题。

Babel 是一个 JavaScript 编译器，目前在 GitHub 上获得了超过 43,000 个 Star。它的职责很明确：把你写的最新语法代码，转换成目标环境能运行的旧版本代码。

举个具体例子。ES2020 引入了空值合并运算符 ??：

function greet(input) {
  return input ?? "Hello world";
}

经过 Babel 编译后变成：

function greet(input) {
  return input != null ? input : "Hello world";
}

输出结果一致，但后者任何浏览器都能执行。开发时不需要在语法层面做妥协，构建阶段交给 Babel 处理就行。

核心机制

Babel 的编译过程分为三个阶段：解析（Parse）、转换（Transform）、生成（Generate）。

解析阶段把源代码转成 AST（抽象语法树）。转换阶段通过插件逐个修改 AST 节点，比如把箭头函数转成普通函数、把解构赋值展开成直接赋值。生成阶段再把修改后的 AST 还原为代码字符串。

这套插件化的架构意味着你可以按需组合。项目只用到 async/await？装一个 @babel/plugin-transform-async-to-generator 就够了。不需要把整个 ES2015+ 全部编译一遍。

插件与预设

单独配置每个插件很繁琐，所以 Babel 提供了预设（Preset）。最常用的是 @babel/preset-env，它根据你指定的目标环境（比如 last 2 versions 或者具体浏览器版本），自动决定需要启用哪些转换插件。

// babel.config.json
{
  "presets": [
    ["@babel/preset-env", {
      "targets": "> 0.25%, not dead"
    }]
  ]
}

这种按环境自动判断的方式，避免了引入不必要的转换，生成的代码也更精简。

工程集成

Babel 几乎可以嵌入任何前端构建流程：

• Webpack：通过 babel-loader 在打包时自动调用 Babel 编译
• Vite：内置了 @vitejs/plugin-react，底层依赖 Babel 处理 JSX
• ESLint：@babel/eslint-parser 让 ESLint 能解析 Babel 支持的语法
• Jest：测试框架默认用 Babel 转译代码，确保测试环境和构建环境一致

大部分情况下安装 @babel/core 和对应的预设就完成了，不需要额外配置。

TC39 提案跟进

Babel 团队长期参与 TC39 标准的制定过程。很多处于 Stage 1 到 Stage 3 的提案，Babel 会率先实现对应的插件。这意味着你可以在标准正式落地之前，就在项目中试用这些新特性。

团队在 GitHub 上维护了 babel/proposals 仓库，记录了每个提案的跟进状态。对于需要提前验证新语法可行性的团队来说，这个能力比较实用。

社区与维护

Babel 由志愿者团队维护，项目通过 Open Collective 接受赞助。文档站 babeljs.io 上有完整的配置指南和 REPL 在线编辑器，可以实时查看编译前后的代码对比。

项目采用 monorepo 结构，所有插件和预设作为独立的 npm 包发布，版本号统一管理。这种结构让社区贡献单个插件的修复或功能变得比较方便。

对于前端开发者来说，Babel 不是"要不要用"的问题，而是"已经用了"的问题。React 的 JSX、TypeScript 的部分语法糖、各种新标准 API 的 polyfill，背后都离不开 Babel 的编译和转换。它已经成了 JavaScript 工具链中默认存在的一环。

的部分语法糖、各种新标准 API 的 polyfill，背后都离不开 Babel 的编译和转换。它已经成了 JavaScript 工具链中默认存在的一环。