Typescript React HMR，一开始看 React Hot Loader 上面提示，说一定需要 “through Babel to transform it”，看着配置太复杂，觉得麻烦，于是放弃了

后来用了一阵子自己的 erb，本身也已经感觉到诸多不痛快，直到晓得了 tsconfig 的 target 除 “es5” 还可以有 “es6” 等多种选择，这相当于…

问题最终回到了以前写 react-boilerplate 时该怎样配置 HMR

我是想说，哪怕长期记忆好，时隔这么久，自己重新再来配，还是容易对这种配置的细节记忆上有模糊、遗漏…

所以还是趁这回，好好记笔记吧

List

  • Version 4 “through Babel to transform it”
  • webpack 与 webpack-dev-server 配置相关
  • .babelrc — “plugins”: [“react-hot-loader/babel”]
  • ts module.hot
  • AppContainer

Version 4 “through Babel to transform it”

这个不用讲了，下一题

webpack 与 webpack-dev-server 配置相关

主要是几个参数意义需要弄清楚

如 webpackConfig.devServer 下 hot 与那个什么？(—hot)冲突

.babelrc — “plugins”: [“react-hot-loader/babel”]

以前配成功过，但还是没有留意：.babelrc 中需要👆的

简单讲，想要热更新同时不丢失 component state，不能忘记这条

当然前提是确保其他配置没问题

ts module.hot

详见 @types/webpack-env

AppContainer

React Hot Loader 的实现依赖两个主要的库 gaearon/react-proxy 和 gaearon/react-deep-force-update

这两个库在 babel 编译过程中侵入 React Comeponent 的编译结果和通过 React 的隐藏 api 强制刷新组件树来完美的实现保持状态的 React HMR

…

最后这步，原理可以往深了讲，但用法就是那么…

AppContainer & module.hot