webpack模块联邦环境中的服务人员

Question

我有一个小设置webpack模块联邦，一个容器应用程序和一个遥控器。遥控器正在完全暴露自己，容器在单击像/users这样的导航链接后使用它来显示它。

容器可在localhost:8080访问，远程可在localhost:3001访问。

现在，遥控器正在使用模拟服务工作者(https://mswjs.io/)，当直接访问应用程序时，它工作得很好。当通过容器调用时，会出现一个错误：

Uncaught (in promise) Error: [MSW] Failed to register a Service Worker for scope ('http://localhost:8080/') with script ('http://localhost:8080/mockServiceWorker.js'): Service Worker script does not exist at the given path.

我还尝试将范围设置为

worker.start({
  serviceWorker: {
    options: {
      scope: "http://localhost:3001",
    },
  },
})

它解决了一个错误。

Failed to register a ServiceWorker: The origin of the provided scope ('http://localhost:3001') does not match the current origin ('http://localhost:8080').

有人有这方面的经验吗？在远程模块联合中使用服务工作人员？在集装箱里怎么叫他们？

Answer 1

我还试验了MSW (模拟服务工人) webpack 5和模块联合会前几天。它可能不适用于您的特定用例，但下面是我做了什么，使垃圾处理模块联合应用程序。

用于在开发环境中在浏览器中进行模拟：

在集装箱应用程序中设置并启动MSW。

容器应用程序中的

• place worker.start()在bootstrap.js中(我把它放在ReactDOM呈现之前，因为我的应用程序正在使用ReactDOM)。
• place worker.start文件夹也在容器应用程序中(例如在src下)。
• 在模拟文件夹中添加要拦截的端点，并在handlers.js中模拟。
• 在主机应用程序(容器)的根目录中运行npx msw init ./ --save。请注意，安装的目录应该是根- mockServiceWorker.js应该位于与index.html相同的位置(其位置在webpack配置中指定).

这对我有效，不管哪个子MFE应用程序调用的api端点，您正在截取的垃圾。

下面是我用Webpack5模块联邦和垃圾做的一个小实验/例子的回复。https://github.com/nfabacus/module-federation-example

用于在节点环境中进行模拟(Jest测试)：

我没有对模块联合进行专门的测试，但我认为您可以直接按照MSW节点设置页面(https://mswjs.io/docs/getting-started/install)中的指示进行测试。只需为每个MFE安装msw并设置测试。当我用普通的react (CRA)进行测试时，它工作得很好(https://github.com/nfabacus/msw-cra-example)。我不认为模块联合和单个SPA在用单元测试实现msw方面没有任何区别。