npm 包 tiny-lr-fork 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，我们经常需要快速更新浏览器中的页面内容。这时候，我们可以使用 LiveReload 实现浏览器自动刷新页面的功能。本文将介绍在使用 LiveReload 的情况下如何使用 npm 包 tiny-lr-fork 来实现自动刷新页面。

简介

tiny-lr-fork 是一个 npm 包，它提供了一个轻量级的 LiveReload 服务器来监听文件变化并自动刷新浏览器页面。它是 tiny-lr 的一个分支。tiny-lr-fork 增加了对 Node.js 14+ 版本的支持，并修复了其中一些已知的问题。

安装

在使用 tiny-lr-fork 之前，需要先安装它。可以使用 npm 来进行安装：

npm install tiny-lr-fork --save-dev

安装成功后，就可以在项目中使用 tiny-lr-fork 了。

使用

使用 tiny-lr-fork 的步骤如下：

在项目中引入 tiny-lr-fork
```
const tinyLr = require('tiny-lr-fork');
```
创建服务器
```
const server = tinyLr();
server.listen(35729, function () {
  console.log('Tiny LR server listening on %s', 35729);
});
```
上面的代码创建了一个监听 35729 端口的 tiny-lr 服务器，并在控制台中输出相关信息。
监听文件变化

在需要监听文件变化的地方，添加如下代码：
```
server.changed({
    body: {
        files: [filePath]
    }
});
```
filePath 为要监听的文件路径。当文件发生变化时，tiny-lr 就会通知浏览器进行页面刷新。
打开浏览器并连接到 tiny-lr

打开浏览器并访问项目地址，同时在页面中引入 LiveReload 脚本：
```
<script src="//localhost:35729/livereload.js"></script>
```
这时候，LiveReload 就会连接到 tiny-lr，开始监听文件变化并自动刷新页面了。

示例

下面是一个简单的示例程序，它监听当前目录下的 index.html 文件，并在文件变化时自动刷新浏览器页面：

-- -------------------- ---- -------
----- ---- - ----------------
----- -- - --------------
----- ------ - ------------------------

----- ------ - -------------------------- ----- ---- -
  ----- ---- - ------------------------------- --------
  --------------
---

------------------- -------- -- -
  ------------------- --------- -- ---- ---- ------
---

----- -------- - ---------
---------------------- -------- -- -
  ----------------- -- ------ --------- -- ---- -------
---

---------------------------- -------- ------ ----- -
  ------------------
    ----- -
      ------ ----------------
    -
  ---
---

总结

通过使用 tiny-lr-fork，我们可以实现自动刷新浏览器页面的功能，这极大地提高了前端开发的效率。本文介绍了如何使用 tiny-lr-fork，希望能对前端开发者有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/40519