序文少し前に、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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
tomcat9をアンインストールする1. Tomcatのインストールはディレクトリに解凍するだけで...
新しいバージョンの設定インターフェースを作る際に、vueフレームワークを使用して実装しました。ページ...
インストール前の作業: VMware Workstation がインストールされていることを確認し、...
目次序文:特定の操作ステップ1: プレハブを準備するステップ2: オブジェクトプールを初期化するステ...
目標: 辺の長さが等しい正方形を作成する方法 1: 単位 vw を使用する (ps これが最も簡単な...
導入この記事では、Ubuntu 18.04 デスクトップ システムでディスクを目的のディレクトリにマ...
目次最初の方法: router-link (宣言型ルーティング) 2番目の方法: router.pu...
コンピューターに Linux Ubuntu システムをインストールしました。初めてインストールしまし...
シナリオ: データ量が増加すると、MySQL が配置されているディスクがいっぱいになり、より大きなス...
0. 背景ハードウェア: Xiaomi Notebook Air 13/Inter Core i7-...
この記事の例では、参考までに簡単な計算機を実装するためのjsの具体的なコードを共有しています。具体的...
目次JavaScript イベント:よく使用されるイベント:イベントアクション要約するJavaScr...
準備1. 仮想マシンを起動する2. gitツールルートアカウントでログインルートアカウントを使用して...
Harbor は、Docker イメージを保存および配布するためのエンタープライズ レベルのレジスト...
序文私のように、Java バックエンドに勤勉な人であれば、多数のプロジェクト機能を実装することに加え...