如何让热模块重新加载在打字稿 monorepo 中工作

Question

因此，过去几天我一直在尝试在基于 Typescript/React/Koa/Mongo 的 monorepo 中进行热模块重新加载，但完全徒劳；我感觉我的头一直在撞砖墙。HMR 的文档少之又少（几乎互联网上的所有内容都只是解释如何做某事的一部分）。我已经做了很多谷歌搜索并阅读了很多不同的......类似版本的问题，但似乎没有人有一个有用的解决方案。

\n\n

我已经整理了问题的最小回购版本：https://github.com/benwainwright/hmr-issue-minimal-repo，这大致就是我的项目的设置方式：

\n\n

\n
• packages/one是一个包含后端代码的 Yarn 工作区
\n
• packages/two是一个包含 React\n组件/前端代码的 Yarn 工作区
\n

\n\n

如果我构建并运行它，有时我可以让它注意到我正在尝试在客户端中进行热重新加载，失败，然后进行完整的页面重新加载。发生这种情况时，控制台上会出现以下错误

\n\n

\xef\xbd\xa2hot\xef\xbd\xa3 Error: Aborted because ../two/renderApp.tsx is not acceptedUpdate propagation: \n../two/renderApp.tsx -> ../two/index.tsx -> ./src/frontend-entry-point.tsx -> 1    at \nhotApplyInternal (http://localhost/assets/app.js:508:30)    at Object.hotApply [as apply] \n(http://localhost/assets/app.js:362:19)    at eval (webpack-internal:///./node_modules/webpack-hot- \nclient/client/hot.js:121:23)\n

\n\n

我尝试了各种软件包的各种不同组合，并且还交换了执行热插拔的代码（https://github.com/benwainwright/hmr-issue-minimal-repo/blob/edcd8ad8c4fb9686abce12237d51a5b6f37dd636/ packages/two/renderApp.tsx#L13-L16 ) 和react-hot-loader。什么都不起作用。如果有人知道如何让它工作，我将永远感激不已！

\n

Answer 1

为了让反应热加载器工作，您需要应用一些东西。

1. 在你的 babel 插件中应用“react-hot-loader/babel”
2. react-dom为to指定别名@hot-loader/react-dom
3. hot用来自的 hoc包裹你的应用程序根组件react-hot-loader/root

这些步骤是基于https://github.com/gaearon/react-hot-loader/tree/master/examples/typescript的 React HMR 的基本用例。

问题是你的情况有点复杂，因为你的前端应用程序位于 a 中node_modules，并且默认情况下 babel 不会编译内部模块node_modules，因此你需要指定你想要编译它们。

您可以在这里阅读我的答案中的解释：Use Webpack HMR with a hoisted Lerna React Project