¡Vite 4.0 ya está disponible!
9 de diciembre de 2022 - Echa un vistazo al anuncio de Vite 5.0
Vite 3 fue lanzado hace 5 meses. Las descargas de npm por semana han pasado de 1 millón a 2.5 millones desde entonces. El ecosistema también ha madurado y sigue creciendo. En la encuesta Jamstack Conf de este año, el uso entre la comunidad saltó del 14% al 32%, manteniendo un alto puntaje de satisfacción de 9.7. Vimos los lanzamientos estables de Astro 1.0, Nuxt 3 y otros marcos impulsados por Vite que están innovando y colaborando: SvelteKit, Solid Start, Qwik City. Storybook anunció soporte de primera clase para Vite como una de sus características principales para Storybook 7.0. Deno ahora ofrece soporte para Vite. La adopción de Vitest se está disparando, pronto representará la mitad de las descargas de Vite en npm. Nx también está invirtiendo en el ecosistema y oficialmente es compatible con Vite.
Como muestra del crecimiento que han experimentado Vite y los proyectos relacionados, el ecosistema de Vite se reunió el 11 de octubre en el ViteConf 2022. Vimos a representantes del principal marco web y herramientas contar historias de innovación y colaboración. Y en un movimiento simbólico, el equipo de Rollup elige ese día exacto para lanzar Rollup 3.
Hoy, el equipo de desarrollo principal de Vite con la ayuda de nuestros socios del ecosistema, se complace en anunciar el lanzamiento de Vite 4, impulsado durante el tiempo de compilación por Rollup 3. Hemos trabajado con el ecosistema para garantizar una ruta de actualización sin problemas para esta nueva especialidad. Vite ahora usa Rollup 3, lo que nos permitió simplificar el manejo interno de recursos de Vite y tiene muchas mejoras. Consulta las notas de la versión de Rollup 3 aquí.
Enlaces rápidos:
Documentación en otros idiomas:
Si recientemente comenzaste a usar Vite, te sugerimos leer la Guía de por qué Vite y consultar Cómo comenzar y la Guía de funcionalidades. Si deseas participar, las contribuciones son bienvenidas en GitHub. Casi 700 colaboradores han contribuido a Vite. Sigue las actualizaciones en Twitter y Mastodon, o únete y colabora con otros en nuestra comunidad Discord.
Empezar a jugar con Vite 4
Usa pnpm create vite para montar un proyecto de Vite con tu marco de trabajo preferido, o abre una plantilla iniciada en línea para jugar con Vite 4 usando vite.new.
También puedes ejecutar pnpm create vite-extra para obtener acceso a plantillas de otros marcos y tiempos de ejecución (Solid, Deno, SSR y bibliotecas de inicio). Las plantillas create vite-extra también están disponibles cuando ejecutas create vite en la opción Others.
Ten en cuenta que las plantillas de inicio de Vite están diseñadas para usarse como un campo de juego para probar Vite con diferentes marcos. Cuando empieces a trabajar en tu próximo proyecto, te recomendamos utilizar los iniciadores sugeridos por cada marco. Algunos de ellos ahora también redirigen create vite a sus iniciadores (create-vue y Nuxt 3 para Vue, y SvelteKit para Svelte).
Nuevo complemento React usando SWC durante el desarrollo
SWC ahora es un reemplazo maduro para Babel, especialmente en el contexto de los proyectos React. La implementación de React Fast Refresh de SWC es mucho más rápida que Babel y, para algunos proyectos, ahora es una mejor alternativa. Desde Vite 4, hay dos complementos disponibles para proyectos React con diferentes compensaciones. Creemos que vale la pena soportar ambos enfoques en este momento, y continuaremos explorando mejoras para ambos complementos en el futuro.
@vitejs/plugin-react
@vitejs/plugin-react es un complemento que usa esbuild y Babel, logrando HMR rápido con un tamaño de paquete pequeño y la flexibilidad de poder usar el pipeline de transformación de Babel.
@vitejs/plugin-react-swc (nuevo)
@vitejs/plugin-react-swc es un nuevo complemento que usa esbuild durante la compilación, pero reemplaza Babel con SWC durante el desarrollo. Para grandes proyectos que no requieren extensiones de React no estándar, el arranque en frío y Hot Module Replacement (HMR) pueden ser significativamente más rápidos.
Compatibilidad de navegador
La compilación para navegadores modernos ahora apunta a safari14 de forma predeterminada para una mayor compatibilidad con ES2020. Esto significa que las compilaciones para navegadores modernos ahora pueden usar BigInt y que el operador coalescente nulo ya no se transpile. Si necesitas soportar navegadores más antiguos, puedes agregar @vitejs/plugin-legacy como de costumbre.
Importando CSS como String
En Vite 3, importar la exportación predeterminada de un archivo .css podría generar una doble carga de CSS.
import cssString from './global.css'Esta carga doble podría ocurrir ya que se emitirá un archivo .css y es probable que el código de la aplicación también use la cadena CSS, por ejemplo, inyectada por el tiempo de ejecución del marco. A partir de Vite 4, la exportación predeterminada .css ha quedado obsoleta. El modificador de sufijo de consulta ?inline debe usarse en este caso, ya que no emite los estilos .css importados.
import stuff from './global.css?inline'Aprende más sobre ello en la Guía de migración.
Variables de entorno
Vite ahora usa dotenv 16 y dotenv-expand 9 (anteriormente dotenv 14 y dotenv-expand 5). Si tienes un valor que incluye # o `, deberás incluirlos entre comillas.
-VITE_APP=ab#cd`ef
+VITE_APP="ab#cd`ef"Para obtener más detalles, consulta dotenv y la lista de cambios de dotenv-expand.
Otras funcionalidades
- Atajos para la interfaz de línea de comando (presiona
hdurante el desarrollo para verlos todos) (#11228) - Compatibilidad con paquete de parches cuando se preempaquetan las dependencias (#10286)
- Salida de registros de compilación más limpia (#10895) y cambiado a
kBpara alinearse con las herramientas de desarrollo del navegador (#10982) - Mensajes de error mejorados durante SSR (#11156)
Tamaño de paquete reducido
Vite se preocupa por su huella, para agilizar la instalación, especialmente en el caso de uso de playgrounds para documentación y reproducciones. Y una vez más, esta especialidad trae mejoras en el tamaño del paquete de Vite. El tamaño de instalación de Vite 4 es un 23% más pequeño en comparación con vite 3.2.5 (14,1 MB frente a 18,3 MB).
Actualizaciones al Core de Vite
Vite Core y vite-ecosystem-ci continúan evolucionando para brindar una mejor experiencia a los mantenedores y colaboradores y para garantizar que el desarrollo se escale para hacer frente al crecimiento en el ecosistema.
Complementos de frameworks fuera del core
@vitejs/plugin-vue y @vitejs/plugin-vue han sido parte del monorepo del core de Vite desde las primeras versiones de Vite. Esto nos ayudó a obtener un ciclo de retroalimentación cercano al realizar cambios, ya que estábamos probando y lanzando tanto Core como los complementos juntos. Con vite-ecosystem-ci podemos obtener estos comentarios con estos complementos desarrollados en repositorios independientes, por lo que desde Vite 4, se han sacado del monorepo del núcleo de Vite. Esto es significativo para la historia del marco de trabajo agnóstico de Vite y nos permitirá crear equipos independientes para mantener cada uno de los complementos. Si tienes errores a informar o funciones a solicitar, crea propuestas en los nuevos repositorios en el futuro: vitejs/vite-plugin-vue y vitejs/vite-plugin-react.
Mejoras para vite-ecosystem-ci
vite-ecosystem-ci amplía la integración continua de Vite proporcionando informes de estado bajo demanda sobre el estado de los CI de la mayoría de los principales proyectos. Ejecutamos vite-ecosystem-ci tres veces por semana en la rama principal de Vite y recibimos informes oportunos antes de introducir una regresión. Vite 4 pronto será compatible con la mayoría de los proyectos que usan Vite, que ya preparó ramas con los cambios necesarios y los lanzará en los próximos días. También podemos ejecutar vite-ecosystem-ci a pedido en una solicitud de cambios usando /ecosystem-ci run en un comentario, lo que nos permite conocer el efecto de los cambios antes de que lleguen a main.
Agradecimientos
Vite 4 no sería posible sin las incontables horas de trabajo de los colaboradores de Vite, muchos de ellos mantenedores de proyectos y complementos posteriores, y los esfuerzos del Equipo de Vite. Todos hemos trabajado juntos para mejorar la experiencia de desarrollo de Vite una vez más, para cada marco y aplicación que lo usa. Estamos agradecidos de poder mejorar una base común para un ecosistema tan vibrante.
También estamos agradecidos con las personas y empresas que patrocinan el equipo de Vite y las empresas que invierten directamente en el futuro de Vite: el trabajo de @antfu7 en Vite y el ecosistema es parte de su trabajo; en Nuxt Labs, Astro está financiando el trabajo realizado por @bluwyoo en el core de Vite, y StackBlitz contrata a @patak_dev para trabajar a tiempo completo en Vite.
Próximos pasos
Nuestro enfoque inmediato estaría en clasificar las propuestas recién abiertas para evitar interrupciones por posibles regresiones. Si deseas involucrarte y ayudarnos a mejorar Vite, te sugerimos comenzar con la clasificación de las propuestas. Únete a nuestro Discord y comunícate en el canal #contributing. Mejora nuestra historia en #docs, y ayuda a otros en #help. Necesitamos continuar construyendo una comunidad útil y acogedora para la próxima ola de usuarios, a medida que la adopción de Vite continúa creciendo.
Hay muchos frentes abiertos para seguir mejorando la experiencia de usuario de todos los que han elegido Vite para potenciar sus marcos y desarrollar sus aplicaciones. ¡Vamos!