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

【问题标题】：How to use service worker library (MSW) with Parcel bundler如何将 Service Worker 库 (MSW) 与 Parcel 捆绑器一起使用
【发布时间】：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').

有没有办法让它工作？

【问题讨论】：

标签： javascript node.js service-worker parceljs msw

【解决方案1】：

解决方案：npx msw init dist

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

【讨论】：