序文少し前に、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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
遅延読み込みを使用しない 'vue' から Vue をインポートします。 '...
最近、Docker に MySQL をインストールしたところ、データベースの時刻がシステム時刻と 8...
1. 問題の説明: MysqlERROR1698 (28000) の解決方法、新しくインストールされ...
Laravel 5.4 のデフォルトの utf8mb64 文字エンコーディングをサポートするには、M...
この記事では、ドメイン名の書き換えとワイルドカードドメイン名の解決を行うための Nginx の設定方...
テーブルを画面全体(残りの空白領域)に表示するために、幅属性は 100% と定義されることが多く、セ...
ファイルシステムとは何かInnoDB や MyIASM などのストレージ エンジンはテーブルをディス...
のようにLIKE ではデータ全体が一致する必要がありますが、REGEXP では部分的な一致のみが必要...
序文最近、面接中に、MySQL の InnoDB エンジンがどのようにトランザクションを実装している...
1. イメージをプルするdocker pull registry.cn-hangzhou.aliyu...
最近は学ぶべき知識が多すぎて、どれを先に学べばいいのかわかりません。このブログはもともとxamari...
公式ドキュメント: https://dev.mysql.com/doc/refman/5.7/en/...
目次トリガーとは何かトリガーを作成する表は次のようになります。さらにいくつかの単語を挙げます。制限と...
序文パブリック IP を持つ本番 VPS の場合、必要なポートのみが開かれ、IP とポートを制御する...
ヒント: 以下の操作はすべて root 権限で実行されます。 # MySQL がインストールされてい...