Babel配置了preset-env为什么箭头函数没转译？

Designer°乙涵提问于 2026-02-16 16:33:25 阅读 44

工具

我在React项目里配置了@babel/preset-env，但代码里的箭头函数没转译成ES5，这是怎么回事？

项目里用了.babelrc配置：


{
  "presets": ["@babel/preset-env"]
}

已经安装了@babel/core和preset-env，目标浏览器是IE11。但编译后的代码里箭头函数依然存在，其他ES6语法倒是转了。是不是少了什么插件？

我来解答赞 6 收藏

反馈

2 条解答

小钰欣 Lv1

箭头函数属于 transform 而不是 syntax，preset-env 需要知道目标浏览器才会转译。

在 .babelrc 里改成这样：

{

  "presets": [

    ["@babel/preset-env", {

      "targets": {

        "ie": "11"

      }

    }]

  ]

}

或者在 package.json 里加 browserslist 配置：

"browserslist": [

  "ie 11"

]

不配置 targets 的话，preset-env 不知道要兼容 IE11，默认就不转箭头函数。

2026-03-13 10:12

南宫素香 Lv1

你这个问题是因为 @babel/preset-env 默认只会转译那些目标浏览器不支持的语法，而箭头函数在某些情况下可能被认为“可被支持”，所以它没被转译。你需要明确指定目标浏览器是 IE11，并确保配置正确。

代码放这了，修改你的 .babelrc 配置：

{

  "presets": [

    ["@babel/preset-env", {

      "targets": {

        "ie": "11"

      }

    }]

  ]

}

另外，如果你用的是 React，默认的 JSX 转译不会处理箭头函数，所以确保你装了 @babel/preset-react 并且也加到 presets 里。完整的配置应该是这样的：

{

  "presets": [

    ["@babel/preset-env", {

      "targets": {

        "ie": "11"

      }

    }],

    "@babel/preset-react"

  ]

}

最后别忘了重启构建工具，有时候缓存会让你怀疑人生。如果还是不行，检查下是不是有其他插件或者工具链冲突了，比如 Webpack 的 loader 配置。我以前就被坑过好几次，真是烦。

2026-02-16 17:02