功能說明

在現代前端網頁開發時需要一個打包工具將一堆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"]
}

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

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

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

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

發佈留言