使用 React、TypeScript 和 HMR 的工作 WebPack 设置

Question

我正在尝试让 WebPack 与用 Typescript (.tsx) 编写的 ReactJs 组件一起工作，并利用 WebPack 的热模块替换。我找到了几个描述如何做到这一点的方法，但它们似乎都有同样的问题——如果你的组件 class 上有一个字段，你在 render 方法中使用它，然后在代码中更改它没有正确触发 HMR，例如

export default class Counter extends React.Component<ICounterProps, ICounterState> {
        ...
    label: string = 'Counter';
    render() {
        return <h1>{this.label}: {this.state.counter}</h1>;
    }
}

如果在代码中修改label的值，页面不会更新。我在我发现的 first 启动项目中对 GitHub 提出了一个问题，然后我又尝试了很多，他们都有这个问题。这是一个大问题——如果你不能确定页面是否会更新，它会使整个 HMR 变得毫无意义。另外，请注意这在 vanilla .jsx 组件中工作正常。

有没有人有办法让这个工作？我将不胜感激。

Answer 1

你能上传你的 webpack 的配置吗？

您具体使用什么软件包为 Webpack's HMR 提供 React's components 的支持？ react-hot 或 babel-plugin-react-transform ?

如果您使用 Babel 6，我建议您使用 babel-preset-react-hmre，这对我来说效果很好。

Answer 2

查看 https://github.com/gaearon/react-proxy#known-limitations

中的第一个 "known limitation"

Does not replace ES7 instance properties

使用 React、TypeScript 和 HMR 的工作 WebPack 设置

Working WebPack setup with react, typescript and HMR

javascript

reactjs

typescript

webpack

webpack-hmr