Script1002:IE11中的语法错误，带有React Babel WebPack

Question

我正在尝试使用WebPack Babel在IE> = 11中运行ES2015功能的React应用程序。使用inferno-compat层是自定义的，因此此处未使用create-react-app。

但是 - 尽管将最新的babel-polyfill和babel-preset-env练习应用于我的.babelrc和WebPack配置，但我仍然在尝试使用IE11访问该应用程序时，在我的bundle.js中仍会在我的bundle.js中获得 script1002：stytax error 。/p>

当我遵循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"]
        }
      }
    ]
  ]
}

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

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

有什么想法让它在IE11中运行什么？

Answer 1

我发现了这个问题。我将模块rambdax用作我的DEVDEDEDENCIES之一，其中包含用ES6语法编写的源代码（未移交给ES5） - 更具体地说，是直接包含在我的bundle.js中的箭头函数=>。IE11当然无法执行箭头或任何其他ES6语法。

不幸的是，babel和webpack（uglifyjs插件）都不会在编译捆绑包时触摸导入的node_modules的来源，这意味着：导入为ES6的模块源代码将保留在您的WebPack bundle.js中。

。 。

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

我也已经在" Rambdax"存储库中提出了有关此问题的问题。您可以在那里找到更多有关它的信息：https：//github.com/selfrefactor/rambdax/issues/4

Answer 2

不确定是否仍然是问题。

使用WebPack 4，我已经完成了

{    测试：/ .js$/，    包括： [       //绝对通往模块的路径    这是给出的}

包含的模块穿过babel钩。

Answer 3

我遇到了与此处提到的Voodood相同的问题：https：//stackoverflow.com/a/47695625/47695625/44447655

IE在第三方库中抱怨脂肪箭头函数=> socket.io-client（库在其来源中说了有关ModuleConcatenation bailout: Module is not an ECMAScript module的内容），我知道我将此库更新为最新版本（2.3.0）（2.3.0）。将此软件包降级到先前使用的版本（2.0.3）为我解决了一个问题。

我使用Babel 7.7.4 React WebPack 4，Babel-Loader，Polyfill等，因此我的WebPack配置和将ES6转换为Ecmascript并不问题。

Answer 4

在使用WebPack 5：

的情况下

在运行时代码中关闭ES2015语法，如有必要

默认情况下，WebPack的运行时代码使用ES2015语法来构建较小的捆绑。如果您的构建目标环境不支持这一点语法（如IE11），您需要将目标设置为：['Web'，'es5']还原为ES5语法（如果目标环境是浏览器）。

来源。