Babel 配置与工具

官网：babeljs.io/ Babel 8 文档（RC 阶段）：next.babeljs.io/

1. 版本现状

Babel 7：最后一个 minor 版本 7.29.0（2026-01-31），进入维护模式
Babel 8：RC 阶段（最新 rc.3），正式版即将发布
核心变化 ：ESM-only 打包、移除长期废弃 API、preset-env 默认不再降级到 ES5

2. 核心包说明

@babel/core

Babel 核心库，提供 AST 解析、转换、代码生成等核心 API。

@babel/preset-env

智能预设，根据目标环境自动决定需要哪些语法转换和 polyfill。不会自动处理 node_modules。

core-js

JavaScript 标准库的 polyfill 实现，提供 Promise、Array.prototype.includes 等新 API。

@babel/plugin-transform-runtime

将辅助函数提取为 @babel/runtime 的导入，避免重复。配合 corejs 选项可注入不污染全局的 polyfill，适合库/组件开发。

Babel 8 中 @babel/plugin-transform-runtime 的 corejs 选项会被移除，推荐迁移到 babel-plugin-polyfill-corejs3。

@babel/polyfill（已废弃）

Babel 7.4 起废弃，是 core-js + regenerator-runtime 的集合。直接用 core-js 替代。

3. 配置文件

babel.config.json（推荐）

json 复制代码

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "> 0.25%, not dead",
        "useBuiltIns": "usage",
        "corejs": "3.41"
      }
    ],
    "@babel/preset-react"
  ]
}

Babel 8 支持 babel.config.ts / babel.config.mts（TypeScript 配置文件）。

babel.config.json 作用于整个项目（含 node_modules 中的符号链接包），.babelrc 仅作用于单个 package。

关键配置项

targets

指定目标浏览器/环境，Babel 按此决定哪些语法需要转换、哪些 polyfill 需要注入。

可写在 babel.config.json 顶层、@babel/preset-env 选项中
优先级：preset-env 的 targets > 配置文件顶层 targets > package.json 的 browserslist > .browserslistrc

json 复制代码

{
  "targets": {
    "chrome": "80",
    "firefox": "75",
    "safari": "13"
  }
}

browserslist

在 package.json 或 .browserslistrc 中定义：

markdown 复制代码

> 0.5%
last 2 versions
not dead
not ie 11

useBuiltIns

值	说明
`false`	默认，不自动注入 polyfill
`"usage"`	推荐 --- 按需引入，扫描代码中实际使用的 API，自动注入目标环境缺失的 polyfill
`"entry"`	入口引入，需手动 `import 'core-js/stable'`，Babel 根据 targets 替换为所需的 polyfill

设置 useBuiltIns: "usage" 或 "entry" 时，必须同时指定 corejs 版本号。

modules

设为 false 可保留 ES Module 语法，让 webpack 等打包工具进行 tree-shaking。

4. 两种 polyfill 策略

策略 A：应用开发 --- `preset-env` + `useBuiltIns`

json 复制代码

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": "3.41",
        "modules": false
      }
    ]
  ]
}

✅ 依赖 .browserslistrc / targets 智能裁剪，体积最优
❌ 会污染全局作用域（修改 Array.prototype 等）

策略 B：库/组件开发 --- `transform-runtime`

json 复制代码

{
  "presets": [
    ["@babel/preset-env", { "modules": false }]
  ],
  "plugins": [
    ["@babel/plugin-transform-runtime", { "corejs": 3 }]
  ]
}

需安装 @babel/runtime-corejs3 作为生产依赖：

bash 复制代码

npm install --save-dev @babel/plugin-transform-runtime
npm install @babel/runtime-corejs3

✅ 不污染全局作用域，适合发布 npm 包
❌ 不利用 targets 裁剪，所有用到的 polyfill 都注入

两种方案互斥 --- 使用 transform-runtime 时不要设置 useBuiltIns。

5. 未来方案：babel-plugin-polyfill-corejs3

Babel 团队推出的新一代 polyfill 插件，统一了 preset-env 和 transform-runtime 的 polyfill 注入方式。

bash 复制代码

npm install --save-dev babel-plugin-polyfill-corejs3

json 复制代码

{
  "targets": { "chrome": "80" },
  "presets": ["@babel/preset-env"],
  "plugins": [
    ["polyfill-corejs3", {
      "method": "usage-global",
      "version": "3.41"
    }]
  ]
}

三种注入方式：

method	对标原有配置	说明
`entry-global`	`useBuiltIns: "entry"`	全局入口方式
`usage-global`	`useBuiltIns: "usage"`	按需 + 全局污染
`usage-pure`	`transform-runtime` + `corejs`	按需 + 不污染 + 利用 targets

使用此方案时 targets 必须放在配置文件顶层。

6. 与 webpack 集成

js 复制代码

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {
                useBuiltIns: 'usage',
                corejs: 3,
                modules: false
              }],
              '@babel/preset-react'
            ],
            plugins: ['@babel/plugin-transform-runtime']
          }
        }
      }
    ]
  }
};

推荐将 Babel 配置抽离到 babel.config.json，webpack 中只声明 loader：

js 复制代码

{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'babel-loader'
}

7. Babel 8 迁移要点

ESM-only：所有包仅发布 ESM 格式
preset-env 默认值变更 ：不再降级到 ES5，遵循 browserslist 的 defaults
移除 transform-runtime 的 corejs 选项 ：改用 babel-plugin-polyfill-corejs3
原生 TypeScript 配置 ：支持 babel.config.ts
详见 Babel 8 迁移指南

Babel 配置与工具