如何在Parcel打包项目中集成MSW并解决Service Worker注册报错

你遇到的The script has an unsupported MIME type ('text/html')报错，本质是Parcel开发服务器收到mockServiceWorker.js的请求时，压根没找到对应的静态文件，触发了单页应用默认的fallback逻辑——把index.html的内容当响应返回了。此时响应的Content-Type是text/html，完全不符合Service Worker要求的JavaScript类MIME格式，自然注册失败。
这也是为什么完全一样的配置在Webpack下能跑、在Parcel下出问题的核心差异：Webpack默认会把项目根目录下的静态文件直接映射到站点根路径，而Parcel的静态资源识别规则和Webpack完全不一样。

• 最省事的方案：把MSW生成的worker文件放到Parcel默认识别的静态目录
  Parcel启动时会自动把项目根目录下public文件夹内的所有文件，映射到站点根路径供外部访问，完全不需要修改任何Parcel配置。直接执行初始化命令，把worker文件生成到public路径下即可：

npx msw init ./public --save

执行完会发现mockServiceWorker.js已经写入到./public目录，启动dev服务后，浏览器可以直接通过http://localhost:1234/mockServiceWorker.js获取到正确的JS格式脚本，MIME类型报错会直接消失。命令里的--save参数会自动同步MSW的内部配置，匹配新的文件路径，不需要手动改代码。

• 自定义静态路径场景的适配
  如果你不想用默认的public目录，而是把worker文件存到其他自定义静态路径下，可以在初始化worker的时候显式指定脚本URL，和实际的路径映射关系保持对齐：

if (process.env.NODE_ENV === "development") {
  const { worker } = require("./mocks/browser")
  worker.start({
    serviceWorker: {
      url: "/自定义的静态路径/mockServiceWorker.js"
    }
  })
}

• 不要把mockServiceWorker.js当成普通前端脚本引入到代码里走Parcel打包流程：这个文件是独立的Service Worker脚本，不需要经过编译转译，只要能被浏览器直接以静态资源访问就行，参与打包反而容易破坏文件内容、导致MIME识别错误。
• 反复注册失败的时候，先打开浏览器DevTools的Application面板，清掉站点下之前残留的无效Service Worker注册记录、清空站点缓存再重试，避免旧的错误注册记录干扰新流程。
• 生产构建不需要手动拷贝public下的worker文件到输出目录：Parcel构建时会自动把public下的所有静态资源原样复制到最终的dist目录，不需要额外配置。

内容的提问来源于stack exchange，提问作者zorza