Parcel配置public静态文件目录

字数：385 阅读时长：1分钟 阅读：85

最近使用 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 来支持单独的静态文件打包。

  1. 安装插件
1
npm install -D parcel-plugin-static-files-copy
  1. 配置 package.json
1
2
3
4
5
6
7
8
// package.json
{
    // ...
    "staticFiles": {
        "staticPath": "public",
        "watcherGlob": "**"
    }
}
  1. 重启服务
1
npm start

拓展：

  • 多静态文件夹配置
1
2
3
4
5
6
7
// package.json
{
    // ...
    "staticFiles": {
        "staticPath": ["public", "src/assets"]
    }
}
  • 指定输出文件夹
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// package.json
{
    // ...
    "staticFiles": {
        "staticPath": [
            {
                "outDirPattern": "**/assets",
                "staticPath": "dir1"
            },
            {
                "outDirPattern": "**/static",
                "staticPath": "dir2"
            }
        ]
  },
}

欢迎访问：天问博客

本文作者： Tiven
发布时间： 2022-08-31
最后更新： 2023-03-02
本文标题： Parcel配置public静态文件目录
本文链接： https://www.tiven.cn/p/1109943e/
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处！
欢迎留言，提问 ^_^