AngularJS+Webpack项目中Babel未转换箭头函数问题求助

你的问题核心在于Babel的env预设没有根据目标环境（IE9+最新3个浏览器版本）正确启用箭头函数的转换规则。下面是一步步的排查和修复方案：

1. 修正.babelrc的@babel/preset-env配置 #

首先确保你的env预设明确指定了目标环境，并且启用了必要的polyfill和模块处理。更新你的.babelrc如下：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "ie": "9",
        "chrome": "last 3 versions",
        "firefox": "last 3 versions",
        "safari": "last 3 versions"
      },
      "useBuiltIns": "usage",
      "corejs": 3,
      "modules": false // Webpack负责模块打包，禁用Babel的模块转换
    }]
  ],
  "plugins": [
    "@babel/plugin-transform-object-rest-spread",
    "dynamic-import-node"
  ]
}

关键说明： #

• targets明确包含ie: "9"，这会触发Babel自动加载@babel/plugin-transform-arrow-functions等必要转换插件（无需手动添加）；
• useBuiltIns: "usage"会根据代码实际使用的特性自动注入polyfill，避免冗余代码；
• corejs: 3指定使用最新的core-js版本，确保IE9环境下的API兼容性。

2. 对齐Webpack与Babel的配置 #

检查Webpack中的babel-loader配置，避免覆盖.babelrc的设置。如果你的Webpack配置里给babel-loader写了options，建议移除这些选项，让它直接读取.babelrc：

// webpack.config.js
module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: "babel-loader" // 不要在这里重复设置presets/plugins，避免冲突
      }
    ]
  }
};

3. 确认依赖安装完整 #

确保你安装了所有必要的Babel相关依赖（如果之前用的是旧版babel-preset-env，建议升级到@babel生态）：

# 安装开发依赖
npm install --save-dev @babel/core @babel/preset-env @babel/plugin-transform-object-rest-spread dynamic-import-node
# 安装core-js用于polyfill
npm install core-js@3

4. 验证转换效果 #

可以用Babel CLI单独测试一个包含箭头函数的文件，确认转换是否生效：

npx babel src/your-test-file.js --out-file output.js

打开output.js，检查箭头函数是否被转换成了普通的function表达式。

额外注意事项 #

• 如果你的项目中还使用了其他ES6+特性，@babel/preset-env会根据targets自动处理对应的转换，无需手动添加大量插件；
• 确保AngularJS本身的IE9兼容性：AngularJS 1.x对IE9的支持需要一些额外配置（比如禁用ngAnimate的某些特性），但这和箭头函数转换是独立的问题。

内容的提问来源于stack exchange，提问作者Rajesh p