使用BrowserSync（反应热点加载器）的ES6的Babel/Webpack配置

Question

我已经看过安装@gaearon通过React Hot Loader配方提供的设置（https://github.com/gaearon/react-hot-loader），因为这看起来正是我所追求的学习ES6和React我认为我会用它作为一个起点。

克隆回购让我起来和runnning，一切都很好。然后我注意到两个问题：

1. 它使用作出反应的v13，我想用文字组件的新方法（和使用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'] 
     }