Parcel配置public静态文件目录过程解析
更新时间：2023年06月14日 10:44:08 作者：天問
这篇文章主要为大家介绍了Parcel配置public静态文件目录实现过程解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
一、前言
最近使用 Parcel 搭建一个 Mock Service Worker （MSW）的测试服务，遇到一个问题：在 MSW 中注册 Service Worker 的文件（mockServiceWorker.js）是以静态文件相对路径加载，但是在 Parcel 启动的服务中加载不到此文件，导致 Service Worker 服务无法注册。
Parcel && Public
Mock Service Worker (MSW) 是一个令人兴奋的 API 模拟工具，它使用 Service Worker 拦截您的 HTTP 请求。这将允许您发出可以使用 DevTools 检查的实际 HTTP 请求，因为 MSW 在服务工作者级别上工作。MSW 也可以在您的测试代码中使用，这样您就不必为 HTTP 响应设置额外的测试模拟。
二、问题解析
Parcel 默认是将所有文件打包进 js 包中，不存在有单独的静态文件目录，类似于 Vue 和 React 脚手架生成项目的根目录下的 public/ 文件夹。
三、解决方案
下载插件 parcel-plugin-static-files-copy 来支持单独的静态文件打包。
- 安装插件
npm install -D parcel-plugin-static-files-copy
- 配置
package.json
// package.json
{
// ...
"staticFiles": {
"staticPath": "public",
"watcherGlob": "**"
}
}
- 重启服务
npm start
拓展：
- 多静态文件夹配置
// package.json
{
// ...
"staticFiles": {
"staticPath": ["public", "src/assets"]
}
}
- 指定输出文件夹
// package.json
{
// ...
"staticFiles": {
"staticPath": [
{
"outDirPattern": "**/assets",
"staticPath": "dir1"
},
{
"outDirPattern": "**/static",
"staticPath": "dir2"
}
]
},
}以上就是Parcel配置public静态文件目录过程解析的详细内容，更多关于Parcel配置public的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了详解HTML5 使用video标签实现选择摄像头功能的相关资料,希望通过本文能帮助到大家，实现这样的功能，需要的朋友可以参考下2017-10-10
这篇文章主要为大家介绍了WebAssembly使用方法研究,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
网站上面有这种切换效果...2006-06-06
这篇文章主要介绍了微信小程序 icon组件详细及实例代码的相关资料,需要的朋友可以参考下2016-10-10
这篇文章主要介绍了微信小程序 页面跳转和数据传递实例详解的相关资料,这里附有实例代码帮助到家学习理解，需要的朋友可以参考下2017-01-01
JSON是什么？JSON是JS的一种简单数据格式,JSON是JavaScript原生格式，它是一种严格的js对象的格式，JSON的属性名必须有双引号，如果值是字符串，也必须是双引号2017-03-03
这篇文章主要介绍了微信小程序的日期选择器的实例详解的相关资料,希望通过本能帮助到大家，需要的朋友可以参考下2017-09-09
这篇文章主要介绍了微信小程序navigator组件实例详解的相关资料,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了 微信小程序实现图片轮播及文件上传的相关资料,需要的朋友可以参考下2017-04-04
这篇文章主要介绍了微信小程序 共用变量值的实现的相关资料,需要的朋友可以参考下2017-07-07
最新评论