本地 ES 模块（浏览器或 Node.js）的热模块替换*没有* Webpack？没有构建工具

Posted 2023-03-15

【中文标题】本地 ES 模块（浏览器或 Node.js）的热模块替换*没有* Webpack？没有构建工具

【英文标题】：Hot module replacement for native ES Modules (browser or Node.js) *without* Webpack? No build tools

【发布时间】：2019-10-14 12:28:19

【问题描述】：

我希望将 HMR 添加到纯 Node.js 代码或使用本机 ES 模块编写的浏览器代码中。

没有 Babel，没有 Webpack，没有转译，只有普通的 JS 文件和 ES Module import 和 export 调用。

我们可以在普通 Node 或浏览器中进行 HMR 吗？

【问题讨论】：

你的意思是客户端js文件的热重载还是节点服务器的热重载？对于 nodeJS 服务器代码，您可以使用 nodmon：nodemon.io

@Bergur 感谢您的建议。我的字面意思是在 Node 中运行的 Node.js 模块的热模块替换 (HMR)（所以基本上是服务器，如果 Node 被用于，但不一定是服务器）。我知道我可以在每次文件更改时重新启动整个 Node.js 进程，这很容易。但我想知道热模块替换 (HMR)，仅替换修改后的模块（它类似于 Webpack 中的 HMR，用于客户端代码，但在本例中用于 Node.js 代码）。明白我的意思吗？

是的，对不起。我现在明白了:)

【参考方案1】：

这是一个来自与我个人合作的开发人员/企业家的纯节点 HMR 模块：https://github.com/huan/hot-import

希望这会有所帮助。

【参考方案2】：

这是一个非常类似于 Webpack API 的库，但用于浏览器中的原生 ES 模块：

https://github.com/SevInf/heiss（也位于https://www.npmjs.com/package/heiss）

这里有一篇关于它的文章：https://itnext.io/hot-reloading-native-es2015-modules-dc54cd8cca01

【参考方案3】：

Snowpack 是一个使用原生 ES 模块摆脱捆绑的工具，与使用 Webpack 等捆绑器的设置相比，每次保存更改都会更快地反映出来。

来自 Snowpack 网站：

开发过程中不再捆绑：Snowpack 会安装您的 npm 依赖项，以便可以直接在浏览器中导入它们而无需应用程序捆绑器。

即时开发启动：Snowpack 的开发服务器在大多数机器上的启动时间不到 20 毫秒。文件仅根据浏览器的请求按需构建。

即时开发重建：点击保存时不要等待超过几毫秒。由于无需重建大型应用程序块，因此更改会立即反映在浏览器中。

连接您最喜欢的构建工具：使用简单、熟悉的“脚本”界面来管理您的构建，该界面取代了传统复杂的插件生态系统。

用于生产的捆绑包：两全其美：快速的无捆绑包开发 + 生产中的优化捆绑。在捆绑（优化）或非捆绑构建输出之间进行选择，无需任何额外配置。

【参考方案4】：

另一个是es-dev-server。

【参考方案5】：

你也可以使用 ViteJs。

如果你想将它用于节点服务器，只需使用节点插件https://github.com/axe-me/vite-plugin-node 就可以了