模組熱替換(Hot Module Replacement)


模組熱替換(Hot Module Replacement)
模組熱替換(HMR)透過在執行時間自動更新瀏覽器中的模組,而不需要刷新整個頁面來改進開發體驗。這意味著應用程式狀態可以在小的更改時保留。 Parcel 的 HMR 實作支援開箱即用的JavaScript 和 CSS 資源。在生產模式下打包時,HMR 自動被停用。
在儲存檔案時,Parcel 會重建所更改的內容,並將更新傳送到包含新程式碼的任何正在執行的用戶端。新的程式碼會取代舊版本,並與所有的父級資源一起重新計算。你可以使用 module.hot API 掛接到這個過程中,這個API可以在一個模組即將被丟棄時或當一個新版本進入時通知你的程式碼。像 react-hot-loader 這樣的專案可以幫助你完成這個過程,並透過 Parcel 開箱即用。
有兩種已知的方法:module.hot.accept 和 module.hot.dispose 。你可以在module.hot.accept中使用回調函數,該函數在模組或其任何依賴項被更新時執行。當模組即將被取代時,module.hot.dispose 回呼函數會被呼叫。

if (module.hot) {
  module.hot.dispose(function () {
    // 模块即将被替换时
  });
  module.hot.accept(function () {
    // 模块或其依赖项之一刚刚更新时
  });
}

安全寫入
一些文字編輯器和IDE 有一個名為safe write(安全寫入)的功能,這基本上可以防止資料遺失,透過取得檔案的副本並在儲存時對其進行重新命名。
使用模組熱載入(HMR)時,此功能會阻止檔案更新的自動偵測,若要停用safe write(安全寫入),請使用下方提供的選項:
    Sublime Text 3 將atomic_save: "false " 加到你的使用者偏好設定。
    IntelliJ 在首選項中使用搜尋來尋找 "safe write" 並停用它。 *Vim 將 :set backupcopy=yes 加到你的設定。
    WebStorm 取消選取 偏好設定 > 外觀與行為 > 系統設定 中的 "safe write" 。