Reactjs 带BrowserSync的ES6 Babel/Webpack配置（React热加载程序）

我已经通过React Hot Loader recipe（）查看了@gaearon提供的设置，由于这似乎正是我学习ES6和React的目的，我想我应该将其作为一个起点

克隆repo让我振作起来，一切都很好。然后我注意到两个问题：

它使用React的

v13

，我想使用编写组件的新方法（并使用

React-dom

）

我还想使用ES6的导入方法（例如，

import{Foo}from Bar；

）

所以我想，很简单，我只需要更新依赖项以满足我的需要。以下是my 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'));

我做错了什么？我已经检查过组件的创建，并且所有组件看起来都是正确的。。。这是一个依赖冲突的问题吗？还是我只是把网页配置搞砸了

我已经把我的整个项目放到github上，以便很容易地复制这个问题，如果这有帮助的话。。。可以在这里找到：

您尝试过这个吗

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

你试过这个吗

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

---

请注意，react-hot已被弃用，取而代之的是react-transform。您可以使用。也许这会帮你解决问题。用这个样板。。它也是由@gaearon发布的，而且更新得更多啊，好的。谢谢你的建议。样板或hmre哪个更合适？我认为样板更适合生产。react-hot尚未被完全弃用，而react-transform仍处于早期开发阶段。如果你只是想马上开始编码react，我会使用样板文件，它包含了你在OP中想要的所有内容。在我的项目中，我导入react as

import*as react from'react'请注意，react hot已被弃用，取而代之的是react转换。您可以使用。也许这会帮你解决问题。用这个样板。。它也是由@gaearon发布的，而且更新得更多啊，好的。谢谢你的建议。样板或hmre哪个更合适？我认为样板更适合生产。react-hot尚未被完全弃用，而react-transform仍处于早期开发阶段。如果你只是想马上开始编码react，我会使用样板文件，它包含了你在OP中想要的所有内容。在我的项目中，我导入react as
import*as react from'react'
 query: {
          presets: [ 'es2015', 'react','stage-0']
        }