我有一些文件Typescrypt-> ES6-> React JSX(ES6) - > Webpack(带反应热和巴贝尔), react-hot does not refresh page
一种是某种代码,隐藏在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 does not refresh page 然后我编辑并保存jsx文件 . 对于ES5格式的jsx文件,所有文件都在更新 . 我正在使用webpack和反应热和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...');
});
});
有人知道这个问题吗?
1 回答
你有没有激活客户端模式?我正在使用
在已调用的第一个客户端文件上