Babel 配置怎么优化？@babel/preset-env 的 useBuiltIns 和 corejs 怎么选？

Question

仓乃文 · Accepted Answer

Babel 配置不当会导致两种极端：要么打包体积巨大（全量引入 polyfill），要么低版本浏览器白屏（缺少 polyfill）。useBuiltIns 的三个选项决定了 polyfill 的引入策略，选错直接影响产物体积和兼容性。

useBuiltIns 三种模式对比：
```
| 选项          | 行为                          | 体积影响     | 推荐度  |
|--------------|-------------------------------|------------|--------|
| false        | 不自动引入 polyfill            | 最小        | 不推荐  |
| entry        | 在入口文件全量引入              | 最大(~30KB) | 不推荐  |
| usage        | 按需引入，只引入用到的 API      | 较小        | 推荐    |
```

推荐配置：
```javascript
module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: "> 0.5%, last 2 versions, not dead",
        useBuiltIns: "usage",
        corejs: 3,
        modules: false,
      },
    ],
    [
      "@babel/preset-typescript",
      { isTSX: true, allExtensions: true },
    ],
    [
      "@babel/preset-react",
      { runtime: "automatic" },
    ],
  ],
  plugins: [
    "@babel/plugin-transform-runtime",
  ],
};
```

常见坑：
```
1. corejs 版本和 useBuiltIns 不匹配
   → useBuiltIns: "usage" 必须配合 corejs: 3
   → corejs: 2 已停止更新，缺少新 API 的 polyfill

2. @babel/plugin-transform-runtime 和 useBuiltIns 冲突
   → transform-runtime 处理辅助函数（classCallCheck 等）
   → useBuiltIns 处理 API polyfill（Promise.includes 等）
   → 两者职责不同，可以同时使用

3. Vite 项目不需要 Babel
   → Vite 使用 esbuild 编译，不需要 Babel
   → 只有需要兼容低版本浏览器时才加 @vitejs/plugin-legacy
```