在Parcel打包時自動複製靜態檔案（public、static、assets等）V1、V2適用
kyle

功能說明

在現代前端網頁開發時需要一個打包工具將一堆JavaScript套件打包起來，打包的過程中又有轉譯程式、壓縮程式、壓縮圖片等步驟，Parcel是個取代傳統Webpack的好東西，因為它可以將許多步驟簡化，號稱零步驟打包工具。但是Parel可以不用配置設定打包的原理，是因為Parcel會從一個起始入口（通常是index.html）作為開端，分析從入口開始一切會被引用的檔案。也就是將index.html之類的入口當作一個root節點，走訪整個樹狀結構。有一些沒透過import指令引用的檔案會被Parcel忽略，這時候需要一些Parcel的外掛來幫忙。

在使用前需要先確認自己使用的Parcel版本，近幾年使用的Parcel如果沒有使用版本，那就是第二代的，請直接看V2即可。

Parcel V1

安裝 parcel-plugin-static-files-copy

# 使用YARN安裝
yarn add parcel-plugin-static-files-copy --dev
# 使用NPM安裝
npm install -D parcel-plugin-static-files-copy

使用方式

使用parcel run build之類的打包指令，parcel就會自動把專案根目錄的static資料夾裡面的檔案直接複製到打包後的資料夾（預設是dist資料夾）。

預設只會複製static資料夾，如果需要複製其他地方的資料，可以打開package.json檔案增加以下資料。

{
  // package.json 的其他設定
  "staticFiles": {
    "staticPath": [
      "資料夾1",
      "資料夾2/子資料夾",
      "資料夾3/檔案名稱"
    ]
  }
}

輸入資料夾名稱、子資料夾、檔案名稱皆可。更多資訊可以參考作者的GitHub說明。

https://github.com/elwin013/parcel-plugin-static-files-copy

Parcel V2

安裝 parcel-reporter-static-files-copy

# 使用YARN安裝
yarn add parcel-reporter-static-files-copy --dev
# 使用NPM安裝
npm install -D parcel-reporter-static-files-copy

使用方式

然後在專案根目錄新增一個檔案取名為.parcelrc，Windows用戶要注意這個檔案是使用半型.開頭，沒有副檔名，在LInux、Mac等類Unix的作業系統中這代表是預設不顯示的檔案。

{
  "extends": ["@parcel/config-default"],
  "reporters":  ["...", "parcel-reporter-static-files-copy"]
}

這邊要注意，上面的"reporters"裡面有一個"..."要保留著，我一開始以為只是示意用的就把它刪除了，然後npm start跑起來會連不上。

二代的功能與一代外掛一樣，預設會在打包時將根目錄的static資料夾內的檔案複製到dist資料夾內，或是開發者指定的位置。如果除了static資料夾之外，還需要複製其他的資料夾、子資料夾、檔案的話，可以在package.json設定檔內輸入以下設定。

{
  // package.json 的其他設定
  "staticFiles": {
    "staticPath": [
      "資料夾A",
      "資料夾B/子資料夾",
      "資料夾C/檔案名稱"
    ]
  }
}

這個Parcel二代跟一代的外掛是同一個作者做的，更多資訊可以參考作者的GitHub頁面。

https://github.com/elwin013/parcel-reporter-static-files-copy

Post Views: 4,568
Tags: