web-dev-qa-db-ja.com

Node-React WebアプリでのNodemonおよび/またはホットリロード

最適な開発エクスペリエンスを作成するために、webpackでwebアプリを構成することに関しては、私はまだかなり新しいです。私は2つの異なるNode-Reactコースを受講しました。 1つは変更の追跡にnodemonを使用し、もう1つはホットリロードを実装しました。

これらの2つの依存関係に関しては、どちらか一方ですか。それらを一緒に使用する必要がありますか、それとも冗長なのでしょうか？

また、クライアント側でReactでExpressサーバーを使用している場合、react-hot-loader、webpack-hot-middleware、またはその両方を使用しますか？多くの方法があるように見えるので、ホットリロードでどのアプローチを取るべきか。

また、nodemonをラッパーとして使用すると（nodemon --exec babel-node server.js）、ホットモジュールのリロードが機能しませんが、サーバーを簡単に再起動する方法がまだ必要です。

みんなありがとう。

node.jsreactjsmodulereloadnodemon
12
ohryan

派手な用語を脱糖し、彼らは基本的に同じことを行っています-「ローカル編集（ファイルシステムの変更）を監視（監視）してアプリを更新します」。したがって、これらはすべて、促進を目的とした開発ツールです。 /開発プロセスをスピードアップします。（本番環境ではありません）

Nodemonはサーバー側（Express）を担当し、Webpack（監視モード）はクライアント側（React）を担当します。

あまり手間をかけずに、Nodemonはファイルが変更されたときにExpressサーバーを再起動/リロードするだけです。それ以外の場合は、手動で強制終了して再起動する必要があります。

ただし、Webpack（監視モードが有効になっていて、通常は開発サイクル）は少し複雑です。クライアント側のコード変更を監視しますが、

  1. hot-module-replacement -完全なリロードなしで変更されたモジュールを再コンパイルします
  2. webpack-dev-middleware -接続されたサーバーを介して結果を提供します

再コンパイルプロセスはかなり高速で、次のいずれかの方法でローカルの開発サーバーから提供できます。

  • webpack-dev-server 変更されたモジュールの提供と再読み込み（ブラウザに接続してページをハードリフレッシュ）
  • webpack-dev-middleware + Express/Koaサーバーでも同じことができますが、静的ファイルの提供やAPIルートの作成などの制御が強化されます。

ライブの再読み込みはクールですが、ページのハードリフレッシュにより、アプリはすべてのクライアント側の状態を失うため（多くの開発ツールを中断、開発ツールを再配布するなど）、 react-hot-loader がこの問題を解決します場合。

一般的に、あなたのExpress + Reactアプリに基づいて、Express用にNodemonを設定します。Reactの場合、スタンドアロンの開発サーバーがそのまま動作するようにするには、webpack-dev-serverを選択します+ react-hot-loader、または既存のExpressサーバーの上に開発サーバーを統合して少しカスタマイズしたい場合は、代わりにwebpack-dev-middleware + react-hot-loaderを使用します（いずれにしても、HMRをWebpackプラグインとして追加する必要があります）

17
Xlee