SCRIPT1002:使用 React + Babel + Webpack 的 IE11 中的语法错误

IT技术 javascript reactjs internet-explorer webpack babeljs
2021-05-04 13:52:26

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

但是 - 尽管对我的和 webpack 配置应用了最新babel-polyfillbabel-preset-env实践,当我尝试使用 IE11 访问应用程序时.babelrc,我的bundle.js 中仍然出现SCRIPT1002: Syntax 错误

当我按照 IE 控制台中的语法错误参考进行操作时,这是生成的 bundle.js 中存在冲突的部分(特别是箭头函数):

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

  return x + y;
}

这些是 my 中的相关依赖项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个回答

我发现了这个问题。我将该modulerambdax用作我的 devDependencies 之一,其中包含以 ES6 语法编写的源代码(未转换为 ES5)——更具体地说=>,是直接包含在我的 bundle.js 中的箭头函数IE11 当然不能执行箭头函数或任何其他 ES6 语法。

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

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

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

不确定它是否仍然是一个问题。

使用 Webpack 4 我做到了

{
    测试:/\.js$/,
    包括: [
        // module的绝对路径 
    ]
}

包含的module通过 Babel hook。

我遇到了与此处提到的 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 没有问题。

在使用 webpack 5 的情况下:

如有必要,请关闭运行时代码中的 ES2015 语法

默认情况下,webpack 的运行时代码使用 ES2015 语法来构建更小的包。如果您的构建目标环境不支持此语法(如 IE11),则需要设置 target: ['web', 'es5'] 以恢复为 ES5 语法(如果目标环境是浏览器,则为'web')。