2017-12-06 13 views
1

Webpack + Babelを使用して、IE> = 11で動作するES2015機能付きのReact Appを取得しようとしています。設定は​​レイヤーを使用するカスタムなので、ここではcreate-react-appは使用しません。SCRIPT1002:React + Babel + WebpackのIE11で構文エラーが発生しました

しかし - 私の.babelrcとWebPACKの設定に、最新のbabel-polyfillbabel-preset-envプラクティスを適用するにもかかわらず、私はまだSCRIPT1002取得:IE11でアプリにアクセスしようとしたとき、私のbundle.js内の構文エラーを。私は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"] 
     } 
     } 
    ] 
    ] 
} 

私はここに私のwebpack.base.config.jsbabel-polyfillを含める:

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

任意のアイデアそれはIE11で動作させるには何が不足していますか?

答えて

3

問題が見つかりました。私はモジュールrambdaxを私のdevDependenciesの1つとして使用しています。ソースコードはES6構文で書かれています(ES5に転送されません)。より具体的には、矢印bundle-functions =>が直接bundle.jsに含まれています。もちろん、IE11は矢印機能やその他のES6構文を実行することはできません。

は残念ながらbundle.jsをコンパイルするときバベルものWebPACK(UglifyJSプラグイン)のいずれも意味し、輸入node_modulesの源に触れます:ES6としてインポートされるモジュールのソースコードを、あなたのWebPACK bundle.jsにES6ままになります。

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

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

関連する問題