React+Webpack生产环境IE11无法运行问题排查求助

我来帮你一步步排查这个IE11兼容性问题，SCRIPT1002: Syntax error本质是IE11无法识别代码中的ES6+语法，结合你的React 15.4.1 + Webpack 2.2.1技术栈，给你以下调试和修复方案：

Webpack 2默认不会转译node_modules里的依赖，但部分第三方库可能包含未转译的ES6语法，IE11无法解析。你需要调整转译范围：

• 确保.babelrc配置了适配React 15的正确预设：

{
  "presets": [
    ["es2015", { "modules": false }],
    "react"
  ]
}

• 在Webpack配置中，修改babel-loader的规则，不要直接排除所有node_modules，而是仅排除明确已转译完成的库，或者指定需要转译的依赖：

module: {
  rules: [
    {
      test: /\.jsx?$/,
      loader: 'babel-loader',
      // 示例：如果xxx-lib和yyy-lib用了ES6语法，就把它们从排除列表中移除
      exclude: /node_modules\/(?!(xxx-lib|yyy-lib)\/)/,
      include: [path.resolve(__dirname, 'src')]
    }
  ]
}

Webpack 2自带的UglifyJsPlugin默认可能会忽略IE11的兼容性，比如保留箭头函数、const/let等语法。你需要手动配置兼容选项：

const webpack = require('webpack');

module.exports = {
  // ...其他配置项
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        screw_ie8: false // 关键：不要排除IE8+版本，IE11属于这个范围
      },
      mangle: {
        screw_ie8: false
      },
      output: {
        comments: false,
        screw_ie8: false
      }
    })
  ]
};

React 15.4.1依赖一些ES6+ API（比如Promise），而IE11没有原生支持这些API，你需要提前注入Polyfill：

• 安装依赖：

npm install babel-polyfill --save

• 在项目入口文件（比如src/index.js）的最顶部添加：

import 'babel-polyfill';

或者直接在Webpack的entry配置中引入：

entry: ['babel-polyfill', './src/index.js']

要精准找到vendor.js中出错的代码段，可以借助Source Map：

• 在Webpack生产配置中开启Source Map：

devtool: 'source-map'

• 打开IE11的开发者工具，点击错误对应的行号，Source Map会帮你映射到原始代码，就能知道是哪个依赖或代码片段用了不兼容语法，再针对性处理。

用es-check工具快速检查打包后的JS是否符合IE11支持的ES5标准：

• 安装工具：

npm install es-check --save-dev

• 在package.json的scripts中添加检查命令：

"scripts": {
  "check-es-compat": "es-check es5 './dist/vendor.js' './dist/main.js'"
}

• 运行检查：

npm run check-es-compat

工具会直接告诉你哪些文件包含ES6+语法，帮你快速定位问题点。

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