Migrar de Svelte 4 a 5
Convierta componentes de Svelte 4 a runas con la guía oficial de migración y los codemods.
Migrar de Svelte 4 a 5 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.
Mentalidad de migración
Svelte 5 es mayormente compatible con versiones anteriores. Puede migrar componente por componente.
Codemod oficial
Ejecute el script de migración para convertir automáticamente la sintaxis heredada.
npx sv migrate svelte-5Qué hace
El codemod reescribe export let como $props(), $: como $derived/$effect, etc.
Revisar el resultado
Revise siempre el código migrado. Algunos patrones requieren decisiones manuales.
Coexistencia
La sintaxis antigua y la nueva pueden coexistir en el mismo archivo; Svelte 5 las detecta por bloque.
Mutaciones reactivas
Los proxies de $state hacen que array.push() sea reactivo. Puede eliminar las antiguas reasignaciones auxiliares.
Distribuidor de eventos
createEventDispatcher se reemplaza por props de callback que se pasan mediante $props().
Slots frente a snippets
Los slots siguen funcionando; considere reescribirlos como snippets para los componentes nuevos.
Compatibilidad con stores
svelte/store sigue siendo compatible. Puede continuar utilizando stores o refactorizar el estado de la aplicación con $state.
Compatibilidad de bibliotecas
La mayoría de las bibliotecas son compatibles con ambas versiones; actualice un componente cada vez.
Documentación
La documentación de Svelte 5 incluye una guía de migración con comparaciones en paralelo.
Comprobación rápida
¿Se pueden combinar las sintaxis de Svelte 4 y 5?
Resumen
Migre a Svelte 5 con npx sv migrate svelte-5; la sintaxis antigua sigue funcionando para facilitar una adopción gradual.
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 41
- Lecciones
- 163
Preguntas frecuentes
¿La lección «Migrar de Svelte 4 a 5» es gratis?
Sí — el texto completo de «Migrar de Svelte 4 a 5» 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 «Migrar de Svelte 4 a 5»?
Convierta componentes de Svelte 4 a runas con la guía oficial de migración y los codemods. 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 «Migrar de Svelte 4 a 5»?
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
- $state.raw para estado no reactivo
- $derived.by para derivaciones complejas
- $effect.root para la limpieza manual
- Migrar de Svelte 4 a 5