Node.jsを使用してホットリロードページを実装する方法の詳細な説明

序文

少し前に、browser-sync+gulp+gulp-nodemon を組み合わせて、本番環境でのホットアップデート用のプロジェクトスキャフォールディングを実装しました (以前の私の理解は少し偏っていて、ホットリロードではなくホットアップデートとして定義する必要があります)。そこで、今日は Node.js を使用してホットリロードページを実装します。

さて、皆さんが私と同じ間違いをしないように、今日の内容をまとめておきます。

ホットリロード

いわゆるホットリロードとは、ページが変更されるたびに、手動で更新することなく自動的に更新できることを意味します。

ホットアップデート

ブラウザのリフレッシュフリーアップデートにより、ページ全体を再読み込みする完全なリフレッシュを実行することなく、実行時にさまざまなモジュールを置き換え、追加、または削除できます。

目的: 開発を高速化するため、開発環境での使用にのみ適しています。

アイデア: ページを完全に再読み込みすると失われるアプリケーションの状態を保持し、変更されたコンテンツのみを更新して開発時間を節約します。スタイルの調整はより高速で、ブラウザデバッガーでスタイルを変更するのとほぼ同等です。

実際の戦闘

1. プロジェクトを初期化する

ここで、次のコマンドを使用してプロジェクトを初期化します。ここでは、初期化をより高速かつ便利にするために -y サフィックスを使用しています。カスタマイズしたい場合は、行ごとに入力できます。

npm 初期化 -y

初期化が完了し、ルートディレクトリに package.json ファイルが追加されます。

2. Nodeメインファイルapp.jsを作成する

次に、Nodejs 操作のメインファイル app.js を作成します。

定数 http = require('http');
定数 express = require('express');
express() は、定数です。
定数 server = http.createServer(app);
定数パス = require('path');
定数 fs = require('fs');
const io = require('socket.io')(サーバー);

app.use(express.static(path.join(__dirname, './public')));
ウォッチャーを作成します。

関数createWatcher() {
  const absolute = './public';
  fs.watch(絶対、関数(イベントタイプ、ファイル名) {
    if (ファイル名) {
      io.sockets.emit('reload');
    }
  });
}

server.listen(8086, 関数() {
  console.log(`サーバーはポート8086で実行されています。`);
});

まず、http と express を組み合わせて http サーバーを作成し、それを socket.io にバインドします。次に、express を使用して静的ファイルをホストし、静的ファイルディレクトリ public を指定します。ここでは、fs モジュールの watch メソッドを使用して、ファイルディレクトリの変更を監視します。ディレクトリ内のファイルが変更されると、io.sockets.emit('reload'); の行がトリガーされます。トリガーされたので、それを監視する場所が必要です。

3. index.htmlファイルを作成する

ルートディレクトリに public フォルダーを作成し、そのフォルダー内に index.html ファイルを作成します。

<!DOCTYPE html>
<html lang="ja">
  <ヘッド>
    <メタ文字セット="UTF-8" />
    <title>ホットアップデートページ</title>
    <link rel="スタイルシート" href="style.css" rel="外部nofollow" />
    <スタイル>
      h1 {
        色: 赤;
      }
    </スタイル>
  </head>
  <本文>
    <h1>こんにちは</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>
    <スクリプトタイプ="モジュール">
      './index.js' から obj をインポートします。
      io.connect('http://localhost:8086/').on('reload', () =>
        ウィンドウの場所を再読み込み()
      );
      document.querySelector('.name').innerHTML = obj.name;
    </スクリプト>
  </本文>
</html>

ファイルの内容は上記のとおりです。最初に注意する必要があるのは、バックグラウンドで監視する方法です。socket.io.min.js ファイルをインポートし (記事の最後にソースコードのアドレスを示します)、次のコードを入力するだけです。

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

http://localhost:8086/ これはバックエンドのアドレスです。バックエンドと通信するには、このアドレスをリッスンする必要があります。バックグラウンドでリロードイベントをカスタマイズしたので、フロントエンドはこのイベントをリッスンするだけで済みます。このイベントがバックグラウンドでトリガーされると、フォアグラウンドはそれをリッスンし、コードをランダムに実行します。

4. 他の種類のファイルを作成する

上記の index.html ファイルでは、index.js ファイルと style.js ファイルを外部からインポートしたことがわかります。主な目的は、コードが変更された場合にページがそれに応じて変更されるかどうかを検出することです。答えは「はい」です。

5. リアルタイム更新ページ

まずプロジェクトを立ち上げることから始めます。

ノードアプリ.js

ターミナルに「サーバーはポート 8086 で実行されています」と表示されます。その後、ブラウザーでアドレス http://localhost:8086/ を開くことができます。コードを変更すると、ページがリアルタイムで表示され、ショートカットキーを押してコードを保存すると (エディターがコードをリアルタイムで自動的に保存しないようにすることをお勧めします)、ページがリアルタイムで更新されることがわかります。

これはとても便利ではないでしょうか。ページを切り替えるたびに更新をクリックする必要がありません。初めて JQ を使用してページを書いたときのことを思い出すと、毎回同じ作業を繰り返すのがとても愚かだと感じました。

結論

読んでくれてありがとう。あなたの時間を無駄にしなかったことを願っています。

ソースコードアドレス: https://gitee.com/maomincoding/hot-load

Node.js を使用してホットリロードページを実装する方法に関するこの記事はこれで終わりです。Node.js ホットリロードページの関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: