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

Question

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

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

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

至于MSW，一切都是根据他们的文档完成的。下面是 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').

有没有办法让它工作？

Answer 1

解决方案：npx msw init dist

事实证明，我npx msw init使用publicwhich 适用于Create-React-App，而不是dist使用 Parcel 时应该使用的。