Parcel配置public靜態(tài)文件目錄過程解析

更新時間：2023年06月14日 10:44:08 作者：天問

這篇文章主要為大家介紹了Parcel配置public靜態(tài)文件目錄實現(xiàn)過程解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

一、前言

最近使用 Parcel 搭建一個 Mock Service Worker （MSW）的測試服務，遇到一個問題：在 MSW 中注冊 Service Worker 的文件（mockServiceWorker.js）是以靜態(tài)文件相對路徑加載，但是在 Parcel 啟動的服務中加載不到此文件，導致 Service Worker 服務無法注冊。

Parcel && Public

Mock Service Worker (MSW) 是一個令人興奮的 API 模擬工具，它使用 Service Worker 攔截您的 HTTP 請求。這將允許您發(fā)出可以使用 DevTools 檢查的實際 HTTP 請求，因為 MSW 在服務工作者級別上工作。MSW 也可以在您的測試代碼中使用，這樣您就不必為 HTTP 響應設置額外的測試模擬。

二、問題解析

Parcel 默認是將所有文件打包進 js 包中，不存在有單獨的靜態(tài)文件目錄，類似于 Vue 和 React 腳手架生成項目的根目錄下的 public/ 文件夾。

三、解決方案

下載插件 parcel-plugin-static-files-copy 來支持單獨的靜態(tài)文件打包。

安裝插件

npm install -D parcel-plugin-static-files-copy

配置 package.json

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

重啟服務

npm start

拓展：

多靜態(tài)文件夾配置

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

指定輸出文件夾

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

以上就是Parcel配置public靜態(tài)文件目錄過程解析的詳細內(nèi)容，更多關于Parcel配置public的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: