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

因此,最近几天我一直在徒劳地尝试在基于Typescript / React / Koa / Mongo的monorepo中进行热模块重新加载;我觉得自己一直在撞砖墙。 HMR的文档很少(互联网上的几乎所有内容都只是解释如何做某事的方式的一部分)。我已经进行了大量的谷歌搜索,并阅读了很多不同的……类似版本的问题,但是似乎没人能找到有用的解决方案。

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

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

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

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

我已经尝试了各种软件包的各种不同组合,并且还用 react-hot-loader 交换了执行热交换(https://github.com/benwainwright/hmr-issue-minimal-repo/blob/edcd8ad8c4fb9686abce12237d51a5b6f37dd636/packages/two/renderApp.tsx#L13-L16)的代码。没事。如果有人任何想法如何使它正常工作,我将永远很棒!

iCMS 回答:我如何重新加载热模块以在打字稿monorepo中工作

要使react-hot loader正常工作,您需要应用几件事。

  1. 在babel插件中应用“ react-hot-loader / babel”
  2. react-dom设为@hot-loader/react-dom的别名
  3. 使用来自hot的{​​{1}} hoc为您的App根组件打包

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

问题在于,由于前端应用程序位于node_modules中,因此您的情况要复杂一些,并且默认情况下babel不会在react-hot-loader/root内编译模块,因此您需要指定进行编译。

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

本文链接:https://www.f2er.com/2243284.html

大家都在问