web-dev-qa-db-ja.com

SCRIPT1002：IE11の構文エラーReact + Babel + Webpack

React ES2015機能を備えたアプリをIE> = 11で実行し、Webpack + Babelを使用して取得しようとしています。セットアップはカスタムで、_inferno-compat_レイヤーなので、ここでは_create-react-app_は使用しません。

ただし、最新の_babel-polyfill_および_babel-preset-env_プラクティスを_.babelrc_およびwebpack構成に適用したにもかかわらず、bundle.js内でSCRIPT1002：構文エラーが発生します。 IE11でアプリにアクセスしようとしています。

IEコンソールで構文エラーの参照に従うと、これは生成された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で実行するために欠けているアイデアはありますか？

javascriptreactjsinternet-explorerwebpackbabeljs
4
VoodooDS

問題を見つけました。モジュールrambdaxをdevDependenciesの1つとして使用しています。このモジュールには、ES6構文（ES5にトランスパイルされていない）で記述されたソースコードが含まれています。具体的には、矢印関数=>これは私のbundle.jsに直接含まれています。もちろん、IE11は矢印関数やその他のES6構文を実行できません。

残念ながら、bundle.jsをコンパイルするときに、BabelもWebpack（UglifyJSプラグイン）もインポートされたnode_modulesのソースに触れません。つまり、ES6としてインポートされるモジュールソースコードは、WebpackにES6のままになりますbundle.js。

このトピックの詳細については、 https://github.com/facebookincubator/create-react-app/issues/1125 を参照してください。

また、この問題に関する問題を「rambdax」リポジトリ内にすでに提出しました。あなたはそこでそれについてもっと知ることができます： https://github.com/selfrefactor/rambdax/issues/4

11
VoodooDS

それがまだ問題であるかどうかわからない。

Webpack4で私はそれをしました

 {
テスト：/ \。js $ /、
インクルード：
 //モジュールへの絶対パス
 
 }

含まれているモジュールはバベルフックを通過します。

1
Yanuxx

私はここで言及された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へのトランスパイルに問題はありませんでした。

0
user4447655