使用 React、TypeScript 和 HMR 的工作 WebPack 设置
Working WebPack setup with react, typescript and HMR
我正在尝试让 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 组件中工作正常。
有没有人有办法让这个工作?我将不胜感激。
你能上传你的 webpack 的配置吗?
您具体使用什么软件包为 Webpack's HMR
提供 React's components
的支持?
react-hot
或 babel-plugin-react-transform
?
如果您使用 Babel 6
,我建议您使用 babel-preset-react-hmre
,这对我来说效果很好。
查看 https://github.com/gaearon/react-proxy#known-limitations
中的第一个 "known limitation"
- Does not replace ES7 instance properties
我正在尝试让 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 组件中工作正常。
有没有人有办法让这个工作?我将不胜感激。
你能上传你的 webpack 的配置吗?
您具体使用什么软件包为 Webpack's HMR
提供 React's components
的支持?
react-hot
或 babel-plugin-react-transform
?
如果您使用 Babel 6
,我建议您使用 babel-preset-react-hmre
,这对我来说效果很好。
查看 https://github.com/gaearon/react-proxy#known-limitations
中的第一个 "known limitation"
- Does not replace ES7 instance properties