目標

Parcel 可以同時以多種不同的方式編譯您的原始碼。這些方式稱為目標。例如，您可以針對較新的瀏覽器設定「現代」目標，針對較舊的瀏覽器設定「傳統」目標。

入口

「入口」是 Parcel 在建置您的原始碼時開始處理的檔案。它們可以在 CLI 上指定，或使用 package.json 中的 source 欄位指定。

`$ parcel <entries>`

可以在 CLI 上為任何 Parcel 指令指定一個或多個入口檔案。

$ parcel src/a.html src/b.html

入口可以指定為 glob，以一次比對多個檔案。請務必將 glob 包在單引號中，以確保 glob 沒有被您的 shell 解析，而是直接傳遞給 Parcel。這可確保 Parcel 可以自動選取與 glob 比對的新建立檔案，而不需要重新啟動。

$ parcel './src/*.html'

入口也可以是目錄，這種情況下必須存在包含 source 欄位的 package.json 檔案。詳情請見下方。

`package.json#source`

package.json 中的 source 欄位可以指定一個或多個入口檔案。

{
  "source": "src/index.html"
}

{
  "source": ["src/a.html", "src/b.html"]
}

`package.json#targets.*.source`

package.json 中宣告的任何目標內的 source 欄位可以指定一個或多個特定於該目標的入口檔案。例如，您可以同時建置您的前端和後端，或您的桌上型和行動裝置應用程式。詳情請見下方有關組態目標的說明。

{
  "targets": {
    "frontend": {
      "source": "app/index.html"
    },
    "backend": {
      "source": "api/index.js"
    }
  }
}

目標

Parcel 會追蹤每個已解析入口中的依賴項，以針對一個或多個目標建置您的原始碼。目標會指定輸出目錄或檔案路徑，以及有關您的程式碼應如何編譯的資訊。

預設情況下，Parcel 會包含一個單一的隱式目標，輸出至 dist 資料夾。這可以使用 --dist-dir CLI 選項覆寫。

$ parcel build src/index.html --dist-dir output

輸出目錄也可以使用 targets 欄位在 package.json 中指定。這將覆寫 --dist-dir CLI 選項。

{
  "targets": {
    "default": {
      "distDir": "./output"
    }
  }
}

環境

除了輸出位置之外，目標會指定您的程式碼執行的「環境」資訊。它們會告訴 Parcel 要為哪種類型的環境建置（例如瀏覽器或 Node.js），以及您支援的每個引擎版本。這會影響 Parcel 編譯您的程式碼的方式，包括要轉譯的語法。

`package.json#browserslist`

對於瀏覽器目標，package.json 中的 browserslist 欄位可用於指定您支援的瀏覽器。您可以根據使用統計資料或特定瀏覽器的版本範圍查詢。請參閱 browserslist 文件以取得更多資訊。

{
  "browserslist": "> 0.5%, last 2 versions, not dead"
}

`package.json#engines`

對於 Node.js 和其他目標，package.json 中的 engines 欄位可用於指定您支援的版本。引擎使用 semver 範圍指定。

{
  "engines": {
    "node": ">= 12"
  }
}

隱式環境

當一個檔案依賴於另一個檔案時，環境會從其父項繼承。但是，您如何依賴資產可能會改變環境的一些屬性。例如，當依賴服務工作者時，環境會自動變更為服務工作者內容，以便適當編譯程式碼。

navigator.serviceWorker.register(new URL('service-worker.js', import.meta.url));

差異化套件

「差異化套件」是為不同的目標發送多個版本的程式碼，並允許瀏覽器選擇最適合下載的版本。當您在 HTML 檔案中使用 <script type="module"> 元素，並且環境指定的某些瀏覽器不原生支援 ES 模組時，Parcel 會自動產生 <script nomodule> 替代方案。

<script type="module" src="app.js"></script>

編譯為

<script type="module" src="app.c9a6fe.js"></script>
<script nomodule src="app.f7d631.js"></script>

這允許支援 ES 模組的現代瀏覽器下載更小的套件，同時仍使用備份支援舊版瀏覽器。透過避免轉譯現代 JavaScript 語法（例如類別、箭頭函式、非同步/等待等），這可以大幅減少套件大小並改善載入時間。

這會根據您的瀏覽器目標自動發生，如在 package.json 中的 "browserslist" 欄位中所宣告。如果未宣告 browserslist，或所有瀏覽器目標都原生支援 ES 模組，則不會產生 nomodule 備份。

多個目標

您可能有多個目標，以便同時為多個不同環境建置您的原始碼。例如，您可能為應用程式設定「現代」和「舊版」目標，或為函式庫設定 ES 模組和 CommonJS 目標（請參閱下方）。

目標使用 package.json 中的 targets 欄位進行設定。每個目標都有名稱，指定為 targets 欄位下的金鑰，以及關聯的設定物件。例如，每個目標中的 engines 欄位可用於自訂其編譯環境。

{
  "targets": {
    "modern": {
      "engines": {
        "browsers": "Chrome 80"
      }
    },
    "legacy": {
      "engines": {
        "browsers": "> 0.5%, last 2 versions, not dead"
      }
    }
  }
}

當指定多個目標時，輸出預設會寫入 dist/${targetName}（例如，在上述範例中為 dist/modern 和 dist/legacy）。這可以使用每個目標中的 distDir 欄位進行自訂。或者，如果目標只有一個項目，可以使用對應於目標名稱的頂層 package.json 欄位，為輸出指定確切的檔案名稱。

{
  "modern": "dist/modern.js",
  "legacy": "dist/legacy.js",
  "targets": {
    "modern": {
      "engines": {
        "browsers": "Chrome 80"
      }
    },
    "legacy": {
      "engines": {
        "browsers": "> 0.5%, last 2 versions, not dead"
      }
    }
  }
}

函式庫目標

Parcel 包含一些內建目標，用於建置函式庫。這些目標包含 main、module、browser 和 types 欄位。

{
  "name": "my-library",
  "version": "1.0.0",
  "source": "src/index.js",
  "main": "dist/main.js",
  "module": "dist/module.js",
  "types": "dist/types.d.ts"
}

預設情況下，函式庫目標不會將相依性從 node_modules 捆綁在一起。此外，預設情況下會停用函式庫的縮小功能。這些可以使用 targets 欄位中的適當選項來覆寫（請參閱下方）。範圍提升無法停用函式庫目標。

函式庫目標會根據目標自動輸出原生 ES 模組或 CommonJS。

main – 預設情況下，輸出 CommonJS。如果使用 .mjs 副檔名，或指定 "type": "module" 欄位，則會輸出 ES 模組。
module – 輸出 ES 模組。
browser – main 欄位的瀏覽器特定覆寫。輸出 CommonJS。

如果還有可用的 browser 目標，或指定 engines.node 且未指定瀏覽器目標，則預設情況下會為 Node 環境編譯 main 和 module。否則，預設情況下會為瀏覽器環境編譯。這可以使用目標設定中的 context 選項來覆寫（請參閱下方）。

若要讓 Parcel 忽略其中一個欄位，請在 targets 欄位中指定 false。

{
  "main": "unrelated.js",
  "targets": {
    "main": false
  }
}

請參閱使用 Parcel 建置函式庫以了解使用 Parcel 建置函式庫的簡介。

目標選項

`context`

'node' | 'browser' | 'web-worker' | 'service-worker' | 'worklet' | 'electron-main' | 'electron-renderer'

context 屬性定義要建置哪種類型的環境。這會告訴 Parcel 有哪些環境特定的 API 可用，例如 DOM、Node 檔案系統 API 等。

對於內建函式庫目標（例如 main 和 module），context 會自動推斷。請參閱上方的函式庫目標以取得更多詳細資訊。

`engines`

覆寫此目標中頂層 package.json#engines 和 browserslist 欄位中定義的引擎。目標中的 engines.browsers 欄位可以使用，就像 browserslist 一樣。請參閱上方的環境和多個目標以取得更多資訊。

`outputFormat`

'global' | 'esmodule' | 'commonjs'

定義要輸出的模組類型。

global – 一個可以在瀏覽器的 <script> 標籤中載入的傳統指令碼。不支援函式庫目標。
esmodule – 使用 import 和 export 陳述式的 ES 模組。可以在瀏覽器的 <script type="module"> 標籤中載入，或由 Node.js 或其他套件管理員載入。
commonjs – 使用 require 和 module.exports 的 CommonJS 模組。可以在 Node.js 或其他套件管理員載入。

對於內建函式庫目標（例如 main 和 module），outputFormat 會自動推論。在目標頂層 package.json 欄位中定義的檔案副檔名也可能會影響輸出格式。請參閱上方的函式庫目標以取得更多詳細資訊。

`scopeHoist`

啟用或停用範圍提升。預設情況下，範圍提升會啟用於生產組建。執行 parcel build 時，可以使用 --no-scope-hoist CLI 旗標停用範圍提升。也可以透過在目標設定中設定 scopeHoist 選項來停用範圍提升。

`isLibrary`

設定為 true 時，目標會視為會發佈到 npm 並由其他工具使用，而不是直接在瀏覽器或其他目標環境中使用的函式庫。當為 true 時，outputFormat 選項必須是 esmodule 或 commonjs，且 scopeHoist 不能設定為 false。

對於內建函式庫目標（例如 main 和 module），這會自動設定為 true。有關更多詳細資訊，請參閱上方的函式庫目標。

`最佳化`

啟用或停用最佳化（例如縮小）。確切行為是由外掛程式決定的。預設情況下，最佳化會在生產組建（parcel build）期間啟用，函式庫目標除外。這可以使用 --no-optimize CLI 標記或目標組態中的 optimize 選項來覆寫。

`includeNodeModules`

決定是否要綑綁 node_modules 或將其視為外部。對於瀏覽器目標，預設為 true，對於函式庫目標，預設為 false。可能的值為

false – 不包含 node_modules 中的任何檔案。
陣列 – 要包含的套件名稱清單。在以下範例中，只有 react 會被綑綁。node_modules 中的所有其他檔案都會被排除。
```
{
  "targets": {
    "main": {
      "includeNodeModules": ["react"]
    }
  }
}
```
物件 – 套件名稱對應至布林值的對應。如果套件未列出，則會包含。在以下範例中，所有 node_modules 除了 react 會被綑綁。
```
{
  "targets": {
    "main": {
      "includeNodeModules": {
        "react": false
      }
    }
  }
}
```

`sourceMap`

啟用或停用原始碼對應，並設定原始碼對應選項。預設情況下，原始碼對應會啟用。這可以使用 --no-source-maps CLI 標記或將目標組態中的 sourceMap 選項設定為 false 來覆寫。

sourceMap 選項也接受具有下列選項的物件。

inline – 是否將原始碼對應內嵌為資料 URL 到綑綁中，而不是連結到它作為一個單獨的輸出檔案。
inlineSources – 是否將原始原始碼內嵌到原始碼對應中，而不是從 sourceRoot 載入它們。在為生產組建瀏覽器目標時，這預設設定為 true。
sourceRoot – 載入原始程式碼的 URL。在開發時使用內建 Parcel dev 伺服器時會自動設定。否則，它會預設為從專案根目錄到套件的相對路徑。

`source`

覆寫目標中 package.json 中頂層的 source 欄位。這允許每個目標有不同的條目。有關更多詳細資訊，請參閱 package.json#targets.*.source。

`distDir`

設定此目標中已編譯套件的寫入位置。預設情況下，如果只給出一個目標，則為 dist，如果有多個目標，則為 dist/${targetName}。有關更多詳細資訊，請參閱目標。

`publicUrl`

設定此套件在執行時載入的基本 URL。套件從 distDir 的相對路徑會自動附加。如果套件從與網站相同的網域載入，則 publicUrl 可以是完全限定的 URL（例如 https://some-cdn.com/ 或絕對路徑（例如 /public）。

預設情況下，publicUrl 為 /。如果 HTML 檔案和其他資源部署到相同位置，這是一個很好的預設值。如果您將資源部署到不同的位置，您可能需要設定 publicUrl。也可以使用 --public-url CLI 選項設定公開 URL。

在大多數情況下，套件會使用從父套件到子套件的相對路徑載入。這允許將部署移至新位置而無需重新建置（例如將暫存建置提升至正式環境）。當無法使用相對路徑時（例如在 HTML 中），會使用 publicUrl。