đŸ”„ Remplacement de module Ă  chaud

Le remplacement de module Ă  chaud (Hot Module Replacement : HMR) amĂ©liore l'expĂ©rience de dĂ©veloppement en mettant Ă  jour automatiquement les modules dans le navigateur lors de l'exĂ©cution sans nĂ©cessiter une actualisation complĂšte de la page. Cela signifie que l'Ă©tat de l'application peut ĂȘtre conservĂ© lorsque vous changez de petites choses. L'implĂ©mentation HMR de Parcel supporte Ă  la fois les ressources JavaScript et CSS.

Depuis la version 1.12.0, l'implémentation par défaut a été modifiée pour actualiser complÚtement la page lorsque les fichiers sont modifiés. Vous pouvez choisir d'activer le HMR en ajoutant ce qui suit dans votre application. Cela ne s'appliquera que dans le mode développement, HMR est automatiquement désactivé lors de la construction en mode de production.

if (module.hot) {
  module.hot.accept()
}

Lorsque vous enregistrez des fichiers, Parcel reconstruit les Ă©lĂ©ments modifiĂ©s et envoie une mise Ă  jour contenant le nouveau code Ă  tous les clients en cours d'exĂ©cution. Le nouveau code remplace alors l'ancienne version et il est rĂ©Ă©valuĂ© avec tous les parents. Vous pouvez vous connecter Ă  ce processus en utilisant l'API module.hot, qui peut notifier votre code quand un module est sur le point d'ĂȘtre Ă©liminĂ©, ou quand une nouvelle version arrive. Des projets comme react-hot-loader peuvent aider pour ce processus et fonctionnent immĂ©diatement avec Parcel.

Il y a deux mĂ©thodes Ă  connaĂźtre : module.hot.accept et module.hot.dispose. Vous appelez module.hot.accept avec une fonction de rappel qui est exĂ©cutĂ©e lorsque ce module ou l'une de ses dĂ©pendances sont mis Ă  jour. module.hot.dispose accepte une fonction de rappel qui est appelĂ©e lorsque ce module est sur le point d'ĂȘtre remplacĂ©.

if (module.hot) {
  module.hot.dispose(function() {
    // le module est sur le point d'ĂȘtre remplacĂ©
  })

  module.hot.accept(function() {
    // le module ou l'une de ses dĂ©pendances vient d'ĂȘtre mis Ă  jour
  })
}

Dépendances installées automagiquement

Chaque fois que Parcel rencontre une dĂ©pendance qui correspond au schĂ©ma node_module et ne le trouve pas, Parcel tente d'installer cette dĂ©pendance en utilisant yarn ou npm selon la prĂ©sence ou non d'un fichier yarn.lock. Cela Ă©vite au dĂ©veloppeur de quitter Parcel ou d'avoir plusieurs fenĂȘtres de terminal ouvertes.

Cela ne se produit qu'en dĂ©veloppement (en utilisant serve ou watch), par contre en production (en utilisant build) autoinstall est dĂ©sactivĂ© pour empĂȘcher les effets secondaires indĂ©sirables sur le dĂ©ploiement.

Vous pouvez désactiver cette fonctionnalité en utilisant --no-autoinstall.

Safe Write

Certains éditeurs de texte et IDE ont une fonctionnalité appelée safe write qui évite la perte de données, en prenant une copie du fichier et en la renommant à l'enregistrement.

Lors de l'utilisation du Hot Module Reload (HMR), cette fonctionnalité bloque la détection automatique des mises à jour de fichiers. Pour désactiver safe write utilisez les options fournies ci-dessous :

Aidez-nous à améliorer la documentation

Si quelque chose manque ou n'est pas tout à fait clair, veuillez enregistrer une issue sur le dépÎt du site web (en anglais) ou modifier cette page.