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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • nodemon を使用して Typescript プロジェクトのホット アップデートを実装するためのサンプル コード
  • ホットローディングを実現するための webpack2+node+react+babel の詳細な説明 (hmr)
  • Webpack は Node.js コードのホット置換を実装します
  • Node.js は Web アプリケーション コードのホット アップデートを巧みに実装します

<<:  Linuxにpipパッケージをインストールする方法

>>:  MySQLトリガーの簡単な使用例

推薦する

Tomcat をアンインストールして再インストールする方法 (画像とテキスト付き)

tomcat9をアンインストールする1. Tomcatのインストールはディレクトリに解凍するだけで...

Vueページの画像が表示されない問題の解決方法

新しいバージョンの設定インターフェースを作る際に、vueフレームワークを使用して実装しました。ページ...

VMWare仮想マシンにCentOS7システムをインストールする詳細な手順

インストール前の作業: VMware Workstation がインストールされていることを確認し、...

CocosCreatorオブジェクトプールの使い方

目次序文:特定の操作ステップ1: プレハブを準備するステップ2: オブジェクトプールを初期化するステ...

CSS を使用して正方形の div を実装する 2 つの方法

目標: 辺の長さが等しい正方形を作成する方法 1: 単位 vw を使用する (ps これが最も簡単な...

Ubuntu 18.04の下のディレクトリにディスクをマウントします

導入この記事では、Ubuntu 18.04 デスクトップ システムでディスクを目的のディレクトリにマ...

Vue でルートをジャンプする方法をご存知ですか?

目次最初の方法: router-link (宣言型ルーティング) 2番目の方法: router.pu...

Win10 に Linux ubuntu-18.04 デュアル システムをインストールする (インストール ガイド)

コンピューターに Linux Ubuntu システムをインストールしました。初めてインストールしまし...

Centos7でmysql5.7.19のデータ保存場所を移動する方法

シナリオ: データ量が増加すると、MySQL が配置されているディスクがいっぱいになり、より大きなス...

Windows 10 Home Edition に Docker for Windows をインストールする

0. 背景ハードウェア: Xiaomi Notebook Air 13/Inter Core i7-...

シンプルな計算機を実装するためのネイティブ js

この記事の例では、参考までに簡単な計算機を実装するためのjsの具体的なコードを共有しています。具体的...

最もよく使用されるJavaScriptイベントについて詳しく学ぶ

目次JavaScript イベント:よく使用されるイベント:イベントアクション要約するJavaScr...

Linux での JDK と Tomcat のアップロードと設定に関する詳細なチュートリアル

準備1. 仮想マシンを起動する2. gitツールルートアカウントでログインルートアカウントを使用して...

Docker5フル機能の港湾倉庫構築プロセス

Harbor は、Docker イメージを保存および配布するためのエンタープライズ レベルのレジスト...

LinuxにNginxをインストールする正しい手順

序文私のように、Java バックエンドに勤勉な人であれば、多数のプロジェクト機能を実装することに加え...