带有 BrowserSync 的 ES6 的 Babel/Webpack 配置（React-hot-loader）

Question

我查看了 @gaearon 通过 React Hot Loader 配方 (https://github.com/gaearon/react-hot-loader) 提供的设置，因为这似乎正是我学习 ES6 和 React 所追求的，所以我想我会将它用作起点。

克隆 repo 让我启动并运行，一切都很棒。然后我注意到两个问题：

1. 它使用 React 的 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 组件与 react-dom 的新方法内联...这里是 main.js：

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

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

还有基本的“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']
        }