0

我有一个带有 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').

有没有人有这方面的经验？在具有模块联合的遥控器中使用服务人员？如何在容器中调用它们？

4

1 回答 1

0

最近几天，我还在为 webpack 5 和模块联合试验 MSW（模拟服务工作者）。它可能不适用于您的特定用例，但以下是我为使 MSW 与模块联合应用程序一起工作所做的工作。

在开发环境中的浏览器中模拟：

在容器应用程序中设置和启动 MSW。

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

无论哪个子 MFE 应用程序调用您使用 MSW 拦截的 api 端点，这对我都有效。

下面是我用 Webpack5 Module Federation 和 MSW 做的一个小实验/示例的 repo。 https://github.com/nfabacus/module-federation-example

对于在节点环境中模拟（Jest 单元测试）：

我没有专门测试模块联合，但我认为您可以按照节点的 MSW 设置页面中的说明进行操作（https://mswjs.io/docs/getting-started/install）。只需为每个 MFE 安装 msw 并设置测试。当我使用普通反应应用程序（CRA）进行测试时，它运行良好（https://github.com/nfabacus/msw-cra-example）。我认为模块联合和单个 SPA 在使用单元测试实现 msw 方面没有任何区别。

于 2022-02-01T08:14:08.147 回答