У меня есть несколько файлов 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. Для файлов jsx в формате ES5 все обновляется. Я использую 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...');
});
});
Кто-нибудь знает эту проблему?