基于 nodejs 的热更新 http 开发服务器

本文最后更新于:2021年8月5日 下午

场景

之前一直在使用 http-server 作为本地快速启动静态 http 服务器的命令行工具,然而直到今天,吾辈实在难以忍受其在修改完 HTML 文件后,http-server 不会自动刷新浏览器重新渲染页面,而是需要手动刷新才行,真的是不厌其烦,所以吾辈开始找更好的工具。

注:http-server 其实也已经热更新到内存中了,只不过不会触发浏览器刷新页面。

期望

  • 零配置使用
  • 修改文件保存后将自动触发浏览器刷新页面
  • 基于 nodejs 开发
  • 允许特定的配置

结果

前端页面热更新

  • live-server: 自带热更新并启动即打开浏览器的 http 开发服务器
  • anywhere: 与上面的 live-server 类似(由国人开发,已经一年没有更新了)

nodejs 热更新

VSCode 插件

  • LiveServer: VSCode 中的插件,可以将任何一个 HTML 当作 web 程序打开,并自带热更新

live-server

live-server 是一个 npm 包,全局安装之后可以很方便的使用,所以吾辈选择了这个。主要特点如下:

  • 零配置
  • 热插拔
  • 自动打开浏览器

下面来说一下如何使用

  1. 使用 npm 全局安装

    npm i -g live-server
  2. 跳转到指定目录,然后使用 live-server 即可启动 http 服务器

    live-server