Question

模组热替换 (HMR, Hot Module Replacement) 可提升你的开发效率，模组热替换并不会重整页面，而是即时地更新浏览器中的模组，让你得以在更动某些小地方时仍可保留原本的状态。

Parcel 内建支援 JavaScript 及 CSS 的模组热替换，在 production 模式中将会自动停用此功能。

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 （使用 或 时）环境中启用，在 production （使用 时）环境时则会自动停用此功能以避免不必要的副作用。

你可以透过 选项停用此功能。

安全写入

有些文字编辑器和 IDE 提供 安全写入 功能，此功能基本上是在存档时另外複製一份档案并重新命名，以此避免资料的遗失。但使用安全写入时， 模组热替换的档案更新侦测会被此功能阻碍，若要停用安全写入可透过下列的设定方法：

• Sublime Text 3：在设定中增加 atomic_save: "false"。
• IntelliJ：在设定中搜寻 "safe write" 并停用。
• Vim： 在设定中新增 :set backupcopy=yes。
• WebStorm：在 Preferences > Appearance & Behavior > System Settings 中取消勾选 Use "safe write"。