没有使用Webpack，如何为本地ES模块（浏览器或Node.js）实现热模块替换？不需要构建工具。

Question

我想要将HMR添加到纯Node.js代码或使用原生ES模块编写的浏览器代码中。

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

我们能在纯Node或浏览器中使用HMR吗？

- trusktr

---

你是指客户端JS文件的热重载还是Node服务器的热重载？对于NodeJS服务器代码，您可以使用nodmon：https://nodemon.io/ - Bergur

@Bergur 感谢您的建议。我确实是指在Node.js模块中运行的热模块替换（HMR）（因此基本上是服务器，如果Node用于此目的，但不一定是服务器）。我知道我可以在每次文件更改时重新启动整个Node.js进程，这很容易。但我想知道热模块替换（HMR），仅替换修改后的模块（这类似于Webpack中的客户端代码的HMR，但在这种情况下是针对Node.js代码）。明白我的意思吗？ - trusktr

是的，抱歉。我现在明白了 :) - Bergur

Answer 1

这是一个来自我个人合作的开发者/企业家的纯节点HMR模块：https://github.com/huan/hot-import。希望这可以帮到你。

- Bryan Huang

Answer 2

Snowpack 是一种工具，它使用本地ES模块来摆脱捆绑，并且每次保存更改都会比使用类似Webpack等打包工具的设置更快地反映出来。

来自Snowpack网站:

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

即时的开发启动: Snowpack的开发服务器在大多数计算机上不到20ms即可启动。文件仅在浏览器请求时按需构建。

即时的开发重建: 每当你保存时，永远不要等待超过几毫秒。由于没有大型应用程序块需要重新构建，因此更改立即反映在浏览器中。

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

为生产进行捆绑: 它是最好的两个世界: 快速的无捆绑开发+优化的捆绑生产。选择捆绑(优化)或未捆绑的构建输出，无需任何额外的配置。

- Rajika Imal

Answer 3

另一个是es-dev-server。

- trusktr

Answer 4

这里有一个库，它非常类似于Webpack API，但是专为浏览器中的原生ES模块而设计： https://github.com/SevInf/heiss （还可以在https://www.npmjs.com/package/heiss找到）

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

- trusktr

Answer 5

你也可以使用ViteJs。

如果你想在node服务器上使用它，只需使用node插件https://github.com/axe-me/vite-plugin-node即可。

- AXE