Internet Explorer 11用BabelでReactアプリを構築するには？

Question

// webpack.config.js 

const webpack = require('webpack'); 
const precss = require('precss'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const PROD = process.env.NODE_ENV === 'production'; 

const jsPresets = [ 
    ['env', { 
    targets: PROD ? { 
     'browsers' : [ 
     'last 4 versions', 
     'safari >= 7', 
     'Explorer 11', 
     ] 
    } : { 
     chrome: 1, 
    }, 
    }], 
    'es2015', 
    'stage-1', 
]; 

const baseConfig = { 
    entry: [ 
    'babel-polyfill', 
    'antd/dist/antd.css', 
    './node_modules/m-react-splitters/lib/splitters.css', 
    './node_modules/cli-truncate/index.js', 
    'react-s-alert/dist/s-alert-default.css', 
    'react-s-alert/dist/s-alert-css-effects/flip.css', 
    'react-s-alert/dist/s-alert-css-effects/bouncyflip.css', 
    'react-quill/dist/quill.snow.css', 
    ], 
    output: { 
    path: './wp-content/plugins/clausehound/js', 
    filename: 'clausehound.js', 
    }, 
    module: { 
    loaders: [{ 
     test: /\.json$/, 
     loader: 'json-loader', 
    }, { 
     test: /\.css$/, 
     loader: ExtractTextPlugin.extract('style', 'css?-url!postcss'), 
    }, { 
     test: /\.js$/, 
     exclude: /(node_modules|bower_components)/, 
     include: /cli-truncate\/index.js/, 
     loader: 'babel-loader', 
     query: { 
     presets: jsPresets, 
     plugins: [ 
      ['import', { libraryName: 'antd' }], 
      ['transform-es2015-arrow-functions'], 
     ], 
     }, 
    }, { 
     test: /\.jsx/, 
     exclude: /(node_modules|bower_components)/, 
     loader: 'babel-loader', 
     query: { 
     presets: jsPresets.concat(['react']), 
     }, 
    }], 
    rules: [ 
     { test: /[\/]jquery\.js$/, use: 'expose-loader?$!expose?jQuery' } 
    ], 
    }, 

    postcss:() => [precss], 

    plugins: [ 
    new ExtractTextPlugin('../css/clausehound.css', { allChunks: true }), 
    new webpack.OldWatchingPlugin(), 
    ], 
}; 

// Modify config if production build or not 
if (PROD) { 
    module.exports = Object.assign({}, baseConfig, { 
    plugins: baseConfig.plugins.concat([ 
     new webpack.optimize.DedupePlugin(), 
     new webpack.optimize.UglifyJsPlugin({ sourceMap: true }), 
     new webpack.DefinePlugin({ 
     process: { 
      env: { 
      NODE_ENV: JSON.stringify('production'), 
      }, 
     }, 
     }), 
     new webpack.ProvidePlugin({ 
     $: 'jquery', 
     jQuery: 'jquery' 
     }), 
     [ 
     'transform-es2015-arrow-functions', 
     'transform-class-properties', 
     'syntax-class-properties', 
     ], 
    ]), 
    }); 
} else { 
    module.exports = baseConfig; 
} 

IE11は矢印関数の構文で壊れています。すべてではないにしても、ノードモジュールの大半には矢印機能があり、バンドルされたjsファイルにその全体を含めることは望ましくありません。私はbabel-loaderを実行してテストするだけですが、私はbaseConfigのentryプロパティに構文エラーを投げている 'cli-truncate'からファイルをインクルードしましたが、そのパッケージでは（）=> index.js。

コードがcli-truncateから失敗した正確な行はこれは：（入力、列オプト） module.exportsはの= => {..}

私は、これは、このパッケージに特異的であるとは思わないけど私はwebpackの設定を何らかの形で変更する必要があると推測していますが、わかりません。任意のアイデアをどのようにこれを解決するには？

エラー：

ファイル：

Answer 1

あなたはまたenvターゲットのあなたの現在のリストに追加する必要がありバベルでIE11をサポートしていることを確認するには。たとえば：

{ 
    "presets": [ 
    ["env", { 
     "targets": { 
     "browsers": [ 
      "Chrome >= 59", 
      "FireFox >= 44", 
      "Safari >= 7", 
      "Explorer 11", 
      "last 4 Edge versions" 
     ] 
     }, 
     "useBuiltIns": true 
    }], 
    "react", 
    "stage-1" 
    ], 
    "ignore": [ 
    "node_modules" 
    ], 
    "plugins": [ 
    "transform-es2015-arrow-functions", 
    "transform-class-properties", 
    "syntax-class-properties" 
    ] 
} 

も参照してください：Babel Env documentation