快捷導(dǎo)航

詳解如何使用Node.js實(shí)現(xiàn)熱重載頁(yè)面

更新時(shí)間：2021年05月06日 16:38:22 作者：Vam的金豆之路

這篇文章主要介紹了詳解如何使用Node.js實(shí)現(xiàn)熱重載頁(yè)面，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

前不久我結(jié)合browser-sync+gulp+gulp-nodemon實(shí)現(xiàn)了一款生產(chǎn)環(huán)境熱更新（我之前理解有點(diǎn)偏差，應(yīng)該定義為熱更新，不是熱重載）的項(xiàng)目腳手架，那么，今天我們將使用Node.js實(shí)現(xiàn)一個(gè)熱重載頁(yè)面。

那么，我今天就總結(jié)一下吧，以防止大家也跟我一樣。

熱重載

所謂熱重載就是頁(yè)面每次改動(dòng)，不需要手動(dòng)去刷新，可自動(dòng)刷新。

熱更新

瀏覽器的無刷新更新，允許在運(yùn)行時(shí)替換，添加，刪除各種模塊，而無需進(jìn)行完全刷新重新加載整個(gè)頁(yè)面。

目的：加快開發(fā)速度，所以只適用于開發(fā)環(huán)境下使用。

思路：保留在完全重新加載頁(yè)面時(shí)丟失的應(yīng)用程序的狀態(tài)，只更新改變的內(nèi)容，以節(jié)省開發(fā)時(shí)間，調(diào)整樣式更加快速，幾乎等同于在瀏覽器調(diào)試器中更改樣式。

實(shí)戰(zhàn)

一、初始化項(xiàng)目

這里使用以下命令初始化項(xiàng)目。這里使用-y后綴我是為了更快更方便地初始化，如果你想自定義的話，可以一行一行的敲。

npm init -y

初始化完成，根目錄下多了一個(gè)package.json文件。

二、創(chuàng)建Node主文件app.js

下面，我們將創(chuàng)建一個(gè)Nodejs操作主文件app.js。

const http = require('http');
const express = require('express');
const app = express();
const server = http.createServer(app);
const path = require('path');
const fs = require('fs');
const io = require('socket.io')(server);

app.use(express.static(path.join(__dirname, './public')));
createWatcher();

function createWatcher() {
  const absolute = './public';
  fs.watch(absolute, function (eventType, filename) {
    if (filename) {
      io.sockets.emit('reload');
    }
  });
}

server.listen(8086, function () {
  console.log(`The server is running on port 8086.`);
});

首先，我們使用http、express結(jié)合創(chuàng)建了一個(gè)http服務(wù)器，又同時(shí)與socket.io綁定。然后我們又利用express托管靜態(tài)文件，指定靜態(tài)文件目錄public。我們這里使用了fs模塊下的watch方法，用于監(jiān)聽文件目錄的變化。如果目錄下的文件改變了，那么就會(huì)觸發(fā)io.sockets.emit('reload');這行代碼。既然觸發(fā)了那肯定要有地方監(jiān)聽。

三、創(chuàng)建index.html文件

我們會(huì)在根目錄下創(chuàng)建一個(gè)public文件夾，文件夾內(nèi)創(chuàng)建一個(gè)index.html文件。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>熱更新頁(yè)面</title>
    <link rel="stylesheet" href="style.css" rel="external nofollow"  />
    <style>
      h1 {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello</h1>
    <p class="txt">文本</p>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <p class="name"></p>
    <script src="./socket.io.min.js"></script>
    <script src="./index.js" type="module"></script>
    <script type="module">
      import obj from './index.js';
      io.connect('http://localhost:8086/').on('reload', () =>
        window.location.reload()
      );
      document.querySelector('.name').innerHTML = obj.name;
    </script>
  </body>
</html>

文件內(nèi)容如上，我們首先需要關(guān)注的是怎么與后臺(tái)監(jiān)聽，我們只需要引入socket.io.min.js文件（文件我會(huì)在文末給出源碼地址），然后在下面鍵入以下代碼：

io.connect('http://localhost:8086/').on('reload', () =>window.location.reload());

http://localhost:8086/ 這是后臺(tái)的地址，需要監(jiān)聽這個(gè)地址，才能跟后臺(tái)進(jìn)行通信。因?yàn)楹笈_(tái)我們自定義了一個(gè)reload事件，前臺(tái)也只需要監(jiān)聽這個(gè)事件。如果后臺(tái)觸發(fā)了這個(gè)事件，那么前臺(tái)就會(huì)監(jiān)聽到，隨機(jī)執(zhí)行代碼。

四、創(chuàng)建其他類型的文件

我們可以在上面的index.html文件中看到了我外部引入了index.js文件與style.js文件。主要是檢測(cè)如果改變其中的代碼，頁(yè)面是否也相應(yīng)的改變，答案是肯定的。

五、實(shí)時(shí)更新頁(yè)面

我們首先啟動(dòng)項(xiàng)目。

node app.js

會(huì)看到終端下會(huì)顯示The server is running on port 8086.，然后就可以在瀏覽器打開http://localhost:8086/這個(gè)地址。我們更改下代碼，就可以看下頁(yè)面實(shí)時(shí)顯示，并且是按下快捷鍵保存代碼時(shí)（這里推薦編輯器不要實(shí)時(shí)自動(dòng)保存代碼），頁(yè)面就實(shí)時(shí)更新。

這樣是不是很省事了，不會(huì)每次切換頁(yè)面點(diǎn)擊刷新頁(yè)面了。想當(dāng)初使用JQ寫頁(yè)面時(shí)，當(dāng)初真是覺得自己太傻了，每次都重復(fù)勞動(dòng)。