Конфигурация Babel/Webpack для ES6 с BrowserSync (React-hot-loader)

Question

Я рассмотрел настройку @gaearon через рецепт React Hot Loader (https://github.com/gaearon/react-hot-loader), и поскольку это, похоже, именно то, что я получаю после узнайте ES6 и React. Я думал, что буду использовать его в качестве отправной точки.

Клонирование репо привело меня в норму, и все было замечательно. Потом я заметил две проблемы:

1. Он использует v13 из React, и я хочу использовать новый подход написания компонентов (и с помощью react-dom)
2. Я также хочу использовать подход ES6 от импорта (например, import { Foo } from Bar;)

Так что я цифра, просто, я просто обновляю зависимости для своих потребностей. Вот выдержка из моего 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 файл:

// 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:

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

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

И основной «привет мир» компонент сам по себе:

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