在前端开发中，常常需要将修改后的代码快速展示在浏览器中，这时候一个能够自动刷新页面的工具非常有用。@fesk/live-server-plugin 就是这样一个工具，本篇将详细介绍如何使用这个 npm 包。
安装
使用 npm 进行安装即可：
npm i -D @fesk/live-server-plugin
配置
在 package.json 文件中，将 @fesk/live-server-plugin 添加到 live-server 的插件配置中。示例如下：
{ "scripts": { "start": "live-server --port=3000 --open=/index.html --verbose --mount=/node_modules/@fesk/live-server-plugin/dist=live-server-plugin --middleware='import @fesk/live-server-plugin'" }, "liveServerPlugin": { "port": 35729 } }
其中，--middleware 参数是 live-server 的中间件参数，用来加载插件。--mount 参数是用来配置插件的静态文件路径。--port 参数则是指定 live-server 的监听端口。这个参数需要和 live-server-plugin 的配置中的端口一致。
使用
配置完后，只需要在源代码中引入 live-server-plugin 就可以自动刷新页面了。这里提供一个示例代码：
-- -------------------- ---- ------- ------ - ---------- - ---- --------------------------- ----- ---------- - --- ------------ ----- ------ --- ------------------- -- -------------- --展开代码
LiveClient 是 live-server-plugin 的主要类，它有一个 start 方法用来启动自动刷新功能。这个方法执行后，如果检测到代码有修改，就会自动刷新浏览器页面。
总结
@fesk/live-server-plugin 是一个非常实用的工具，可以帮助前端开发者快速预览代码的修改效果，并避免频繁的手动刷新浏览器。本篇文章介绍了它的安装、配置和使用方法，希望能对初学者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/158183
