在开发前端应用程序的过程中，经常需要实现模块热替换功能。这种功能可以允许开发者在不重新加载整个应用程序的情况下更新源代码中的某些部分。而 npm 包 hotter-require 就是一种实现模块热替换的工具。
hotter-require 是什么？
hotter-require 是一个 Node.js 模块，它可以允许开发者在运行时热重载 JavaScript 模块。例如，在您开发的 Web 应用程序中，某些模块更新后并不需要重新启动整个应用程序，而是将这些更新的模块加载到应用程序中，这样应用程序就可以在不断改进和更新之后保持活力。
使用 hotter-require，您可以快速更新应用程序中的某些代码，而不必在每个更改后停止和重新启动整个应用程序。
hotter-require 安装
在使用 hotter-require 之前，需要先安装它。可以使用 npm 命令进行安装：
npm install hotter-require
或者，在 package.json 文件中添加以下行：
"hotter-require": "^1.0.0"
然后使用命令：
npm install
来安装 hotter-require。
hotter-require 使用方法
使用 hotter-require，您需要将其引入应用程序中，然后启动它。您可以在 Node.js 应用程序中使用它，也可以在浏览器中使用它。
以下是 Node.js 应用程序中使用 hotter-require 的实例：
const hotterRequire = require('hotter-require');
hotterRequire(__dirname + '/path/to/module', (exports) => {
// some code here
});在这个示例中，我们从 Node.js 中引入 hotter-require 模块，然后指定要热更新的模块的路径。当模块更新时，hotter-require 将在回调函数中调用它。这个回调函数将传递这个模块的导出对象。
以下 code 实例展示了如何在浏览器中使用 hotter-require：
<script src="hotter-require.js"></script>
<script>
hotterRequire('/path/to/module.js', function(exports) {
// some code here
});
</script>这个示例与前面的示例类似，不同之处在于我们使用 hotter-require.js 文件来代替 Node.js 中的模块。
hotter-require 高级用法
hotter-require 可以被用于更高级的应用程序，例如 webpack 等打包过程中。在 webpack 中，您可以使用 webpack-hot-middleware 插件作为热更新插件。以下是一个 webpack 配置文件的示例：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- ---------- - ----------------------------------------------------------------
-------------- - -
------ -
---- -------------------- ----------------
---- ----------
--
------- -
----- -------------------- --------
--------- ------------------
--
----- --------------
-------- --------------------------
-------- -
--- -------------------------------------
--- -------------------
--------- -------------------- -----------------
--
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- --------------
-
-
-
-
--在这个配置文件中，我们使用 webpack-hot-middleware 插件作为热更新插件。插件代码被添加到了 entry 中的 hot 字段。在我们的应用程序中，我们需要手动启用热加载来更改模块：
if (module.hot) {
module.hot.accept('./components/MyComponent.jsx', () => {
const NewComponent = require('./components/MyComponent.jsx').default;
render(NewComponent);
});
}当我们更改 MyComponent.jsx 文件时，热加载插件将在我们的回调函数中执行指定的代码。在这个回调函数中，我们可以加载更新的模块并重新呈现它们。
总结
hotter-require 可以帮助开发者实现模块热替换功能。它非常容易安装和使用，使用后可以让应用程序更加活跃。与其安装其他热更新插件相比，hotter-require 更加灵活，可以用于多种应用程序和开发环境。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056ce481e8991b448e6979