为什么用了@babel/preset-env后箭头函数没被转译？

Mr-金利提问于 2026-02-15 11:48:25 阅读 14

工具

折腾了一下午还是没解决，项目里用了Babel和@babel/preset-env配置了targets，但箭头函数在打包后居然没转译成普通函数，Chrome没问题，用IE11直接报错。配置文件应该没问题啊…

这是我的.babelrc配置：


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

代码里就这么简单一句：

const add = (a, b) => a + b;

打包后的output.js里还是原封不动的箭头函数。试过删除node_modules重装，检查.browserslistrc文件，甚至手动加了@babel/polyfill，但都没用。是不是哪里漏配了？

我来解答赞 9 收藏

反馈

1 条解答

Mr.宁蒙 Lv1

我之前踩过这个坑，真的是折腾了好久才搞明白。你这个问题的根本原因是 Babel 的配置虽然看起来没问题，但很可能你的打包工具（比如 Webpack、Rollup 或者其他构建工具）并没有正确加载 Babel 的配置。

先说解决方法：检查你的打包工具配置，确保它真的调用了 Babel 并且应用了 .babelrc 文件。举个例子，如果你用的是 Webpack，需要在 webpack.config.js 里明确告诉它使用 Babel 加载器，像这样：

module.exports = {

  module: {

    rules: [

      {

        test: /.js$/,

        exclude: /node_modules/,

        use: {

          loader: 'babel-loader',

          options: {

            presets: ['@babel/preset-env']

          }

        }

      }

    ]

  }

};

我当时遇到的情况是，.babelrc 文件写得没错，但 Webpack 压根没用 babel-loader 处理代码，结果打包出来的文件完全没有被转译。你可以检查一下是不是这个原因。

另外，还有一种可能就是你的代码文件不在 Babel 的处理范围内。比如 .babelrc 默认只会对项目根目录下的文件生效，而如果你的代码文件放在某个子目录下，可能会被忽略。这种情况可以试试在 Babel 配置里加上 babel.config.js，它是全局生效的，覆盖范围更广：

module.exports = {

  presets: [

    ['@babel/preset-env', {

      useBuiltIns: 'usage',

      corejs: 3,

      targets: {

        ie: '11'

      }

    }]

  ]

};

最后再说一个容易忽略的地方：如果你的项目里有多个 Babel 配置文件（比如同时存在 .babelrc 和 babel.config.js），它们可能会互相冲突。建议统一用 babel.config.js，避免混乱。

总结一下：第一步确认打包工具是否正确加载了 Babel；第二步检查代码文件是否在 Babel 的处理范围内；第三步清理多余的配置文件，避免冲突。按照这些步骤排查，基本就能解决问题了。希望你能少走点弯路！

2026-02-15 12:01