Parcel配置public靜態(tài)文件目錄過(guò)程解析
一、前言
最近使用 Parcel 搭建一個(gè) Mock Service Worker (MSW)的測(cè)試服務(wù),遇到一個(gè)問(wèn)題:在 MSW 中注冊(cè) Service Worker 的文件(mockServiceWorker.js)是以靜態(tài)文件相對(duì)路徑加載,但是在 Parcel 啟動(dòng)的服務(wù)中加載不到此文件,導(dǎo)致 Service Worker 服務(wù)無(wú)法注冊(cè)。

Parcel && Public
Mock Service Worker (MSW) 是一個(gè)令人興奮的 API 模擬工具,它使用 Service Worker 攔截您的 HTTP 請(qǐng)求。這將允許您發(fā)出可以使用 DevTools 檢查的實(shí)際 HTTP 請(qǐng)求,因?yàn)?MSW 在服務(wù)工作者級(jí)別上工作。MSW 也可以在您的測(cè)試代碼中使用,這樣您就不必為 HTTP 響應(yīng)設(shè)置額外的測(cè)試模擬。
二、問(wèn)題解析
Parcel 默認(rèn)是將所有文件打包進(jìn) js 包中,不存在有單獨(dú)的靜態(tài)文件目錄,類似于 Vue 和 React 腳手架生成項(xiàng)目的根目錄下的 public/ 文件夾。
三、解決方案
下載插件 parcel-plugin-static-files-copy 來(lái)支持單獨(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)文件目錄過(guò)程解析的詳細(xì)內(nèi)容,更多關(guān)于Parcel配置public的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
詳解HTML5 使用video標(biāo)簽實(shí)現(xiàn)選擇攝像頭功能
這篇文章主要介紹了詳解HTML5 使用video標(biāo)簽實(shí)現(xiàn)選擇攝像頭功能的相關(guān)資料,希望通過(guò)本文能幫助到大家,實(shí)現(xiàn)這樣的功能,需要的朋友可以參考下2017-10-10
微信小程序 頁(yè)面跳轉(zhuǎn)和數(shù)據(jù)傳遞實(shí)例詳解
這篇文章主要介紹了微信小程序 頁(yè)面跳轉(zhuǎn)和數(shù)據(jù)傳遞實(shí)例詳解的相關(guān)資料,這里附有實(shí)例代碼幫助到家學(xué)習(xí)理解,需要的朋友可以參考下2017-01-01

