在 Vite/React 应用程序中使用模块联合，主机应用程序不会反映远程中所做的更改

Question

我正在为一个项目尝试模块联合，我成功地为远程应用程序提供了一个简单的按钮，然后让主机应用程序使用该按钮。但是，当我对远程应用程序中的按钮进行更改时，更改不会反映在主机中。

如果我关闭远程应用程序，那么主机将开始抛出错误（这是此时的意图）。我使用 Suspense 延迟加载导入。据我所知，vite.config.ts 文件是干净的，并且我已经排除了浏览器缓存作为罪魁祸首的可能性。难道是IDE（Visual Studio 2022 Pro）或者Vite的东西？

Answer 1

目前，Vite 针对 React 的 HMR 功能依赖于“React Preamble”。该序言是一个 JavaScript，它在 window 对象中运行并安装某些内容。除此之外，序言中还有开发服务器的主机地址，用于建立 websocket 连接以了解何时刷新页面（基本上是 HMR 的核心）。

如果您遵循到目前为止的解释，这就是为什么您不能在其他 React 项目中使用 HMR 的原因：

序言是由第一个（根）项目安装的，因此地址是第一个项目的地址。

window
2. 对象的属性已由根项目的前导码设置，因此安装另一个前导码将覆盖它。第二个项目甚至不尝试建立/运行序言，因为这只在您捆绑 HTML 页面时才会发生。因为您的第二个项目仅导出 JavaScript，所以没有 HTML 页面。没有 HTML 页面意味着没有序言。没有 pemble 就意味着没有 HMR。