如何将 Service Worker 库 (MSW) 与 Parcel 捆绑器一起使用

Posted 2023-02-21

【中文标题】如何将 Service Worker 库 (MSW) 与 Parcel 捆绑器一起使用

【英文标题】：How to use service worker library (MSW) with Parcel bundler

【发布时间】：2021-04-25 23:58:33

【问题描述】：

我有一个使用 Parcel 捆绑的小型 TypeScript React 项目。我想添加 MSW 来模拟服务器请求，但我无法让它工作。

我有一个非常简约的包裹设置：

"scripts": 
  "start": "parcel index.html",
  "build": "parcel build index.html"
,

至于MSW，一切都按照他们的documentation来完成。下面是 service-worker 的启动方式：

if (process.env.NODE_ENV === "development") 
  const  worker  = require("./mocks/browser")
  worker.start()

与 Webpack 捆绑时，完全相同的实现可以完美运行。但在 Parcel 中会导致控制台出现以下错误：

The script has an unsupported MIME type ('text/html').

[MSW] Failed to register a Service Worker: Failed to register a ServiceWorker for scope ('http://localhost:1234/') with script ('http://localhost:1234/mockServiceWorker.js'): The script has an unsupported MIME type ('text/html').

有没有办法让它工作？

【参考方案1】：

解决方案：npx msw init dist

事实证明，我使用 public 运行 npx msw init，它适用于 Create-React-App，而不是 dist，因为我在使用 Parcel 时应该这样做。