前言
在前端开发中，我们经常会遇到需要实时预览网页的情况。传统的方式是修改代码后手动刷新页面，这样反复操作十分繁琐。@pingy/instant 是一个可以在修改代码的同时自动刷新浏览器的开发工具包。本文将介绍如何使用 @pingy/instant 包进行实时预览，以及其它相关的技术细节。
安装和使用
安装
使用 npm 进行安装：
npm install @pingy/instant
使用
在项目根目录下创建 pingy.js 文件，并添加以下内容：
const Pingy = require('@pingy/instant');
const server = new Pingy({
dir: './public',
debug: true
});
server.start();其中 dir 为需要监听变化的目录，可以根据实际情况进行更改。debug 参数可选，默认为 false，设为 true 后会输出更多调试信息。
在命令行执行以下命令启动服务：
node pingy.js
此时，在浏览器中访问 http://localhost:1337/，即可看到项目的实时预览效果。
进阶使用
修改端口
默认使用 1337 端口，如果需要更改，可以在 pingy.js 文件中添加 port 参数：
const server = new Pingy({
dir: './public',
port: 8080
});
server.start();使用 WebSocket
@pingy/instant 使用 WebSocket 技术来实现实时刷新浏览器的功能。如果您的项目中已经使用了其他 WebSocket 库，可能会与 @pingy/instant 冲突。此时，可以调用 noWebSocket() 方法，禁用 @pingy/instant 的 WebSocket 功能：
const server = new Pingy({
dir: './public',
}).noWebSocket();
server.start();添加文件过滤器
默认情况下，@pingy/instant 会监听目录下的所有文件变化。有时候，我们需要排除某些文件。可以添加一个过滤器函数，根据自己的需求决定是否监听某个文件。例如，在下面的例子中，将排除掉所有以 '_' 开头的文件：
const server = new Pingy({
dir: './public',
filter: function (filename) {
return !filename.startsWith('_');
}
});
server.start();添加文件更改的 hook
有时候，我们希望在文件更改时执行一些额外的操作，例如重新生成静态网页或者触发部署脚本。可以通过调用 hook() 方法来添加一个更改文件时的回调函数：
-- -------------------- ---- -------
----- ------ - --- -------
---- -----------
---
-------------------- -- -
----------------- --- ---- ----------
---
---------------总结
通过本文的介绍，你已经了解了如何使用 @pingy/instant 进行实时预览，以及一些进阶的技巧。在开发过程中，实时预览可以节省大量的时间，让开发者更加高效。同时，通过参考 @pingy/instant 的源码，还可以了解 WebSocket 技术的具体实现细节。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572c881e8991b448e8f16