開発サーバーとHot Module Replacement

ホットモジュール置換（HMR）は、ページ全体を再読み込みせず、変更されたモジュールだけを更新します。通常、アプリケーションの状態は維持されます。

devスクリプトはViteを起動します。Viteは、最初からHMRを有効にした状態でコードを配信します。

ViteはローカルURL（デフォルトはhttp://localhost:5173）と、--hostを渡した場合はネットワークURLも表示します。

任意の.svelteファイルまたはJSファイルを編集して保存します。ブラウザーは即座に、通常は数ミリ秒以内に更新されます。

Svelteは可能な限り、HMRによる更新の前後でコンポーネントの状態を保持します。マークアップを少し変更しても、5だったカウンターは5のままです。

設定ファイル、サーバーフック、インポートエラーなど、一部の変更では完全な再読み込みが発生します。Viteはコンソールで通知します。

--hostを渡すと、開発サーバーをLAN上に公開できるため、スマートフォンでテストできます。

ポート5173が使用中の場合、Viteは次に空いているポートを選択します。--port 4000を使ってポートを指定することもできます。

ブラウザーのDevToolsを開くと、元の.svelteファイルを指すソースマップを確認できます。これにより、正確なスタックトレースを取得できます。

構文エラーや実行時エラーは、ブラウザー上のオーバーレイに表示されます。コードを修正して保存すると、オーバーレイは消えます。

ターミナルでCtrl+Cを押すと開発サーバーを停止できます。npm run devをもう一度実行すると再起動します。

HMRは何を行いますか。

これで、開発サーバーを起動し、HMRの恩恵を受け、ネットワーク上に公開し、オーバーレイを使ってエラーから復旧できるようになりました。