開發

Parcel 預設包含一個開發伺服器，支援熱更新、HTTPS、API 代理等等。

開發伺服器

#

當你執行預設的 parcel 指令時，Parcel 的內建開發伺服器會自動啟動，而 parcel serve 是 parcel 指令的捷徑。預設情況下，它會在 http://localhost:1234 啟動一個伺服器。如果埠號 1234 已在使用中，則會使用備用埠號。Parcel 啟動後，開發伺服器正在監聽的位置會列印到終端機。

開發伺服器支援多種選項，你可以透過 CLI 選項指定這些選項

熱更新

#

當你對程式碼進行變更時，Parcel 會自動重新建置已變更的檔案，並在瀏覽器中更新你的應用程式。預設情況下，Parcel 會完全重新載入頁面，但在某些情況下，它可能會執行熱模組替換 (HMR)。HMR 會在執行時期更新瀏覽器中的模組，無需重新整理整個頁面，進而改善開發體驗。這表示當你變更程式碼中的小部分內容時，可以保留應用程式狀態。

CSS 變更會透過 HMR 自動套用，無需重新載入頁面。這在使用內建 HMR 支援架構時也是如此，例如 React（透過 Fast Refresh）和 Vue。

如果您沒有使用架構，可以使用 module.hot API 選擇使用 HMR。這將防止頁面重新載入，而是就地套用更新。module.hot 僅在開發中可用，因此您需要在使用前檢查它是否存在。

if (module.hot) {
  module.hot.accept();
}

HMR 的運作方式是替換模組的程式碼，然後重新評估它及其所有父項。如果您需要自訂這個程序，可以使用 module.hot.accept 和 module.hot.dispose 方法進行連結。這些方法讓您可以在模組的新版本中儲存和還原狀態。

module.hot.dispose 接受一個回呼，當該模組即將被替換時呼叫。使用它來儲存任何狀態，以便在提供的 data 物件中還原到模組的新版本，或清理計時器等將在新的版本中重新建立的東西。

module.hot.accept 接受一個回呼函式，當該模組或其任何依賴項更新時執行。您可以使用它來使用儲存在 module.hot.data 中的資料，從模組的舊版本還原狀態。

if (module.hot) {
  module.hot.dispose(function (data) {
    // module is about to be replaced.
    // You can save data that should be accessible to the new asset in `data`
    data.updated = Date.now();
  });

  module.hot.accept(function (getParents) {
    // module or one of its dependencies was just updated.
    // data stored in `dispose` is available in `module.hot.data`
    let { updated } = module.hot.data;
  });
}

開發目標

#

使用開發伺服器時，一次只能建構一個目標。預設情況下，Parcel 使用支援現代瀏覽器的開發目標。這表示已停用針對較舊瀏覽器轉譯現代 JavaScript 語法。

如果你需要在舊瀏覽器中進行測試，你可以提供 --target CLI 選項來選擇要建置哪個目標。例如，要建置在 package.json 中定義的「舊版」目標，請使用 --target legacy。如果你沒有定義任何明確的目標，且在 package.json 中只有一個 browserslist，你可以使用隱含的預設目標，方法是使用 --target default。這將導致你的原始碼被轉譯，就像在生產環境中一樣。

請參閱 目標 文件以取得更多資訊。

延遲模式

#

在開發過程中，在開發伺服器啟動之前，等待整個應用程式建置完成可能會令人沮喪。當使用具有許多頁面的大型應用程式時，情況尤其如此。如果你只處理一個功能，你不應該需要等待所有其他功能建置完成，除非你導覽到它們。

你可以使用 --lazy CLI 標記來告訴 Parcel 在瀏覽器中要求檔案之前延遲建置檔案，這可以大幅減少開發建置時間。伺服器快速啟動，當你第一次導覽到某個頁面時，Parcel 只會建置該頁面所需的檔案。當你導覽到另一個頁面時，該頁面將根據需要建置。如果你導覽回先前已建置的頁面，它會立即載入。

parcel 'pages/*.html' --lazy

這也適用於動態 import()，而不仅仅是獨立的項目。因此，如果你有一個具有動態載入功能的頁面，該功能將在啟用後才建置。當它被要求時，Parcel 也會急切地建置所有依賴項，而不會等待它們被要求。

快取

#

Parcel 會將所有建置的內容快取到磁碟。如果您重新啟動開發伺服器，Parcel 只會重新建置自上次執行後已變更的檔案。Parcel 會自動追蹤所有建置中涉及的檔案、組態、外掛和開發相依性，並在有變更時精細地使快取失效。例如，如果您變更組態檔，所有仰賴該組態的原始碼檔都會重新建置。

預設情況下，快取會儲存在專案內的 .parcel-cache 資料夾中。您應該將此資料夾新增到 .gitignore（或等效的檔案）中，以避免在儲存庫中提交。您也可以使用 --cache-dir CLI 選項覆寫快取的位置。

也可以使用 --no-cache 旗標停用快取。請注意，這只會停用從快取中讀取資料，.parcel-cache 資料夾仍會建立。

HTTPS

#

有時，您可能需要在開發期間使用 HTTPS。例如，您可能需要使用特定主機名稱來進行驗證 cookie，或偵錯混合內容問題。Parcel 的開發伺服器開箱即支援 HTTPS。您可以使用自動產生的憑證，或提供您自己的憑證。

若要使用自動產生的自簽署憑證，請使用 --https CLI 旗標。第一次載入頁面時，您可能需要在瀏覽器中手動信任此憑證。

parcel src/index.html --https

若要使用自訂憑證，您需要使用 --cert 和 --key CLI 選項分別指定憑證檔和私人金鑰。

parcel src/index.html --cert certificate.cert --key private.key

API 代理

#

為了在開發網頁應用程式時更好地模擬實際的生產環境，您可以在 .proxyrc、.proxyrc.json 或 .proxyrc.js 檔案中指定應該代理到另一台伺服器（例如您的實際 API 伺服器或本機測試伺服器）的路徑。

.proxyrc / .proxyrc.json

#

在此 JSON 檔案中，您指定一個物件，其中每個金鑰都是 URL 比對的樣式，而值是 http-proxy-middleware 選項 物件

.proxyrc 
{
  "/api": {
    "target": "http://localhost:8000/",
    "pathRewrite": {
      "^/api": ""
    }
  }
}

此範例會導致 http://localhost:1234/api/endpoint 被代理到 http://localhost:8000/endpoint。

.proxyrc.js

#

對於更複雜的組態，.proxyrc.js 檔案允許您附加任何 connect 相容的中介軟體。首先，請確定您已將 http-proxy-middleware 安裝到您的專案中。此範例具有與上述 .proxyrc 版本相同的行為。

.proxyrc.js 
const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    createProxyMiddleware("/api", {
      target: "http://localhost:8000/",
      pathRewrite: {
        "^/api": "",
      },
    })
  );
};

如果您想將此寫成 ES 模組，您可以使用 .proxyrc.mjs 檔案，或是在 package.json 中使用 "type": "module" 選項。

檔案觀察器

#

為了支援最佳的快取和開發體驗，Parcel 使用一種以 C++ 編寫的極快速觀察器，該觀察器與每個作業系統的低階檔案觀察功能整合。使用此觀察器，Parcel 會觀察專案根目錄中的每個檔案（包括所有 node_modules）。根據這些檔案的事件和元資料，Parcel 會判斷哪些檔案需要重新建置。

檔案觀察已知問題

#
安全寫入
#

有些文字編輯器和 IDE 具有稱為「安全寫入」的功能，透過在儲存時複製檔案並重新命名檔案來防止資料遺失。不過，此功能可能會妨礙自動偵測檔案更新。

若要停用安全寫入，請使用以下提供的選項

Linux：裝置上沒有空間
#

根據專案大小和作業系統的監看器限制，在 Linux 上執行 Parcel 時可能會出現此錯誤。若要解決此問題，請變更 fs.inotify 的 sysctl 設定，將 max_user_watches 的值設定為較高值。

您可以在 /etc/sysctl.conf 中新增或變更以下列行：

fs.inotify.max_queued_events = 16384
fs.inotify.max_user_instances = 128
fs.inotify.max_user_watches = 16384

如果此錯誤持續發生，您可以嘗試將值再增加。

使用 Dropbox、Google 雲端硬碟或其他雲端儲存解決方案
#

建議不要將 Parcel 專案放在使用 Dropbox 或 Google 雲端硬碟等工具同步到雲端的資料夾中。這些解決方案會產生許多檔案系統事件，可能會干擾我們的監看器並造成不必要的重新建置。

自動安裝

#

當您使用未包含在預設中的語言或外掛程式時，Parcel 會自動將必要的相依性安裝到您的專案中。例如，如果您包含 .sass 檔案，Parcel 會安裝 @parcel/transformer-sass 外掛程式。發生這種情況時，您會在終端機中看到一則訊息，而新的相依性會新增到 package.json 中的 devDependencies。

Parcel 會根據鎖定檔案自動偵測您在專案中使用的套件管理員。例如，如果找到 yarn.lock，則會使用 Yarn 安裝套件。如果找不到鎖定檔案，則會根據系統中已安裝的內容選擇套件管理員。目前支援下列套件管理員，並依優先順序排列

自動安裝預設只會在開發期間發生。在製作期間，如果缺少相依性，製作會失敗。您也可以在開發期間使用 --no-autoinstall CLI 標記來停用自動安裝。