作者:maomin9761来源:抢劫前端路
序
前不久我结合browser-sync+gulp+gulp-nodemon实现了一个生产环境热更新的项目脚手架。所以，今天我们将使用Node.js来实现一个热重载页面。
所以，我今天总结一下，万一大家跟我一样。
热过载
所谓热过载，就是每次页面发生变化，不需要手动刷新，可以自动刷新。
重新开始
浏览器的免刷新更新允许您在运行时替换、添加和删除各种模块，而无需完全刷新和重新加载整个页面。
目的:加快开发速度，所以只适合开发环境。
思路:在完全重载页面时，保持应用程序的状态不变，只更新改变的内容，以节省开发时间。调整样式更快，几乎相当于在浏览器调试器中改变样式。
真正的战斗
首先，初始化项目
这里，使用下面的命令来初始化项目。我在这里使用-y后缀来更快更方便地初始化它。如果你想自定义，可以一行一行的输入。
npm初始化-y
初始化完成，根目录下又多了一个package.json文件。
其次，创建节点主文件app.js
接下来，我们将创建一个Nodejs操作主文件app.js
const http = requireconst express = requireconst app = expressconst server = http.createServerconst path = requireconst fs = requireconst io = requireapp . use))；创建观察者；函数createWatcher { const absolute ='。/public '；fs . watch { if { io . sockets . emit；} });} server . listen { console . log；});
首先我们用http和express创建一个http服务器，同时绑定到socket.io。然后，我们使用express托管静态文件，并将静态文件目录指定为public。这里，我们使用fs模块下的watch方法来监视文件目录的变化。如果目录中的文件发生变化，会触发io . sockets . emit；这行代码。既然触发了，肯定有地方可以监听。
三。创建index.html文档
我们将在根目录中创建一个公共文件夹，并在文件夹中创建一个index.html文件。
热更新页面问候文本
io . connect . on = > window . location . reload)；
Http://localhost:8086/这是后台的地址。你需要监听这个地址才能和后台通信。因为我们在后台定制了一个重载事件，所以前台只需要监控这个事件。如果后台触发这个事件，前台会随机监听并执行代码。
四。创建其他类型的文件
我们可以在上面的index.html文件中看到，我从外部导入了index.js文件和style.js文件。主要是测试如果代码改变，页面是否有相应的变化，答案是肯定的。
动词 （verb的缩写）实时更新页面
我们先开始这个项目。
node app.js
您将看到服务器运行在端口8086上。显示在终端下，然后就可以在浏览器中打开http://localhost:8086/。当我们更改代码时，可以看到页面的实时显示，当我们按快捷键保存代码时，页面会实时更新。
这不是很方便吗？不会每次切换页面都刷新页面。当我想用JQ写一页的时候，一开始我觉得很愚蠢，每次我都重复我的工作。
标签
感谢您的阅读。我希望我没有浪费你的时间。
源代码:https://gitee.com/maomincoding/hot-load
