Webpack、Babel and Reactを使用したIE11の構文エラー

Question

Internet Explorer 11のReact + Reduxプロジェクトで構文エラーが発生しましたが、原因がわかりません。

WebpackとBabelを使用してコンパイルしています。

私はbabel-polyfillとbabel-es6-polyfillを使ってみましたが、それは助けになりませんでした。

これは私が取得していますエラーです：

/***/ }), 
/* 21 */, 
/* 22 */ 
/***/ (function(module, exports, __webpack_require__) { 

"use strict"; 
eval("\n\nObject.define... <- Line 70 
^--- Column 1 

これは私のwebpack.config.js次のとおりです：

'use strict'; 
// Include modules and plugins 
const webpack = require('webpack'); 
const path = require('path'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

// App and build directories 
const APP_DIR = path.resolve(__dirname, 'src/'); 
const BUILD_DIR = path.resolve(__dirname, 'public'); 

// Extract sass from the application, see index.jsx 
const extractSass = new ExtractTextPlugin({ 
    filename: 'css/[name].css' 
}); 

// The config file to load 
let env = (process.env.NODE_ENV || 'dev').toLowerCase(); 
let configFile = path.resolve(__dirname, 'config/config.' + env + '.json'); 

// Default config file if not found 
const defaultConfigFile = path.resolve(__dirname, 'config/config.dev.json'); 

/* 
* Config to be injected into the app 
* Note that JSON files are parsed upon requiring 
*/ 
let config; 

/* 
* Get the actual config 
*/ 
try { 
    config = require(configFile); 
    console.log('Loaded config file ' + configFile); 
} catch (e) { 
    config = require(defaultConfigFile); 
    console.log('Fallen back to default config file'); 
} 

// The actual webpack config 
const webpackConfig = { 
    entry: { 
     // The app entry point 
     app: APP_DIR + '/index.jsx', 

     // Vendor files will be used for bundling, they will not be compiled into the app itself 
     vendor: [ 
      'axios', 
      'prop-types', 
      'react', 
      'reactstrap', 
      'react-chartjs-2', 
      'react-dom', 
      'react-redux', 
      'react-router', 
      'react-router-dom', 
      'redux', 
      'sprintf-js', 
     ] 
    }, 

    output: { 
     path: BUILD_DIR, 
     filename: 'js/app.js' 
    }, 

    module: { 

     /* 
     * These are loaders for webpack, these will assist with compilation 
     */ 
     loaders: [ 
      { 
       /* 
       * Use Babel to compile JS and JSX files 
       * See .babelrc 
       */ 
       test: /\.jsx?/, 
       include: APP_DIR, 
       loader: 'babel-loader' 
      } 
     ], 
     rules: [ 
      { 
       /* 
       * Sass/Scss compilation rules 
       */ 
       test: /\.scss$/, 
       use: extractSass.extract({ 
        use: [ 
         { 
          loader: 'css-loader' 
         }, 
         { 
          loader: 'sass-loader' 
         } 
        ], 
        fallback: 'style-loader' 
       }) 
      }, 
      { 
       /* 
       * JS(X) compilation rules 
       * We need this, otherwise Webpack will crash during compile time 
       */ 
       test: /\.jsx?/, 
       loader: 'babel-loader' 
      } 
     ] 
    }, 
    plugins: [ 
     /* 
     * The CommonsChunkPlugin is responsible to create bundles out of commonly used modules 
      * E.g. React, React Dom, etc 
     */ 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: 'vendor', // See entry.vendor 
      filename: 'js/vendor.bundle.js' 
     }), 
     extractSass 
    ], 
    externals: { 
     /* 
     * The config external will be available to the app by using require('config') 
     */ 
     'config': JSON.stringify(config) 
    }, 
    devServer: { 
     contentBase: BUILD_DIR, 
     compress: true, 
     port: 7600, 
     inline: true, 
    }, 
}; 

if (env === 'production') { 
    webpackConfig.devtool = 'hidden-source-map'; 
} else { 
    webpackConfig.devtool = 'eval-source-map'; 
} 

module.exports = webpackConfig; 

のWebPACKの eval開始がどこ

SCRIPT1002: Syntax error 
File: app.js, Line: 70, Column: 1 

ライン70列1があります

と私の依存関係：

"dependencies": { 
    "axios": "^0.16.1", 
    "babel-core": "^6.24.0", 
    "babel-loader": "^6.4.1", 
    "babel-polyfill": "6.5.1", 
    "babel-preset-es2015": "^6.24.0", 
    "babel-preset-react": "^6.23.0", 
    "babel-preset-stage-1": "^6.24.1", 
    "chart.js": "^2.6.0", 
    "cross-env": "^3.2.4", 
    "css-loader": "^0.27.3", 
    "enumify": "^1.0.4", 
    "extract-text-webpack-plugin": "^2.1.0", 
    "history": "^4.6.3", 
    "ip": "^1.1.5", 
    "lodash": "^4.17.4", 
    "moment": "^2.18.1", 
    "node-sass": "^4.5.1", 
    "prop-types": "^15.5.10", 
    "react": "^15.4.2", 
    "react-addons-css-transition-group": "^15.5.2", 
    "react-addons-transition-group": "^15.5.2", 
    "react-chartjs-2": "^2.1.0", 
    "react-dom": "^15.4.2", 
    "react-js-pagination": "^2.1.0", 
    "react-redux": "^5.0.4", 
    "react-router": "^4.1.1", 
    "react-router-dom": "^4.1.1", 
    "reactstrap": "^4.5.0", 
    "redux": "^3.6.0", 
    "sass-loader": "^6.0.3", 
    "sprintf-js": "^1.1.0", 
    "style-loader": "^0.16.0", 
    "webpack": "^2.3.2" 
}, 
"devDependencies": { 
    "eslint-plugin-react": "^6.10.3", 
    "webpack-dev-server": "^2.5.1" 
} 

そして、私の.babelrc：BANANENMANNFRAUの答えに続き

{ 
    "presets" : [ 
     "es2015", 
     "react", 
     "stage-1" 
    ] 
} 

EDIT 1

、私はbabel-preset-envを追加し、次のように私の.babelrc編集：

{ 
    "presets" : [ 
     [ "env", { 
     "targets": { 
      "browsers": [ 
       "last 5 versions", 
       "ie >= 11" 
      ] 
     } 
     }], 
     "es2015", 
     "react", 
     "stage-1" 
    ] 
} 

これのdidn IE 11でエラーが発生しました。

Answer 1

npm install babel-preset-env --save-devとbabel-preset-envをインストールし、.babelrcで次の設定を使用します。

{ 
    "presets" : [ 
    ["env", { 
     "targets": { 
     "browsers": ["last 2 versions", "ie >= 11"] 
     } 
    }], 
    "react", 
    ] 
} 

あなたはまた、あなたの設定から、次の部分を削除することができます。

 loaders: [ 
      { 
       /* 
       * Use Babel to compile JS and JSX files 
       * See .babelrc 
       */ 
       test: /\.jsx?/, 
       include: APP_DIR, 
       loader: 'babel-loader' 
      } 
     ], 

はhere