带有 babel 和 ES6 的 WebPack 和 react-hot 模块不会在保存时更新页面答案

【问题标题】：WebPack and react-hot module with babel and ES6 doesn't update page on save带有 babel 和 ES6 的 WebPack 和 react-hot 模块不会在保存时更新页面
【发布时间】：2015-08-16 09:14:48
【问题描述】：

我有一些文件 Typescrypt->ES6->React JSX (ES6)->Webpack（带有 react-hot 和 babel）， react-hot 不刷新页面

其中一个是某种代码隐藏 PersonDetailsComponent.cb.js （由 TypeScript 编译）

import * as React from "react/addons";
export default class PersonDetailsComponent_CB extends React.Component {
    constructor(props) {
        super(props);
    }
    componentDidMount() {
    }
    //other code
    render() {
        //return React.jsx(`<div>test</div>`);
        //return React.DOM.div(null, this.props.name + " is a " + this.props.role);
        return null;
    }
}

然后PersonDetailsComponent.jsx（因为TypeScript编译器无法解析JSX）

    import * as React from "react/addons";
    import {default as PersonDetailsComponent_CB} from "../tmp/PersonDetailsComponent.cb.js";

    class PersonDetailsComponent extends PersonDetailsComponent_CB {
        constructor(props) {
            super(props);
        }
//only render
        render() {
            let a = 1;
            return(
                <div>
                {this.props.name} is  {this.props.role}
                </div>
                );
        }
    }

    export default function Factory(props) {
        "use strict";
        return React.createElement(PersonDetailsComponent, props);
    }

然后是 index.js 块

import {default as PersonDetailsComponent}  from "./PersonDetailsComponent.jsx";

React.render(PersonDetailsComponent(
    {name: "Bob", 
    role: "mmm"}),
    document.body);

一切正常，但 react-hot 不刷新页面 然后我编辑并保存 jsx 文件。对于 ES5 格式的 jsx 文件，一切都在更新。我正在使用 webpack 和 react-hot 和 babel

gulp.task('react:development', function() {
  var wconfig = {
    cache: true,
    devtool: 'eval',
    entry: [
      'webpack-dev-server/client?http://'+whost+':'+wport,
      'webpack/hot/only-dev-server',
      './src/index'
    ],
    output: {
      path: process.cwd(),
      //contentBase: 'http://'+whost+':'+wport,
      filename: 'bundle.js',
      publicPath: 'http://'+whost+':'+wport+'/dist/'
    },
    plugins: [
      new dwebpack.HotModuleReplacementPlugin(),
      new dwebpack.NoErrorsPlugin()
    ],
    module: {
      loaders: [
      { test: /\.js$/, loaders: ['react-hot', 'jsx?harmony!babel', 'babel-loader'], exclude: /node_modules/ },
      { test: /\.jsx$/, loaders: ['react-hot', 'jsx?harmony!babel', 'babel-loader'], exclude: /node_modules/ },
      { test: /\.css$/, loader: "style!css" }
      ]
    }
  };

  var server = new WebpackDevServer(dwebpack(wconfig), {
    publicPath: wconfig.output.publicPath,
    hot: true,
    stats: {
      colors: true,
      progress: true
    }
  });

  server.listen(wport, function (err, result) {
    if (err) {
      console.log(err);
    }

    gutil.log('Webpack Dev Server started. Compiling...');
  });
});

有人知道这个问题吗？

【问题讨论】：

标签： javascript ecmascript-6 webpack react-jsx webpack-dev-server

【解决方案1】：

您是否激活了客户端模式？我正在使用

if (module.hot) {
    module.hot.accept();
}

在第一个被调用的客户端文件上

【讨论】：