Question

我已经通过React Hot Loader配方（https://github.com/gaearon/react-hot-loader）查看了@gaearon提供的设置，因为这似乎正是我学习ES6和React之后我认为我和＃39; d用它作为起点。

克隆回购邮件让我兴奋起来，一切都很棒。然后我注意到两个问题：

它使用了React的v13，我想使用编写组件的新方法（并使用react-dom）
我也想使用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'));

基本＆＃39;你好世界＆＃39;组件本身：

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

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

1 个答案: