請注意: 此頁為 Parcel 1 的說明,Parcel 2 版本的說明頁面尚未完成。

🔥 模組熱替換

模組熱替換 (HMR, Hot Module Replacement) 可提升你的開發效率,模組熱替換並不會重整頁面,而是即時地更新瀏覽器中的模組,讓你得以在更動某些小地方時仍可保留原本的狀態。Parcel 支援 JavaScript 及 CSS 的模組熱替換。

從 1.12.0 版開始預設已改為於檔案更動時重整頁面。你可以用下列的指令啟用真正的模組熱替換,這僅適用於開發環境,模組熱替換在 production 模式中會自動停用。

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

Parcel 會在你更動檔案時重新編譯更動的部分,並將更新發送至所有正在執行的用戶端,使用新的程式碼來替換舊版本,同時也將重新評估所有父元件是否需要更新。你可以使用 module.hot API 來涉入這個過程,它可以在模組即將被處理或有新版本傳入時通知你的程式。Parcel 支援了 react-hot-loader 等專案以協助達成這個過程。

Parcel 提供了兩個方法:module.hot.accept 及 module.hot.dispose,前者能在模組或其相依套件更新時執行回呼函式,後者則在模組即將被替換時執行回呼函式。

if (module.hot) {
  module.hot.dispose(function() {
    // 模組即將被替換
  })

  module.hot.accept(function() {
    // 模組或其相依套件剛剛更新
  })
}

自動安裝相依套件

為了讓開發者可以不用離開 Parcel 或開啟多個終端機視窗, Parcel 在 node_modules 中找不到相依套件時,會自動嘗試使用 yarn 或 npm 來安裝(取決於是否有 yarn.lock 這個檔案)。

此功能只會在 development (使用 serve 或 watch 時)環境中啟用,在 production (使用 build 時)環境時則會自動停用此功能以避免不必要的副作用。

你可以透過 --no-autoinstall 選項停用此功能。

安全寫入

有些文字編輯器和 IDE 提供 安全寫入 功能,此功能基本上是在存檔時另外複製一份檔案並重新命名,以此避免資料的遺失。但使用安全寫入時, 模組熱替換的檔案更新偵測會被此功能阻礙,若要停用安全寫入可透過下列的設定方法:

協助我們讓本文件更加完善

若有什麼內容遺漏了或是敘述不清楚的地方,請在本站的 repository 中開啟一個 issue 或者編輯此頁面。