Babel 的 targets 配置到底该怎么写才生效？

令狐煜喆提问于 2026-02-25 09:18:23 阅读 14

工具

我最近在项目里用 Babel 转译代码，想兼容到 IE11，但发现配置了 targets: { ie: '11' } 后，生成的代码还是用了箭头函数，明显没转成 ES5。是不是我写法有问题？

我的 .babelrc 是这样写的：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "ie": "11"
      }
    }]
  ]
}

但打包出来的代码里还是有 () => {}，这不应该啊？是不是还要配别的选项？

我来解答赞 2 收藏

反馈

1 条解答

设计师开心 Lv1

你这个配置写法本身没错，但问题出在 Babel 默认只转译语法（syntax），不自动注入 polyfill，所以像箭头函数这种语法，如果目标浏览器支持的话，它就不会转。

但 IE11 明确不支持箭头函数，那为什么没转？因为 @babel/preset-env 默认的 useBuiltIns 是 "usage" 或 "false"，得配合 core-js 才能正确处理 polyfill 和语法降级。

你得加两步：

第一，安装依赖：

npm install --save-dev @babel/preset-env @babel/core core-js

第二，把 .babelrc 改成这样：

{

  "presets": [

    ["@babel/preset-env", {

      "targets": {

        "ie": "11"

      },

      "useBuiltIns": "usage",

      "corejs": 3

    }]

  ]

}

注意 useBuiltIns: "usage" 是关键，它会根据你代码里用到的 API 和目标浏览器自动注入需要的 polyfill，同时也会让 Babel 知道“这个浏览器不支持箭头函数”，从而把 () => {} 转成 function () {}。

别忘了你项目里还得 import core-js/stable 和 regenerator-runtime/runtime（如果用了 async/await），或者用 @babel/polyfill（但那个已经废弃了，别用）。

顺带说一句，如果还是不转，可能你用了 Babel 7.4+ 的默认行为，或者 Webpack 里 loader 没走 Babel（比如你只配了 .babelrc，但 Webpack 用的是 babel-loader 的 inline options 覆盖了配置），这种情况得检查下 loader 配置是不是也显式传了 presets。

JS 里这种“看起来配了但没生效”的坑我踩过无数次，真不是你一个人的事，多看一眼生成的 package.json 里有没有 browserslist 字段，有时候它会偷偷覆盖 Babel 的 targets。

2026-02-25 09:26