hmr-serve：前端开发者的"即开即用"预览神器

做前端的朋友应该都有过这种经历：手头有个小项目或者一堆 HTML、CSS、JS 文件，就想看看效果，结果还得折腾半天。

要么打开 Python 跑个简单的 HTTP 服务器，要么装 VS Code 的 Live Server 插件，更有甚者直接双击 HTML 文件打开，改一下刷新一下，效率低得感人。

说实话，这些方案都差点意思。

而 hmr-serve 正是来解决这个问题的——轻量、直白、一句话就能跑起来。

传统方案的问题在哪

说到热模块替换（HMR），大家第一反应可能是 Vite、Webpack、Parcel 这些打包工具。确实，它们很强大，但代价是配置繁琐，而且通常要和特定的框架配合使用。

你想直接用 Webpack 预览一个随手创建的文件夹？想多了。

hmr-serve 换了个思路：它专门为"直接预览任意目录"而生。Clone 一个仓库，敲一行命令，瞬间进入实时预览模式——零配置，直接可用。

哪些场景特别适合

设计师交接的静态文件：设计师丢给你一包 HTML/CSS 文件，常规操作是复制路径到浏览器，或者折腾本地服务器。现在只需要 hmr-serve ./design-files，把本地地址甩给相关人员，大家就能实时看效果、提意见。

写文档：在 README 或者 Markdown 里加了自定义样式，改完立刻看到结果，不用重新构建。

独立组件开发：做 Web Component 的时候，每个组件单独调试，用 hmr-serve 一个个预览，热更新直接跟上。

临时实验：纯粹想验证一个想法，又懒得建完整项目？建个文件夹，加几行代码，跑起来，开搞。

开发体验这块，真香

"vibe coding"时代，大家都讲究快速原型、快速迭代。工具卡一下、配置烦一下，都是在消耗你的精力。

hmr-serve 的定位很清晰——不贪多，就做一件事：把任意文件夹跑起来，浏览器自动刷新。简单到有点让人不适应。

这其实就是 Unix 哲学的精髓：一个工具做好一件事，然后和其他工具配合使用。

怎么用

装好之后，基本操作就这么一行：

npx hmr-serve ./your-folder

没了。不用配置文件，不用指定入口，不用跑构建命令，它自己会分析目录结构，然后给你呈现出来。

它在工具链里的位置

别误会，hmr-serve 不是要取代 Vite 或者 Next.js 这种正经的开发服务器。那些工具和自己生态绑定得深，功能也更全面。

hmr-serve 更像是工具箱里的一把螺丝刀——主流程开发用 IDE，临时看个东西、调个样式，用它。

一个不是更好另一个，只是用途不同而已。

写在最后

有些工具就是这样——没用之前不觉得需要，用了之后离不开了。

不管你是设计师要快速演示原型，还是创始人想验证一个想法，又或者开发者经常处理各种零散项目，hmr-serve 都值得放进你的常用工具清单。

下次想临时预览点什么，不用再折腾那套流程了。试试看，说不定就是那种"早知道有这个就好了"的存在。

你用过类似的快速预览工具吗？评论区聊聊，大家交流一下平时都怎么解决这些小痛点。