BrowserSync（React-Hot-Loader）を使用したES6のBabel/Webpackコンフィグレーション

Question

React Hot Loaderのレシピ（https://github.com/gaearon/react-hot-loader）で提供されているセットアップ@gaearonを見てきました。 ES6を学び、React私はそれを出発点として使うと思った。

レポをクローンすると私はうまく走り、すべてが素晴らしかったです。私も輸入品（例えばimport { Foo } from Bar;）についてES6のアプローチを使用したい

1. それが反応のv13を使用して、私は書き込みコンポーネントの新しいアプローチを使用して（とreact-domを使用して）したい
2. ：その後、私は2つの問題に気づきました

わかりましたので、簡単に説明します。私は、依存関係を自分のニーズに合わせて更新します。ここに私のpackage.jsonからの抜粋です：

"scripts": { 
    "start": "node ." 
}, 
"dependencies": { 
    "react": "^0.14.8", 
    "react-dom": "^0.14.8" 
}, 
"devDependencies": { 
    "babel-core": "^6.7.4", 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.6.0", 
    "babel-preset-stage-2": "^6.5.0", 
    "browser-sync": "^2.11.2", 
    "react-hot-loader": "^1.3.0", 
    "webpack": "^1.12.14", 
    "webpack-dev-middleware": "^1.6.1", 
    "webpack-hot-middleware": "^2.10.0" 
} 

これはWebPACKのは、バンドルを処理している方法にはいくつかのマイナーな調整を行うために私をリードしています。ここに私の現在のwebpack.config.jsファイルです：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import HelloWorld from './HelloWorld'; 

ReactDOM.render(<HelloWorld />, document.getElementById('react-root')); 

そして基本：

// For instructions about this file refer to 
// webpack and webpack-hot-middleware documentation 
var webpack = require('webpack'); 
var path = require('path'); 

module.exports = { 
    debug: true, 
    devtool: '#eval-source-map', 
    context: path.join(__dirname, 'app', 'js'), 

    entry: [ 
    'webpack/hot/dev-server', 
    'webpack-hot-middleware/client', 
    './main' 
    ], 

    output: { 
    path: path.join(__dirname, 'app', 'js'), 
    publicPath: '/js/', 
    filename: 'bundle.js' 
    }, 

    plugins: [ 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin() 
    ], 

    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel', 
     query: { 
      presets: ['react', 'es2015', 'stage-2'] 
     } 
     } 
    ] 
    } 
}; 

は、その後、私はここに... react-domのための新しいアプローチを持つコンポーネントを反応させるのインラインを取得するための迅速な調整がmain.jsであることを確認してください「Hello Worldの」コンポーネント自体：

今

import React from 'react'; 

const name = 'world'; 
const HelloWorld = React.createClass({ 
    render: function() { 
     return (
      <h2 className="hello-world"> 
       <span className="hello-world__i">Hello, {name}</span> 
      </h2> 
     ) 
    } 
}); 

export default HelloWorld; 

npm startを実行している上、私は単純に、これは単に、すべてのことを望みました仕事と私は私の顔に笑顔で通りをスキップして行くだろう...ああ、そうではありません。 コンソールは、私が原因を区別できないため、エラーを返します。

ERROR in ./app/js/main.js        
Module build failed: ReferenceError: [BABEL] C:\tutch_build\webpack.react-hot-loader\app\js\main.js: Unknown 
option: C:\tutch_build\webpack.react-hot-loader\node_modules\react\react.js.Children. Check out http://babe 
ljs.io/docs/usage/options/ for more info    
    at Logger.error (C:\tutch_build\webpack.react-hot-loader\node_modules\babel-core\lib\transformation\file 
\logger.js:39:11)          
    at OptionManager.mergeOptions (C:\tutch_build\webpack.react-hot-loader\node_modules\babel-core\lib\trans 
formation\file\options\option-manager.js:267:20)  
    at C:\tutch_build\webpack.react-hot-loader\node_modules\babel-core\lib\transformation\file\options\optio 
n-manager.js:349:14         
    at C:\tutch_build\webpack.react-hot-loader\node_modules\babel-core\lib\transformation\file\options\optio 
n-manager.js:369:24         
    at Array.map (native)        
    at OptionManager.resolvePresets (C:\tutch_build\webpack.react-hot-loader\node_modules\babel-core\lib\transformation\file\options\option-manager.js:364:20)  
    at OptionManager.mergePresets (C:\tutch_build\webpack.react-hot-loader\node_modules\babel-core\lib\transformation\file\options\option-manager.js:348:10)  
    at OptionManager.mergeOptions (C:\tutch_build\webpack.react-hot-loader\node_modules\babel-core\lib\transformation\file\options\option-manager.js:307:14)  
    at OptionManager.init (C:\tutch_build\webpack.react-hot-loader\node_modules\babel-core\lib\transformation\file\options\option-manager.js:465:10)    
    at File.initOptions (C:\tutch_build\webpack.react-hot-loader\node_modules\babel-core\lib\transformation\file\index.js:194:75)         
@ multi main           

私が間違って何をしているのですか？私はコンポーネントの作成をチェックしており、すべて正しいと思われます...それは矛盾する依存関係の問題ですか？または、私は単にWebpackの設定を台無しにしたことがありますか？

このことができます...それはここで見つけることができる場合、私は、それが簡単に問題を再現するために作るためにgithubの上に私のプロジェクト全体をスローしました：https://github.com/sheixt/webpack.react-hot-loader

Answer 1

を、あなたはこれを試していましたか？

query: { 
      presets: [ 'es2015', 'react','stage-0'] 
     }