El servidor de desarrollo y el reemplazo de módulos en caliente
Ejecute el servidor de desarrollo y comprenda cómo HMR mantiene sincronizado el navegador
El servidor de desarrollo y el reemplazo de módulos en caliente es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Sveltejs Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Sveltejs Academy incluye 4 lecciones en total.
Qué es HMR
Hot Module Replacement actualiza únicamente los módulos que han cambiado, sin recargar toda la página. El estado de su aplicación normalmente se conserva.
Iniciar el servidor
El script de desarrollo inicia Vite, que sirve su código con HMR habilitado de forma predeterminada.
npm run devObservar el terminal
Vite muestra la URL local (de forma predeterminada, http://localhost:5173) y la URL de red si pasa --host.
Guardar para actualizar
Edite cualquier archivo .svelte o JS y guárdelo. El navegador se actualiza al instante, normalmente en cuestión de milisegundos.
Conservación del estado
Svelte conserva el estado de los componentes durante las actualizaciones de HMR siempre que es posible. Un contador que está en 5 sigue en 5 después de modificar el marcado.
Cambios que provocan una recarga completa
Algunos cambios fuerzan una recarga completa: archivos de configuración, hooks del servidor o errores de importación. Vite se lo indica en la consola.
Acceso a la red
Pase --host para exponer el servidor de desarrollo en su LAN y poder probarlo en un teléfono.
npm run dev -- --hostConflictos de puertos
Si el puerto 5173 está ocupado, Vite selecciona el siguiente puerto libre. También puede forzar un puerto con --port 4000.
Herramientas de desarrollo del navegador
Abra las herramientas de desarrollo del navegador para ver mapas de origen que apuntan a sus archivos .svelte originales y proporcionan trazas de la pila precisas.
Superposición de errores
Los errores de sintaxis o de ejecución aparecen como una superposición en el navegador. Corrija el código y la superposición desaparecerá al guardar.
Detener el servidor
Pulse Ctrl+C en el terminal para detener el servidor de desarrollo. Vuelva a ejecutar npm run dev para reiniciarlo.
Comprobación rápida
¿Qué hace HMR?
Resumen
Ahora puede iniciar el servidor de desarrollo, aprovechar HMR, exponerlo en su red y recuperarse de los errores mediante la superposición.
Preguntas frecuentes
¿La lección «El servidor de desarrollo y el reemplazo de módulos en caliente» es gratis?
Sí — el texto completo de «El servidor de desarrollo y el reemplazo de módulos en caliente» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Sveltejs Academy, actualiza a CoddyKit PRO. El curso de Sveltejs Academy incluye 4 lecciones en total.
¿Qué aprenderé en «El servidor de desarrollo y el reemplazo de módulos en caliente»?
Ejecute el servidor de desarrollo y comprenda cómo HMR mantiene sincronizado el navegador Practicas Sveltejs Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Sveltejs Academy?
No se requiere experiencia previa. Sveltejs Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «El servidor de desarrollo y el reemplazo de módulos en caliente»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Sveltejs Academy?
Sí. Cada lección de Sveltejs Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Qué es Svelte y por qué compila
- Creación de un proyecto con npm create svelte
- Estructura del proyecto: src, routes y static
- El servidor de desarrollo y el reemplazo de módulos en caliente