模塊熱替換(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" 。