什么是 Reloadify？
Reloadify 是一个 Node.js 模块，它可以在代码发生改变时自动地重新加载浏览器。如果你在开发前端项目时需要频繁修改代码并刷新浏览器来查看效果，Reloadify 可以帮助你省去这个繁琐的步骤。
如何安装和使用？
在使用 Reloadify 之前，需要先安装 Node.js 环境。如果你已经安装过 Node.js，可以在终端进入项目目录，使用以下命令安装 Reloadify：
npm install reloadify --save-dev
安装完成后，在项目的入口文件中引入 Reloadify：
const reloadify = require('reloadify');然后在需要自动刷新的页面中引入客户端脚本：
<script src="/reloadify/reloadify.js"></script>
接着在服务器启动时调用 reloadify 函数，传入需要监听的文件路径和端口号即可。以下是一个使用 Express 框架的示例：
-- -------------------- ---- -------
----- ------- - -------------------
----- --------- - ---------------------
----- --- - ----------
-- ----------
-----------
------ -
----------------
---------------
---------------
--
----- ----
---
-- -----
------------ ----- ---- -- -
--------------- ---------
---
---------------- -- -- -
---------------- -- --------- -- ---- --------
---以上代码中，watch 属性指定了需要监听的文件路径，这个路径可以是一个字符串或者是一个字符串数组。在这个例子中，我们指定了三个目录，分别是 public、views 和 routes，表示在这些目录下的文件发生改变时会触发自动刷新。port 属性则指定了刷新服务的端口号。
当你启动这个服务后，如果你的代码发生了改变，Reloadify 就会刷新浏览器，使你可以看到最新的效果。
Reloadify 的高级设置
除了基本的监听文件和端口号外，Reloadify 还提供了许多高级设置。
忽略文件
如果你想要忽略某些文件，可以在 watch 属性中添加 ignore 参数：
reloadify({
watch: './public/**/*',
ignore: [
'./public/css/**/*.css',
'./public/js/**/*.js'
]
});以上代码中，我们将忽略 public 目录下的所有 css 和 js 文件。
回调函数
当 Reloadify 重新加载浏览器时，可以传入一个回调函数，以便在刷新后执行某些操作：
reloadify({
watch: './public/**/*',
port: 3000
}, () => {
console.log('Browser refreshed!');
});以上代码中，当浏览器刷新时，控制台就会输出一条信息。
自定义客户端脚本
如果你不想使用默认的客户端脚本，可以自定义一个脚本并在页面中引入：
reloadify({
watch: './public/**/*',
port: 3000,
script: '/reload-client/reload-client.js'
});需要注意的是，自定义的脚本路径需要与实际路径一致。
总结
Reloadify 是一个非常实用的开发工具，它可以帮助前端开发人员省去手动刷新浏览器的时间，提高开发效率。在实际开发中，我们可以根据自己的实际需要设置各种参数，以适应不同的项目需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/72185