我有一些文件 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...');
});
});
有人知道这个问题吗?