SCRIPT1002:IE11中的语法错误,包含React + Babel + Webpack

时间:2017-12-06 10:43:17

标签: javascript reactjs internet-explorer webpack babeljs

我试图使用Webpack + Babel在IE> = 11中运行ES2015功能的React App。设置是自定义的,使用inferno-compat图层,因此此处不使用create-react-app

但是 - 尽管将最新的babel-polyfillbabel-preset-env做法应用到我的.babelrc和webpack配置中,我仍然在我的包中收到 SCRIPT1002:语法错误 .js尝试使用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中运行,还有什么想法?

4 个答案:

答案 0 :(得分:10)

我发现了这个问题。我正在使用模块<iframe src="example.com/payment" sandbox="allow-same-origin allow-top-navigation allow-forms allow-scripts"></iframe> 作为我的devDependencies之一,其中包含用ES6语法编写的源代码(未转换为ES5) - 更具体地说,直接包含在我的包中的arrow-functions rambdax。 JS。 IE11当然不能执行箭头功能或任何其他ES6语法。

不幸的是,在编译bundle.js时,Babel和Webpack(UglifyJS插件)都不会触及导入的node_modules的源,这意味着:作为ES6导入的模块源代码将保留在webpack =>中的ES6。 / p>

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

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

答案 1 :(得分:0)

不确定它是否还是个问题。

使用Webpack 4我已经完成了

{
    test: /\.js$/,
    include: [
        // absolute path to module 
    ]
}

包含的模块通过Babel hook。

答案 2 :(得分:0)

我遇到了与此处提到的VoodooDS相同的问题:https://stackoverflow.com/a/47695625/4447655

IE正在抱怨第三方库socket.io-client中的胖箭头功能=>(该库在其源代码中提到了ModuleConcatenation bailout: Module is not an ECMAScript module的某些内容),我知道我已将该库更新为最新版本(2.3.0)。将该软件包降级到以前使用的版本(2.0.3)对我来说解决了一个问题。

我使用Babel 7.7.4 + React + Webpack 4,babel-loader,polyfill等,因此我的webpack配置和将ES6移植到ECMAScript都不成问题。

答案 3 :(得分:0)

对于webpack 5:

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

默认情况下,webpack的运行时代码使用ES2015语法来构建较小的 捆绑。如果您的构建针对不支持此功能的环境 语法(例如IE11),则需要将目标:['web','es5']设置为 恢复为ES5语法(如果目标环境是浏览器,则为“ web”)。

source