BrowserSync ile ES6 için Babel/Webpack yapılandırması (React-hot-loader)

Question

Kurulum @Gaearon React Hot Loader tarifi (https://github.com/gaearon/react-hot-loader) aracılığıyla baktım ve bu tam olarak neye varmış gibi görünüyor ES6 ve React'ı öğrenirim Bir başlangıç ​​noktası olarak kullanacağımı düşündüm.

Repo'yu klonlamak beni ayağa fırlattı ve her şey harikaydı.

1. O Tepki ait v13 kullanır ve yeni yazı bileşenlerinin yaklaşımını (ve react-dom kullanarak)
2. Ben de ithalat için ES6 yaklaşımını (örn import { Foo } from Bar;)
kullanmak istediğiniz kullanmak istiyorum: Sonra iki konuyu fark

Yani, basit, sadece ihtiyaçlarımın giderilmesi için bağımlılıkları güncelleyeceğim.

"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" 
} 

Bu WebPack donatılacak ele alış şeklinden bazı küçük ayarlamalar yapmak için bana yol: İşte benim package.json dan özüdür. İşte benim şimdiki webpack.config.js dosyasıdır:

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

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

Ve temel:

Sonra

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

Ben hızlı ayarlama react-dom için yeni bir yaklaşımla içi bileşenler Tepki almak için yapmak ... Burada main.js olduğunu 'hello world' bileşeni kendisi:

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; 

Şimdi npm start çalıştıran Ben safça bu olurdu sadece tüm umut

Çalışıyorum ve yüzümde bir sırıtışla sokaklarda dolaşmaya gidiyorum.

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           

yanlış yapıyorum: konsol Sebebini ayırt edemez kendisi için hata verir? Bileşenlerin oluşturulmasını kontrol ettim ve bunların hepsi doğru görünüyor ... Çakışan bağımlılıklarla ilgili bir sorun mu var? Ya da sadece web paketi yapılandırmasını karıştırdım mı? https://github.com/sheixt/webpack.react-hot-loader

Answer 1

Bunu denedin mi: Ben bu ... yardımcı olur o burada bulabilirsiniz eğer, bu kolay sorunu çoğaltmak yapmak için github üzerine benim bütün projeyi atmak ettik

?

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