在进行前端开发时，我们会经常遇到代码改动后需要手动刷新页面来查看效果的情况，这样的操作十分繁琐，时间上也不能保证即时性。而 simple-reload 是一个 npm 包，它可以实现页面的自动刷新，使得我们的开发效率大大提高。
1. 安装 simple-reload
在终端中使用 npm 安装 simple-reload：
--- ------- ------------- ----------
--save-dev 表示将 simple-reload 作为开发依赖添加到项目中。
2. 引入 simple-reload
在要使用自动刷新功能的项目文件（通常为 index.html 或 main.js）中引入 simple-reload 库：
------ ---------------
这样 simple-reload 就已经被成功引入了。
3. 配置 simple-reload
配置文件需要在项目的根目录下新建一个名为 simple-reload.json 的文件，并写入以下配置信息：
-
-------- -
-------------
------------
---------
--
-------- -
----------
-
-files: 需要监控的文件列表，可以是 HTML、CSS、JS 或其他前端资源。watch: 监视文件变化的路径，可以是文件或文件夹。例如src/**/*表示监视src下所有文件夹和文件。
4. 启动 simple-reload
使用以下命令启动 simple-reload：
--- -------------
这样 simple-reload 就开始运行了，当代码发生变化时，simple-reload 会自动刷新页面并显示最新的页面内容。
5. 示例代码
index.html:
--------- -----
------
------
----- ----------------
-------------------- ----------
-------
-- -
------ ----
-
--------
-------
------
-------- ------------------
------- -----------------------
-------
-------main.js:
------------------- -----------------
6. 总结
使用 simple-reload 可以大大提高前端开发效率，使得我们可以更加专注于代码编写，而无需频繁手动刷新页面。简单易用的配置使得 simple-reload 在实际开发中具有较高的适用性。希望这篇文章对大家有所帮助，谢谢！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66502