SCRIPT1002：使用 React Babel Webpack 在 IE11 中出现语法错误

Question

我正在尝试使用 Webpack + Babel 让我的 React App 具有在 IE >= 11 中运行的 ES2015 功能。设置是自定义的，使用 inferno-compat 层，所以这里没有使用 create-react-app 。

然而 - 尽管应用了最新的 babel-polyfill 和 babel-preset-env 实践到我的 .babelrc 和webpack.tax配置中的 webpack.tax：我仍然在我的SCRIPT配置中得到错误： 使用 IE11 访问应用程序。

当我按照 IEs 控制台中的语法错误参考进行操作时，这是生成的 bundle.js 中存在冲突的部分（尤其是箭头函数）：

 function add(x, y) {
  if (y === undefined) {
    return yHolder => add(x, yHolder);
  }

  return x + y;
}

这些是我的 package.json 中的相关依赖项：

 "dependencies": {
  "inferno-redux": "^3.10.1",
  "react": "^15.6.0",
  "react-dom": "^15.6.0",
  "react-ga": "^2.2.0",
  "react-swipeable": "^4.1.0",
  "redux": "^3.7.2",
  "redux-saga": "^0.16.0",
  "regenerator-runtime": "^0.11.0"
},
"devDependencies": {
  //... stuff

  "babel-cli": "^6.26.0",
  "babel-core": "^6.25.0",
  "babel-eslint": "^7.2.3",
  "babel-loader": "^7.1.1",
  "babel-plugin-inferno": "^3.2.0",
  "babel-plugin-module-resolver": "^2.7.1",
  "babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
  "babel-plugin-transform-es2015-spread": "^6.22.0",
  "babel-plugin-transform-regenerator": "^6.26.0",
  "babel-plugin-transform-runtime": "^6.23.0",
  "babel-polyfill": "^6.26.0",
  "babel-preset-env": "^1.6.1",
  "babel-preset-es2015": "^6.24.1",
  "babel-preset-flow": "^6.23.0",
  "babel-preset-react": "^6.24.1",

  //... some more stuff

  "webpack": "^3.8.1",
  "webpack-bundle-analyzer": "^2.9.1",
  "webpack-dev-middleware": "^1.12.2",
  "webpack-dev-server": "^2.9.5",
  "webpack-manifest-plugin": "^1.3.2",
  "webpack-merge": "^4.1.1",
}

这是我的 .babelrc ：

 {
  "presets":
    [
    "react",
    "flow",
    "es2015",
    [
      "env", {
        "modules": "commonjs",
        "targets": {
          "browsers": ["last 2 versions", "ie >= 11"]
        }
      }
    ]
  ]
}

我将 babel-polyfill 包含在我的 webpack.base.config.js 中：

 // ... stuff
entry: {
  index: ['babel-polyfill', './index.js'],
},
// ... more stuff

任何想法让它在 IE11 中运行缺少什么？

原文由 VoodooDS 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我发现了问题。我正在使用模块 rambdax 作为我的 devDependencies 之一，其中包含以 ES6 语法编写的源代码（未转换为 ES5） - 更具体地说是直接包含的箭头函数 => 在我的 bundle.js 中。 IE11 当然不能执行箭头函数或任何其他 ES6 语法。

不幸的是，Babel 和 Webpack（UglifyJS 插件）在编译 bundle.js 时都不会触及导入的 node_modules 的源代码，这意味着：作为 ES6 导入的模块源代码将在您的 webpack 中保留 ES6 bundle.js 。

有关此主题的更多信息，请参阅 https://github.com/facebookincubator/create-react-app/issues/1125 。

我也已经在“rambdax”存储库中提交了一个关于这个问题的问题。你可以在那里找到更多相关信息： https ://github.com/selfrefactor/rambdax/issues/4

原文由 VoodooDS 发布，翻译遵循 CC BY-SA 3.0 许可协议