webpack 模块联合环境中的 Service Worker
Service worker in a webpack module federation environment
我有一个带有 webpack 模块联合、一个容器应用程序和一个远程的小型设置。遥控器完全暴露自己，容器正在消耗它以在单击导航 link 后显示它，例如 /users。
可以在 localhost:8080 访问容器，在 localhost:3001
可以访问远程容器
现在，远程正在使用 mockup service worker (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').
有没有人有这方面的经验？在具有模块联合的遥控器中使用服务工作者？如何在容器中调用它们？
最近几天，我还在为 webpack 5 和模块联合试验 MSW（Mock Service Worker）。它可能不适用于您的特定用例，但以下是我为使 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 做的一点 experiment/example 的回购。
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 方面有什么区别。
我有一个带有 webpack 模块联合、一个容器应用程序和一个远程的小型设置。遥控器完全暴露自己，容器正在消耗它以在单击导航 link 后显示它，例如 /users。
可以在 localhost:8080 访问容器，在 localhost:3001
现在，远程正在使用 mockup service worker (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').
有没有人有这方面的经验？在具有模块联合的遥控器中使用服务工作者？如何在容器中调用它们？
最近几天，我还在为 webpack 5 和模块联合试验 MSW（Mock Service Worker）。它可能不适用于您的特定用例，但以下是我为使 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 做的一点 experiment/example 的回购。 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 方面有什么区别。