Babel/Webpack Konfiguration für ES6 mit BrowserSync (React-Hot-Loader)

Question

Ich habe mir das Setup von @gaearon über das React Hot Loader Rezept angeschaut (https://github.com/gaearon/react-hot-loader) und das scheint genau das zu sein, wonach ich suche lerne ES6 und reagiere Ich dachte, ich würde es als Ausgangspunkt verwenden.

Das Klonen des Repos brachte mich zum Laufen und alles war großartig. Dann bemerkte ich zwei Fragen:

1. Es nutzt v13 von Reagieren und ich möchte den neuen Ansatz des Schreibens Komponenten (und mit react-dom)
2. Ich möchte auch für Importe ES6 Ansatz verwenden (zB import { Foo } from Bar;)

Also ich denke, einfach, ich werde nur die Abhängigkeiten aktualisieren, um meine Bedürfnisse zu erfüllen. Hier ist ein Auszug aus meinem 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" 
} 

Das bin ich führen einige kleinere Anpassungen an die Art und Weise zu machen Webpack die Bündelung verarbeitet. Hier ist meine aktuelle webpack.config.js Datei:

// 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'] 
     } 
     } 
    ] 
    } 
}; 

Dann habe ich eine schnelle Anpassung mache die Komponenten reagieren erhält inline mit dem neuen Ansatz für react-dom ... hier ist die main.js:

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

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

Und der Grund ‚Hallo Welt‘ Komponente selbst:

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; 

Jetzt npm start auf Lauf naiv gehofft, ich würde dies nur alle arbeiten und ich würde mit einem Grinsen im Gesicht durch die Straßen hüpfen ... ach nein. Die Konsole gibt einen Fehler, für die ich die Ursache nicht unterscheiden:

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           

Was mache ich falsch? Ich habe die Erstellung der Komponenten überprüft und alles scheint korrekt zu sein ... Ist es ein Problem mit widersprüchlichen Abhängigkeiten? Oder habe ich einfach die Webpack-Config vermasselt?

Ich habe mein ganzes Projekt auf Github werfen, um es einfach um das Problem zu reproduzieren, wenn dies ... hilft es ist hier zu finden: https://github.com/sheixt/webpack.react-hot-loader

Answer 1

Haben Sie dies versuchen?

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