Le serveur de développement et le remplacement de module à chaud
Lancez le serveur de développement et découvrez comment HMR maintient votre navigateur synchronisé.
Le serveur de développement et le remplacement de module à chaud est une leçon Sveltejs Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Sveltejs Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Sveltejs Academy comprend 4 leçons au total.
Ce qu'est HMR
Le remplacement à chaud des modules met à jour uniquement les modules qui ont changé, sans rechargement complet de la page. L'état de votre application est généralement conservé.
Démarrer le serveur
Le script de développement démarre Vite, qui sert votre code avec HMR activé par défaut.
npm run devSurveiller le terminal
Vite affiche l'URL locale (par défaut http://localhost:5173) ainsi que l'URL réseau si vous lui transmettez --host.
Enregistrer pour mettre à jour
Modifiez n'importe quel fichier .svelte ou JS, puis enregistrez-le. Le navigateur se met à jour instantanément, souvent en quelques millisecondes.
Conservation de l'état
Svelte conserve si possible l'état des composants lors des mises à jour HMR. Un compteur à 5 reste à 5 après une modification du balisage.
Déclencheurs de rechargement complet
Certaines modifications forcent un rechargement complet : les fichiers de configuration, les points d'extension du serveur ou les erreurs d'importation. Vite vous l'indique dans la console.
Accès réseau
Transmettez --host pour exposer le serveur de développement sur votre LAN et pouvoir tester sur un téléphone.
npm run dev -- --hostConflits de ports
Si le port 5173 est déjà utilisé, Vite choisit le prochain port libre. Vous pouvez aussi imposer un port avec --port 4000.
Outils de développement du navigateur
Ouvrez les DevTools du navigateur pour voir les cartes de source qui renvoient à vos fichiers .svelte d'origine et obtenir des traces de pile exactes.
Superposition des erreurs
Les erreurs de syntaxe ou d'exécution apparaissent sous forme de superposition dans le navigateur. Corrigez le code : la superposition disparaît lors de l'enregistrement.
Arrêter le serveur
Appuyez sur Ctrl+C dans le terminal pour arrêter le serveur de développement. Relancez npm run dev pour le redémarrer.
Vérification rapide
Que fait HMR ?
Récapitulatif
Vous savez démarrer le serveur de développement, profiter de HMR, l'exposer sur votre réseau et résoudre les erreurs grâce à la superposition.
Questions Fréquemment Posées
La leçon « Le serveur de développement et le remplacement de module à chaud » est-elle gratuite ?
Oui — le texte complet de « Le serveur de développement et le remplacement de module à chaud » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Sveltejs Academy, passe à CoddyKit PRO. Le cours Sveltejs Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Le serveur de développement et le remplacement de module à chaud » ?
Lancez le serveur de développement et découvrez comment HMR maintient votre navigateur synchronisé. Tu pratiques Sveltejs Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Sveltejs Academy ?
Aucune expérience préalable n'est requise. Sveltejs Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Le serveur de développement et le remplacement de module à chaud » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Sveltejs Academy ?
Oui. Chaque leçon Sveltejs Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Qu’est-ce que Svelte et pourquoi compile-t-il
- Créer un projet avec npm create svelte
- Structure du projet : src routes static
- Le serveur de développement et le remplacement de module à chaud