为什么配置了Babel Presets后箭头函数没被转译？

慕容艳苹提问于 2026-02-06 02:00:31 阅读 127

工具

在Vue项目里安装了@babel/preset-env，配置了.babelrc文件，但箭头函数还是没被转译成普通函数。试过更新Babel版本，检查过浏览器列表配置，打包后代码里箭头函数还是原样，控制台报错说不支持这个语法，是不是哪里漏配了？


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

之前以为是preset-env默认包含了所有转换，后来发现可能需要单独加targets配置？但按照文档加了.browserslistrc也没用，到底是哪里有问题啊…

Babel

我来解答赞 7 收藏

反馈

2 条解答

シ秀云 Lv1

你这问题很典型，我之前也踩过。@babel/preset-env 确实不会默认转译所有语法，它会根据你的 targets 配置来决定要不要转箭头函数这些特性。

光装 preset-env 不够，得明确告诉它要支持哪些浏览器。你在 .browserslistrc 里加了配置没用，可能是打包工具没读到，或者格式不对。建议直接在 .babelrc 里写 targets：

{

  "presets": [

    ["@babel/preset-env", {

      "targets": {

        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]

      }

    }]

  ]

}

或者更简单点，用 .browserslistrc 文件内容：

> 1%

last 2 versions

not ie <= 8

然后确保你的构建工具（比如 webpack 或 vue-cli）没有覆盖 Browserslist 配置。Vue CLI 的话，还要检查 vue.config.js 有没有 chainWebpack 把 babel 排除了。

另外，性能上你也得注意，如果目标浏览器太老，转译出来的代码体积会变大，运行时性能也可能下降。所以别盲目全开转译，按实际用户环境来定。

最后清下缓存再 build，别让旧的打包结果骗了你。

2026-02-12 13:19

♫保霞 Lv1

你这问题很常见，我之前也踩过坑。preset-env 默认不会转译所有 ES6+ 特性，它会根据你项目中的 browserslist 配置按需转译。但如果你没在 browserslist 里正确声明目标浏览器，或者配置方式不对，箭头函数这种语法就不会被处理。

你只配了 presets，但没声明 targets，导致 Babel 不知道你要兼容哪些浏览器。直接在 .babelrc 里加 targets 是最直接的办法，像这样：

{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"chrome": "60",
"firefox": "55"
}
}
]
]
}

或者你也可以用 .browserslistrc：

1%
ie 11

但要注意，有些构建工具（比如 Vue CLI）会自己读取 browserslist 配置，Babel 反而不会自动读取。这时候你得把 targets 设为 "browserslist" 来告诉 Babel 使用全局配置：

{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"browserslist": true
}
}
]
]
}

最后跑一次 build，看打包后的代码，箭头函数应该就被转译了。如果还没转，检查下 Babel 和 preset-env 的版本是否一致，别用太老的版本。

2026-02-06 02:01