は、私は、単純なES6反応成分モジュールを作成しているWebPACKの

Question

でES6モジュールをロードできません。私はここで間違っている？私がプロジェクトフォルダ内に保存すると、同じモジュールが完全に機能します。 node_modulesからロードすると動作しません。

それは時にエラーを与える：これはあなたがコンパイルするのWebPACKを設定している

var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    devtool: 'eval', 
    entry: [ 
    'webpack-dev-server/client?http://localhost:3000', 
    'webpack/hot/only-dev-server', 
    './src/index' 
    ], 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'bundle.js', 
    publicPath: '/static/' 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin() 
    ], 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     loaders: ['react-hot', 'babel?presets[]=es2015'], 
     include: path.join(__dirname, 'src') 
     }, 
     { 
     test: /\.css$/, 
     loader: 'style-loader!css-loader' 
     }, 
     { 
     test: /\.styl$/, 
     loaders: [ 
      'style?sourceMap', 
      'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]', 
      'stylus' 
     ] 
     }, 
     { 
     test: /\.(jpe?g|png|gif|svg)$/i, 
     loaders: [ 
      'file?hash=sha512&digest=hex&name=[hash].[ext]', 
      'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false' 
     ] 
     }, 
     { 
     test: /\.(eot|woff|woff2|ttf)$/, 
     loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]' 
     }, 
     { 
     test: /\.json$/, 
     loader: 'json-loader' 
     } 
    ] 
    } 
}; 

Answer 1

はあなたが持っているこの

{ 
    test: /\.js$/, 
    loaders: ['react-hot', 'babel?presets[]=es2015'], 
    include: path.join(__dirname, 'src') 
}, 

のようなコードを反応させ、私のwebpack.config.jsある

return (
    <div {...this.props} style={rootStyle}> 

プロジェクトのsrcディレクトリにのみincludeを指定してください。これは、すべてのnode_moduleをトランジリックにしたくないので、良い方法です。

Nodejsは、その...演算子を除いて、ほとんどの新しいES6構文を理解しています。

ノードモジュールとしてコードを配布する場合は、必ずトランペルバージョンを配布してください。これを自動化する方法については、​​を参照してください。