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トリガーの簡単な使用例

推薦する

vue-router を遅延ロードする 3 つの方法のまとめ

遅延読み込みを使用しない 'vue' から Vue をインポートします。 '...

Docker の MySQL 時間とシステム時間の不一致の問題を解決する

最近、Docker に MySQL をインストールしたところ、データベースの時刻がシステム時刻と 8...

MySql エラー 1698 (28000) の解決策

1. 問題の説明: MysqlERROR1698 (28000) の解決方法、新しくインストールされ...

Windows (x86、64 ビット) で MySQL 5.7.17 無料インストール バージョンをアップグレードするための詳細なチュートリアル

Laravel 5.4 のデフォルトの utf8mb64 文字エンコーディングをサポートするには、M...

Nginx ドメイン名の書き換えとワイルドカードドメイン名の解決を設定する方法

この記事では、ドメイン名の書き換えとワイルドカードドメイン名の解決を行うための Nginx の設定方...

固定テーブル幅テーブルレイアウト: 固定

テーブルを画面全体(残りの空白領域)に表示するために、幅属性は 100% と定義されることが多く、セ...

MySQLファイルストレージの詳細な説明

ファイルシステムとは何かInnoDB や MyIASM などのストレージ エンジンはテーブルをディス...

MYSQLパターンマッチングREGEXPの使用に関する一般的な話など

のようにLIKE ではデータ全体が一致する必要がありますが、REGEXP では部分的な一致のみが必要...

MySQL は ACID トランザクションをどのように実装しますか?

序文最近、面接中に、MySQL の InnoDB エンジンがどのようにトランザクションを実装している...

Dockerを使用してMQTTサーバーを構築するプロセスの詳細な説明

1. イメージをプルするdocker pull registry.cn-hangzhou.aliyu...

Docker コンテナで ASP.NET Core を実行する手順

最近は学ぶべき知識が多すぎて、どれを先に学べばいいのかわかりません。このブログはもともとxamari...

MySQL 外部キー制約の詳細な説明

公式ドキュメント: https://dev.mysql.com/doc/refman/5.7/en/...

MySQLトリガートリガー例の詳細な説明

目次トリガーとは何かトリガーを作成する表は次のようになります。さらにいくつかの単語を挙げます。制限と...

LINUX での IPTABLES ファイアウォールの基本的な使用方法のチュートリアル

序文パブリック IP を持つ本番 VPS の場合、必要なポートのみが開かれ、IP とポートを制御する...

Ubuntu 18.04 に MySQL をインストールする (グラフィカル チュートリアル)

ヒント: 以下の操作はすべて root 権限で実行されます。 # MySQL がインストールされてい...