Parcel配置public静态文件目录

最近使用 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

2. 配置 package.json

// package.json
{
    // ...
    "staticFiles": {
        "staticPath": "public",
        "watcherGlob": "**"
    }
}

3. 重启服务

npm start

拓展：

• 多静态文件夹配置

// package.json
{
    // ...
    "staticFiles": {
        "staticPath": ["public", "src/assets"]
    }
}

• 指定输出文件夹

// package.json
{
    // ...
    "staticFiles": {
        "staticPath": [
            {
                "outDirPattern": "**/assets",
                "staticPath": "dir1"
            },
            {
                "outDirPattern": "**/static",
                "staticPath": "dir2"
            }
        ]
  },
}

欢迎访问：天问博客