web-dev-qa-db-fra.com

Nodemon et / ou rechargement à chaud avec une application Web Node-React

Je suis encore assez nouveau en ce qui concerne la configuration d'une application web avec webpack pour créer une expérience de développement optimale. J'ai suivi deux cours Node-React différents; un où nous avons utilisé nodemon pour suivre les modifications et un autre où nous avons implémenté le rechargement à chaud.

En ce qui concerne ces deux dépendances, est-ce l'une ou l'autre? Devraient-ils être utilisés ensemble, ou serait-ce une sorte de redondance?

De plus, si j'utilise un serveur express avec React du côté client, dois-je utiliser react-hot-loader, webpack-hot-middleware, ou les deux? Je suis devenu confus sur quelle approche adopter avec le rechargement à chaud, car il semble qu'il existe de nombreuses façons de le faire.

De plus, lorsque j'utilise nodemon comme wrapper (nodemon --exec babel-node server.js), le rechargement à chaud de mon module ne fonctionne pas, mais je me retrouve toujours à la recherche d'un moyen de redémarrer facilement le serveur.

Merci les gars.

12
ohryan

Supprimez les terminologies sophistiquées, elles font essentiellement la même chose - "gardez un œil sur vos modifications locales (modifications du système de fichiers) et mettez à jour l'application pour vous", ce sont donc tous des outils de développement destinés à faciliter/accélérer votre processus de développement. (PAS pour la production)

Nodemon est en charge de votre côté serveur (Express) tandis que Webpack (mode veille) du côté client (React).

Sans trop de magie, Nodemon redémarre/recharge simplement votre serveur express lorsque le fichier change, sinon vous devez tuer et redémarrer manuellement.

Cependant, Webpack (avec le mode veille activé, généralement dans un cycle de développement) est un peu plus complexe, il surveille le changement de code côté client, mais avec l'aide de

  1. remplacement à chaud du module - recompiler le module modifié sans rechargement complet
  2. webpack-dev-middleware - servir les résultats via le serveur connecté

Le processus de recompilation est assez rapide et peut être servi à partir d'un serveur de développement local par:

  • webpack-dev-server servant les modules modifiés et le rechargement en direct (connectez-vous au navigateur et rafraîchissez la page)
  • webpack-dev-middleware + Serveur Express/Koa, peut faire la même chose mais vous obtenez plus de contrôle comme servir des fichiers statiques ou créer des routes api.

Même si le rechargement en direct est cool, car une actualisation brutale de la page fait que l'application perd tout l'état côté client (casse de nombreux outils de développement, outil de développement redux par exemple), react-hot-loader vient à la rescousse dans ce Cas.

En général, en fonction de votre application Express + React, je configurerais Nodemon pour Express. Pour React, si vous voulez qu'un serveur de développement autonome fonctionne prêt à l'emploi, choisissez webpack-dev-server + react-hot-loader, ou si vous souhaitez une intégration du serveur de développement au-dessus de votre serveur Express existant et un peu de personnalisation, utilisez webpack-dev-middleware + react-hot-loader au lieu. (HMR doit être ajouté comme plugin webpack de toute façon)

17
Xlee