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