Il server di sviluppo e la sostituzione a caldo dei moduli
Avvii il server di sviluppo e comprenda come HMR mantenga sincronizzato il browser.
Il server di sviluppo e la sostituzione a caldo dei moduli è una lezione Sveltejs Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Sveltejs Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Sveltejs Academy include 4 lezioni in totale.
Che cos'è l'HMR
La Hot Module Replacement aggiorna solo i moduli modificati, senza ricaricare completamente la pagina. In genere lo stato dell'applicazione viene preservato.
Avvio del server
Lo script dev avvia Vite, che serve il codice con HMR abilitato fin da subito.
npm run devOsservazione del terminale
Vite stampa l'URL locale (per impostazione predefinita http://localhost:5173) e l'URL di rete se si passa --host.
Salvataggio per aggiornare
Modifichi un file .svelte o JS qualsiasi e lo salvi. Il browser si aggiorna istantaneamente, spesso nel giro di pochi millisecondi.
Conservazione dello stato
Svelte conserva, quando possibile, lo stato dei componenti durante gli aggiornamenti HMR. Un contatore che vale 5 rimane a 5 dopo una modifica al markup.
Quando si attiva un ricaricamento completo
Alcune modifiche forzano un ricaricamento completo: file di configurazione, hook del server o errori di importazione. Vite lo segnala nella console.
Accesso dalla rete
Passi --host per rendere il server di sviluppo accessibile dalla LAN e poter eseguire test su un telefono.
npm run dev -- --hostConflitti tra le porte
Se la porta 5173 è occupata, Vite sceglie la porta libera successiva. Può anche imporre una porta con --port 4000.
DevTools del browser
Apra i DevTools del browser per visualizzare le source map che rimandano ai file .svelte originali e ottenere stack trace accurati.
Overlay degli errori
Gli errori di sintassi o di runtime vengono mostrati in un overlay nel browser. Corregga il codice: l'overlay scompare al salvataggio.
Arresto del server
Prema Ctrl+C nel terminale per arrestare il server di sviluppo. Esegua nuovamente npm run dev per riavviarlo.
Verifica rapida
Che cosa fa l'HMR?
Riepilogo
Ora sa avviare il server di sviluppo, sfruttare l'HMR, renderlo accessibile dalla rete e gestire gli errori tramite l'overlay.
Domande Frequenti
La lezione «Il server di sviluppo e la sostituzione a caldo dei moduli» è gratuita?
Sì — il testo completo di «Il server di sviluppo e la sostituzione a caldo dei moduli» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Sveltejs Academy, passa a CoddyKit PRO. Il corso Sveltejs Academy include 4 lezioni in totale.
Cosa imparerò in «Il server di sviluppo e la sostituzione a caldo dei moduli»?
Avvii il server di sviluppo e comprenda come HMR mantenga sincronizzato il browser. Eserciti Sveltejs Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Sveltejs Academy?
Non è richiesta alcuna esperienza precedente. Sveltejs Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Il server di sviluppo e la sostituzione a caldo dei moduli»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Sveltejs Academy?
Sì. Ogni lezione Sveltejs Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Che cos'è Svelte e perché compila
- Creazione di un progetto con npm create svelte
- Struttura del progetto: src routes static
- Il server di sviluppo e la sostituzione a caldo dei moduli