前言
在前端开发中，我们经常需要实时刷新页面以快速查看效果。而 mini-lr 正是一种解决方案，它允许你在自己的开发环境中相对轻松地实现浏览器的自动刷新功能。本文将介绍 mini-lr 的使用方法，同时还会详细介绍它的原理。
安装 mini-lr
安装 mini-lr 很简单，只需要执行以下命令即可：
npm install mini-lr --save-dev
由于 mini-lr 是一个开发依赖，我们在安装时需要使用 --save-dev 参数。
使用 mini-lr
mini-lr 主要分为两部分，一是启动服务器，二是客户端与服务器的交互。下面分别介绍这两部分的使用。
启动服务器
mini-lr 的服务器启动非常简单，只需引入模块并执行一些基本的配置即可。
const tinyLr = require('mini-lr');
const lrServer = tinyLr({
port: 35729 // 端口号
});
lrServer.listen(function (err) {
if (err) return console.log(err);
console.log('Started livereload server on port: %s', lrServer.port)
});这里通过 require 方法引入了 mini-lr 模块，并指定了服务器启动的端口号为 35729。在 listen 方法中通过回调函数打印了服务器的启动信息。
与客户端交互
启动服务器后，需要与客户端交互以实现自动刷新。客户端与服务器交互的方式有两种：WebSocket 和 Ajax Polling。为了更好的效果，我们将在以下示例中使用 WebSocket 与客户端进行交互。
如下所示是一个 express 服务的示例，它实现了在用户访问页面时使用 mini-lr 自动刷新浏览器的效果。
-- -------------------- ---- -------
----- ------- - -------------------
----- - ------------ - - ----------------
----- ------ - -------------------
----- --- - ----------
-- ---- ---- ---
----- ------ - ------------------
--------------------
-- -- ------- --
----- -------- - ---------
---------------------- -------- ----- -
-- ----- ------ -----------------
-------------------- ---------- ------ -- ----- ---- --------------
---
-- -------
------------- ---- ----- -- -
----- ------ - ----------------
----- ------ - -----
----- ---- - -
------
------
------- ----------------------------------------
-------
------
--------- -----------
-------
-------
--
---------------
---
-- --------------
------------------------- - -----------我们通过使用 createServer 方法创建了一个 express 服务，并使用 tiny-lr 启动了一个 mini-lr 服务器。为了让变化自动刷新浏览器，我们在 res.send 中注入了一段自动刷新代码。
在监听到文件变化时，我们还需要通知客户端进行刷新。可以使用以下示例代码来实现：
const lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;
// 将 `lrSnippet` 注入到中间件
app.use(lrSnippet({
// 必须与 mini-lr 的端口号一致
port: 35729
}));原理分析
mini-lr 内部实现了一个简单的 WebSocket 服务器，用于连接客户端，并监听变化并向客户端推送刷新命令。下面看一下 watch 方法源码:
-- -------------------- ---- -------
-- ------- --
------------------------ - -------- ------ -
-- ---------------------- -
---- - -------
-
---------- - -----
----- -- - -----
-----------------------
-------------------------- -------- --------- -- -
----- -------- - ------------------------
----- ------------ - -------------------------------
-------- -- --------------
------------- -- ---------------------
---------- -- -------------- -- ------- - --- - --- - --- - ------
---------- -- --------------------- ------------
-- --------------------- -
-------------------------- ----- ---------- --------------------------------
-------------------------------
-
---
--在 watch 方法内部，mini-lr 使用了 chokidar 包来监听文件变化，同时处理了变化时的逻辑。当监听到文件变化后，mini-lr 将会发送通知给客户端，客户端收到通知后会自动刷新页面。
mini-lr 依赖于 WebSocket 技术，发送实时通知可以避免反复刷新浏览器导致的效率低下等问题。
结语
本文主要介绍了 mini-lr 的使用和原理，下面是一个完整的示例代码，在实际开发时可以借鉴使用。
-- -------------------- ---- -------
----- ------ - ------------------
----- --------- - ---------------------------------------------------------------
-- -- -------
----- -------- - --------
---------------------- -------- ----- -
-- ----- ------ ----------------
-------------------- ---------- ------ -- ----- ---- --------------
--
-- ------------
----- ---------------- - ----- ---- ----- -- -
----- ---- - ----------------------------------
-- -------------------- -
---------------------
-- --- ------- ------
----- -----
---
-
------
-
-- -- ------- ---
----- ------- - ------------------
----- --- - ---------
----- ------ - ---------------- -- -- -
----- - -------- ---- - - ----------------
---------------------- -- ---------------------------
--
-- -----------------
------------------------- - -----------
-------------------------
---------------------------------此代码示例提供了一个完整的 HTTP 服务器，它将 min-lr 和自动刷新功能结合起来，实现了文件改动时自动刷新页面的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67596