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

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

工具

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

我的 .babelrc 是这样写的：

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

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

我来解答赞 8 收藏

反馈

2 条解答

Mr-新霞 Lv1

你的配置写法本身没问题，targets: { ie: "11" } 是正确的格式。

问题大概率出在 browserslist 覆盖了你的 targets。如果项目根目录有 .browserslistrc 文件，或者 package.json 里写了 browserslist 字段，这些会优先生效，把你的 targets 配置直接无视掉。

你可以先检查一下这两个地方有没有配置。如果确实有，删掉或者改成你想要的目标浏览器就行。

另外有个点要注意：preset-env 默认只转换语法层面的东西，比如箭头函数、模板字符串这些。但模块语法（import/export）默认不转，因为要配合 webpack 做 tree-shaking。如果你用的是 webpack 生产模式，打包出来的代码可能还是会保留一些 ES6 语法，这是正常的，不是转译失败。

如果确认没有 browserslist 覆盖，还是不行的话，可以试试把配置改成这样：

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

或者直接在 package.json 里加：

"browserslist": [
"ie 11"
]

这样 browserslist 和 targets 都指向同一个目标，应该就不会冲突了。

2026-03-12 16:08

设计师开心 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