什么时候不应该接受 webpack Hot Module Reloading？答案

【问题标题】：When shouldn't you accept webpack Hot Module Reloading?什么时候不应该接受 webpack Hot Module Reloading？
【发布时间】：2016-05-17 07:21:47
【问题描述】：

因此，对于 webpack，HMR 仅在您的模块或模块的父级中有此代码时才能工作：

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

这让我想知道你为什么会拒绝 HMR。使用它是否有性能成本或其他负面影响？

docs 对此问题不是很清楚。

【问题讨论】：

【解决方案1】：

你只能在你的代码中使用 HMR

由于大多数代码不是无状态的，因此需要做一些额外的工作。实现此目的的常用方法是用代理替换导出的函数（react-hot-loader 以类似的方式工作）。因此，可以在不更新其他依赖项的情况下替换代理背后的实际实现。

例如，想象一下这个（有问题的）模块：

function add(a, b) {
    return a - b;
}

export add;

在注意到这个错误之后，你不能只是动态地换掉add 函数，因为其他模块持有对它的引用。这就是为什么您需要一个包装导出函数的代理：

function _add(a, b) {
    return a - b;
}

export function add(a, b) {
    return _add(a, b);
};

现在您无需更新其他模块即可轻松换出_add。这适用于函数，但不适用于其他类型，如导出的对象、数字、字符串。但是，使用ES2015 proxies，可以导出占位符，在所有类型上都像代理一样工作。

因此，HMR 面临的挑战是您需要用新代码替换旧代码，而不会留下任何奇怪的状态。这仍然很难以通用的方式实现。

【讨论】：