问题标签 [webpack-module-federation]

不幸的是，我对此的复制是在一个复杂的专有项目中，所以我会尽力解释发生了什么。

与我的用例最接近的示例项目是这个：https ://github.com/module-federation/module-federation-examples/tree/master/dynamic-system-host 本质上，我有一个全方位的设置，其中一个Shell App 使用一组远程应用程序。远程应用程序是在运行时发现的，因此没有在 Webpack 配置中指定。

Shell 以及所有 Remote 都依赖于共享库 my-shared-lib：

Shell 在其 Webpack 配置中将此库公开为一个渴望的单例：

遥控器在他们的配置中也将其共享，但并不急切：

问题是这样的：我已经通过运行时调试和检查 Webpack 生成的包验证了这个库被多次包含和实例化——一次用于 shell，一次用于每个远程。lib 的代码甚至存在于 Webpack 在获取暴露的 ./app.js 时加载的 Remote 的捆绑包中。

我不知道这里发生了什么。我也尝试共享 my-shared-lib 的每一个依赖项，但这无济于事。

我的期望是 Remotes 使用由 Shell 共享的 my-shared-lib 实例，而不是创建自己的实例。

我是否完全误解了依赖共享的工作原理，还是我做错了什么？

应该注意的是，Shell 和 Remots 都有单一的入口点。

我想从一个异步加载的模块（由模块联合公开）运行一个 JS 函数，并在 React 组件中使用返回值。

例如，通过返回布尔值的函数的值来设置某些元素的可见性。

我找到的所有示例都解释了如何延迟加载 React 组件

谢谢！什洛米

使用 Webpack 5 模块联合，如果远程条目被修改，您不需要重新部署主模块/应用程序，并且当浏览器请求时将加载最新版本的模块。

我想知道：由于远程 URL 保持不变（例如http://localhost:8081/remoteEntry.js），浏览器可能会在每次加载主模块时缓存文件和缓存版本。另一方面，如果您为远程条目添加缓存清除，您将没有缓存。

让我们假设有一个使用 Webpack 5 模块联合的微前端架构的应用程序。有一个远程微前端，其配置如下：

然后是主模块配置：

这两个模块都部署在生产环境中。

然后我更改Component1并app1部署app1模块。

如何处理远程模块缓存？

更新：

在我的情况下，浏览器似乎使用启发式缓存（https://www.rfc-editor.org/rfc/rfc7234#section-4.2.2），remoteEntry.js因为服务器没有提供明确的到期时间。

因此，当remoteEntry.js更新时，主应用程序仍会从可能缓存数周的缓存中加载此文件。对于块，这不是问题，因为 webpack 可以配置为在文件名中包含哈希。

因为remoteEntry.js我看到了 2 个选项：

• 缓存清除
• 显式指定缓存控制

你认为这是一条路吗？

我一直在玩这个模块联合示例，其中设置相对简单 - 主机正在使用具有共享反应依赖关系的远程模块。在本地运行时，我注意到尽管主机和远程具有相同的 react/react-dom 版本，但远程的版本始终是下载的版本。

根据我的研究，模块联合似乎会选择共享依赖项的“最佳”版本，但我很惊讶在两者具有相同版本的情况下会选择远程版本。这个决定是如何做出的？有没有办法强制在这种情况下使用主机的版本？

假设我有以下模块联合设置：

这让我与遥控器共享如下导入：

但是，如果我想共享一个深度导入，比如下面的呢？

使用上述设置执行此操作似乎会在主机和任何遥控器中创建模块的单独实例，这也许是可以理解的，因为我们在技术上并未共享深度导入。但是，有没有办法让模块联盟这样做？

在我的模块联合设置中，我有一个使用一些远程应用程序的主机应用程序。它们都作为单例共享 Angular 框架依赖项。这是主机的 webpack.config.json 文件：

在主机和远程的内部package.json，Angular 版本都被定义为^11.0.0. 实际安装的版本是：host: 11.0.0、remote 11.0.9.:。由于内部的定义package.json和根据语义版本兼容的实际版本，我希望 webpack 只加载最高兼容的 Angular 版本（即11.0.9）一次。相反，我收到警告说Unsatisfied version 11.0.9 of shared singleton module @angular/core (required =11.0.0)。从何=11.0.0而来？为什么不承认 webpack 版本应该兼容？

当我尝试获取远程容器并在网页上显示它的组件时，出现错误 - Unexpected token '!==' main.js:619 。我尝试更新一些与 webpack 相关的包，但没有帮助。有人遇到过这个问题或知道如何解决吗？

我把我的代码留在这里

我正在研究 Webpack 5 模块联合功能，但在理解为什么我的代码不起作用时遇到了一些麻烦。这个想法与标准模块联合示例所做的非常相似：

app1- 是主机应用程序 app2- 是一个远程暴露整个应用程序app1

（app1呈现标题和水平线，app2应在其下方呈现）

app1和都app2声明react和react-dom作为它们共享的、单例的、急切的依赖关系weback.config.js：

在 App1 index.js 我有下一个代码：

接下来是 App1App.js组件：

但是当我启动应用程序时，我得到下一个错误：

如果我从index.jstobootstrap.js和 in 中提取所有index.js内容

一切正常。

这让我感到困惑，因为创建者的官方文档和博客文章指出，您可以采取任何一种bootstrap.js方式，也可以将依赖项声明为急切的依赖项。

将不胜感激任何关于为什么它在没有bootstrap.js模式的情况下无法工作的帮助/见解。

这是我正在构建的完整 GitHub 沙箱的链接：https ://github.com/vovkvlad/webpack-module-federation-sandbox/tree/master/simple

我正在开发一个动态仪表板的架构，其中使用 webpack 5 模块联合从不同的远程反应包中提取组件。我确实有一些在这些远程包中共享的不同库。这些包是可摇树的。因此，每个远程包将具有来自同一包的不同代码。如果我将这些包作为单例共享，当两个具有相同依赖关系的组件在运行时加载到 DOM 时，webpack 是否可以从两个包合并中获取 lib 代码？或者我们是否有必要在此类共享库中禁用摇树？（通过共享库我指的是 npm 包）

我正试图让我相当复杂的单体应用程序与模块联盟一起工作。我的 webpack 配置看起来像这样

在微前端方面共享是相同的。当我尝试运行应用程序时，我得到：

错误：共享单例模块 @angular/common 的 11.2.1 版本不满意（需要 ^7.2.0）

在此之前，我收到了类似的错误消息，但针对 angular/core。我通过重新运行纱线并根据不同的角度/核心版本修复库产生的所有警告来解决这个问题。

但是由于 fpr angular/common 错误，我被卡住了。我不知道如何找出哪个库可能会产生该错误。