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的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家介绍了JS前端html2canvas手写示例问题剖析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要为大家介绍了JavaScript架构搭建前端监控如何采集异常数据，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
这篇文章主要介绍了微信小程序 swiper组件详解及实例代码的相关资料,需要的朋友可以参考下2016-10-10
这篇文章主要介绍了实现一个简单得数据响应系统，文章介绍的数据响应系统会用到Dep，其实，这就是一个依赖收集的容器， depend 收集依赖， notify 触发依赖，下面来看看详细的内容结介绍,需要的朋友可以参考一下2021-11-11
这篇文章主要介绍了WebWorker 封装 JavaScript 沙箱，在前文 quickjs 封装 JavaScript 沙箱详情 已经基于 quickjs 实现了一个沙箱，今天这篇文章再基于 web worker 实现备用方案,需要的朋友可以参考一下2021-10-10
这篇文章主要介绍了JavaScript实现队列结构的过程,队列即Queue，它是受限的线性表，先进先出，受限之处在于它只允许在表的前端进行删除操作，下面我们一起进入文章学习更加详细内容,需要的朋友也可以参考一下2021-12-12
这篇文章主要为大家介绍了ESLint规范TypeScript代码使用方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了微信小程序 实战小程序实例的相关资料,需要的朋友可以参考下2016-10-10
这篇文章主要为大家介绍了本地存储localStorage设置过期时间示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要为大家介绍了二维码条形码生成的JavaScript脚本库实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
最新评论