最近使用 Parcel 搭建一个 Mock Service Worker
(MSW
)的测试服务,遇到一个问题:在 MSW 中注册 Service Worker
的文件(mockServiceWorker.js
)是以静态文件相对路径加载,但是在 Parcel
启动的服务中加载不到此文件,导致 Service Worker
服务无法注册。
一、前言
Mock Service Worker
(MSW
) 是一个令人兴奋的 API
模拟工具,它使用 Service Worker
拦截您的 HTTP
请求。这将允许您发出可以使用 DevTools 检查的实际 HTTP 请求,因为 MSW 在服务工作者级别上工作。
MSW 也可以在您的测试代码中使用,这样您就不必为 HTTP 响应设置额外的测试模拟。
二、问题解析
Parcel
默认是将所有文件打包进 js
包中,不存在有单独的静态文件目录,类似于 Vue
和 React
脚手架生成项目的根目录下的 public/
文件夹。
三、解决方案
下载插件 parcel-plugin-static-files-copy
来支持单独的静态文件打包。
- 安装插件
1 | npm install -D parcel-plugin-static-files-copy |
- 配置
package.json
1 | // package.json |
- 重启服务
1 | npm start |
拓展:
- 多静态文件夹配置
1 | // package.json |
- 指定输出文件夹
1 | // package.json |
欢迎访问:天问博客
本文作者: Tiven
发布时间: 2022-08-31
最后更新: 2023-03-02
本文标题: Parcel配置public静态文件目录
本文链接: https://www.tiven.cn/p/1109943e/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
发布时间: 2022-08-31
最后更新: 2023-03-02
本文标题: Parcel配置public静态文件目录
本文链接: https://www.tiven.cn/p/1109943e/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!