Parcel 熱模塊重載(HMR)

熱模塊重載(HMR)

熱模塊重載 (HMR) 在運(yùn)行時(shí)自動(dòng)更新瀏覽器中的模塊優(yōu)化開發(fā)體驗(yàn)，無需刷新整個(gè)頁面。這意味著在您代碼小幅更改時(shí)可以保留應(yīng)用程序的狀態(tài)。Parcel 的 HMR 實(shí)現(xiàn)支持開箱即用的 JavaScript 和 CSS 資源。HMR 構(gòu)建在生產(chǎn)模式下時(shí)自動(dòng)禁用。

保存文件時(shí)，Parcel 將重新編譯所更改的內(nèi)容，并將包含新代碼的更新發(fā)送到任何正在運(yùn)行的客戶端。新的代碼會(huì)替換舊版本的代碼并執(zhí)行，其所有父模塊代碼也會(huì)重新執(zhí)行。你可以使用 module.hot API 對(duì)此過程進(jìn)行 hook ，編寫這段代碼會(huì)在你處理模塊時(shí)或有新版本進(jìn)入時(shí)通知您。類似項(xiàng)目 react-hot-loader 可以幫助你完成該過程，并通過 Parcel 實(shí)現(xiàn)開箱即用。

有兩種已知方法： module.hot.accept 和 module.hot.dispose 。你可以調(diào)用 module.hot.accept 并賦予一個(gè)回調(diào)函數(shù)，該函數(shù)會(huì)在模塊或其他依賴項(xiàng)被更新時(shí)執(zhí)行。當(dāng)該模塊即將被替換時(shí)，module.hot.dispose 回調(diào)函數(shù)會(huì)被調(diào)用。

if (module.hot) {
  module.hot.dispose(function() {
    // 模塊即將被替換時(shí)
  })

  module.hot.accept(function() {
    // 模塊或其依賴項(xiàng)之一剛剛更新時(shí)
  })
}

自動(dòng)安裝依賴項(xiàng)

每當(dāng) Parcel 遇到符合 node_module 模式且無法找到它的依賴項(xiàng)時(shí)，Parcel 會(huì)嘗試使用 yarn 或 npm 安裝此依賴項(xiàng)這取決于是否找到 yarn.lock 文件。這可以避免開發(fā)人員不得不退出 parcel 或打開多個(gè)終端窗口來安裝依賴。

這只會(huì)在 development 模式下觸發(fā)（使用 serve 或 watch），然而在生產(chǎn)模式是禁止的（使用build）這樣避免在部署的時(shí)候產(chǎn)生意想不到的副作用。

你可以禁止使用這個(gè)特性 --no-autoinstall。

安全寫入(Safe Write)

一些文本編輯器和 IDE 均有安全寫入的功能，這基本上可以防止數(shù)據(jù)丟失，通過獲取文本的副本并在保存時(shí)對(duì)其進(jìn)行重命名操作。

當(dāng)使用熱模塊重載 (HMR) 時(shí)，此功能會(huì)阻止文件更新的自動(dòng)檢測(cè)，要禁用安全寫入，請(qǐng)使用下列提供的選項(xiàng):

• Sublime Text 3 將 atomic_save: "false" 添加到你用戶設(shè)置中。
• IntelliJ 在設(shè)置中使用搜索來查找 "safe write" 并將其禁用。
• Vim 添加 :set backupcopy=yes 到你的設(shè)置中.
• WebStorm 在 Preferences > Appearance & Behavior > System Settings 中取消選中 "safe write" 選項(xiàng)。