快捷導(dǎo)航

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

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

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

一、前言

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

Parcel && Public

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

二、問題解析

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

三、解決方案

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

安裝插件

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

配置 package.json

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

重啟服務(wù)

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)文件目錄過程解析的詳細(xì)內(nèi)容，更多關(guān)于Parcel配置public的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

JS前端html2canvas手寫示例問題剖析
這篇文章主要為大家介紹了JS前端html2canvas手寫示例問題剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
JavaScript架構(gòu)搭建前端監(jiān)控如何采集異常數(shù)據(jù)
這篇文章主要為大家介紹了JavaScript架構(gòu)搭建前端監(jiān)控如何采集異常數(shù)據(jù)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-06-06
微信小程序 swiper組件詳解及實(shí)例代碼
這篇文章主要介紹了微信小程序 swiper組件詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下
2016-10-10
實(shí)現(xiàn)一個簡單得數(shù)據(jù)響應(yīng)系統(tǒng)
這篇文章主要介紹了實(shí)現(xiàn)一個簡單得數(shù)據(jù)響應(yīng)系統(tǒng)，文章介紹的數(shù)據(jù)響應(yīng)系統(tǒng)會用到Dep，其實(shí)，這就是一個依賴收集的容器， depend 收集依賴， notify 觸發(fā)依賴，下面來看看詳細(xì)的內(nèi)容結(jié)介紹,需要的朋友可以參考一下
2021-11-11
WebWorker 封裝 JavaScript 沙箱詳情
這篇文章主要介紹了WebWorker 封裝 JavaScript 沙箱，在前文 quickjs 封裝 JavaScript 沙箱詳情已經(jīng)基于 quickjs 實(shí)現(xiàn)了一個沙箱，今天這篇文章再基于 web worker 實(shí)現(xiàn)備用方案,需要的朋友可以參考一下
2021-10-10
JavaScript實(shí)現(xiàn)隊列結(jié)構(gòu)過程
這篇文章主要介紹了JavaScript實(shí)現(xiàn)隊列結(jié)構(gòu)的過程,隊列即Queue，它是受限的線性表，先進(jìn)先出，受限之處在于它只允許在表的前端進(jìn)行刪除操作，下面我們一起進(jìn)入文章學(xué)習(xí)更加詳細(xì)內(nèi)容,需要的朋友也可以參考一下
2021-12-12
ESLint規(guī)范TypeScript代碼使用方法
這篇文章主要為大家介紹了ESLint規(guī)范TypeScript代碼使用方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11
這篇文章主要介紹了微信小程序實(shí)戰(zhàn)小程序?qū)嵗南嚓P(guān)資料,需要的朋友可以參考下
2016-10-10