Webpack环境下Babel未转译箭头函数问题求助

看起来你的问题核心在于Babel没有正确识别目标浏览器环境，导致箭头函数这类ES6语法没被转译成IE10兼容的ES5代码。结合你给出的依赖版本（Babel 6.x），我给你一套针对性的解决方案：

1. 优化Babel配置文件（.babelrc） #

你同时安装了babel-preset-es2015和babel-preset-env，其实env预设已经包含了es2015的功能，两者混用可能会导致配置冲突。建议移除es2015，并给env明确指定目标浏览器：

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "ie >= 10"]
      },
      "useBuiltIns": "entry", // 按需引入polyfill（可选但推荐）
      "modules": false // 禁用Babel的模块转译，交给Webpack处理，利于Tree Shaking
    }],
    "react" // 保留React预设处理JSX
  ]
}

关键配置说明： #

• targets.browsers：明确告诉Babel要兼容到IE10，它会自动根据这个目标转译所有不兼容的语法（包括箭头函数）。
• modules: false：因为Webpack本身会处理ES模块导入导出，关闭Babel的模块转译可以避免额外的代码转换，同时不影响Tree Shaking功能。

2. 检查Webpack的babel-loader配置 #

确保你的Webpack配置中，babel-loader正确应用到了所有需要转译的JS/JSX文件：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.jsx?$/, // 匹配.js和.jsx文件
        exclude: /node_modules/, // 默认排除node_modules（如果某些依赖也需要转译，可以去掉这条或添加include）
        use: 'babel-loader'
      }
    ]
  }
};

注意：如果你的项目依赖了某些未转译ES6语法的第三方库（比如某些现代UI组件库），可以把这些库加入include列表，让Babel一并转译：

include: [
  path.resolve(__dirname, 'src'),
  path.resolve(__dirname, 'node_modules/your-untranspiled-library')
]

3. 补充Polyfill（可选但必要） #

IE10不仅不支持箭头函数，还缺少很多ES6+的内置API（比如Promise、Array.prototype.includes等）。如果你的代码用到了这些API，需要在项目入口文件顶部引入babel-polyfill：

// 比如src/index.js的最顶部
import 'babel-polyfill';

// 你的其他代码
import React from 'react';
import ReactDOM from 'react-dom';
// ...

4. 验证修复效果 #

重新运行Webpack构建命令（比如npm run build），然后打开生成的bundle.js，搜索箭头函数符号=>。如果配置正确，你应该找不到任何箭头函数了，此时在IE10中运行页面就不会再出现语法错误。

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