为什么我的Babel配置中的browserslist设置没生效？

W″逸龙提问于 2026-01-26 23:41:22 阅读 45

工具

我在项目根目录设置了.browserslistrc指定兼容IE11，但打包后的代码里还是有箭头函数报错。已经检查过配置文件路径没问题，也删了node_modules和.lock文件重装了，babel-preset-env版本也装了最新版。是不是和package.json里的其他配置冲突了？

这是我的配置：

[".browserslistrc内容：
ie 11
extends @babel/preset-env">

["package.json里的babel配置：
"presets": [
  ["@babel/preset-env", {
    "useBuiltIns": "usage",
    "corejs": 3
  }]
]">

打包后的bundle.js里还是有箭头函数，控制台提示IE11不支持。搞不懂哪里出问题了…

Babel

我来解答赞 11 收藏

反馈

2 条解答

照南~ Lv1

看起来问题出在配置的细节上。你写的 .browserslistrc 文件内容有点奇怪，那行 extends @babel/preset-env 是多余的，Babel 并不会这样去扩展预设。建议改成只保留目标浏览器的声明：

ie 11

另外，你的 Babel 配置里缺少一个关键选项 targets。虽然 @babel/preset-env 会自动读取 .browserslistrc 的内容，但最好还是显式声明一下，避免潜在的问题。改一下 package.json 里的 Babel 配置，像这样：

"presets": [

  ["@babel/preset-env", {

    "useBuiltIns": "usage",

    "corejs": 3,

    "targets": {

      "browsers": ["ie 11"]

    }

  }]

]

还有一点需要注意，确保你的构建工具（比如 Webpack、Vite 等）没有额外的 Babel 配置覆盖了这些设置。有时候构建工具的默认配置或者插件会偷偷带入一些自己的规则，导致预期之外的行为。

最后吐槽一句，Babel 的配置确实挺容易踩坑的，尤其是涉及到多层继承的时候。改完上面这些，记得清理缓存重新打包，应该就没问题了。如果还有箭头函数残留，可以检查一下是不是某些第三方依赖没被正确转译，这种情况下可能需要额外配置 include 或者 exclude 规则。

2026-02-17 23:05

UE丶冰冰 Lv1

你这问题是 browserslist 没正确被 Babel 读到。省事的话，直接在 package.json 里加个 browserslist 字段就行了，别用外部文件。

{

  "browserslist": [

    "ie 11"

  ],

  "presets": [

    ["@babel/preset-env", {

      "useBuiltIns": "usage",

      "corejs": 3

    }]

  ]

}

再重新打包试试，应该就不会有箭头函数了。要是还不行，可能是别的插件干扰，逐步排查吧。

2026-01-28 21:08