diff --git a/docs/.vitepress/theme/styles/landing.css b/docs/.vitepress/theme/styles/landing.css index 1ab20a4..18897f4 100644 --- a/docs/.vitepress/theme/styles/landing.css +++ b/docs/.vitepress/theme/styles/landing.css @@ -12,10 +12,6 @@ html:has(.landing) { } } -html.dark:has(.landing) { - --vp-c-bg: #101010; -} - .landing { overflow-x: hidden; background-color: #101010; diff --git a/docs/_data/team.js b/docs/_data/team.js index c9cf52d..78840aa 100644 --- a/docs/_data/team.js +++ b/docs/_data/team.js @@ -116,6 +116,12 @@ export const core = [ ], sponsor: 'https://github.com/sponsors/hi-ogawa', }, + { + avatar: 'https://github.com/btea.png', + name: 'btea', + title: 'Web Developer', + links: [{ icon: 'github', link: 'https://github.com/btea' }], + }, ] export const emeriti = [ @@ -202,18 +208,18 @@ export const emeriti = [ sponsor: 'https://github.com/sponsors/Shinigami92', }, { - avatar: 'https://github.com/sodatea.png', + avatar: 'https://github.com/haoqunjiang.png', name: 'Haoqun Jiang', - title: 'Desarrollador', + title: 'Miembro principal del equipo', org: 'Vue.js', orgLink: 'https://vuejs.org/', - desc: 'Miembro del equipo principal de Vue/Vite. Contribuyente del codigo abierto a tiempo completo.', + desc: 'Curador de mejores prácticas para herramientas de Vue.js.', links: [ { icon: 'github', link: 'https://github.com/sodatea' }, { icon: 'x', link: 'https://x.com/haoqunjiang' }, { icon: 'mastodon', link: 'https://elk.zone/m.webtoo.ls/@haoqun' }, { icon: 'bluesky', link: 'https://bsky.app/profile/haoqun.dev' }, ], - sponsor: 'https://github.com/sponsors/sodatea', + sponsor: 'https://github.com/sponsors/haoqunjiang', }, ] diff --git a/docs/blog/anunciando-vite6.md b/docs/blog/anunciando-vite6.md new file mode 100644 index 0000000..20d9c11 --- /dev/null +++ b/docs/blog/anunciando-vite6.md @@ -0,0 +1,113 @@ +--- +title: ¡Vite 6.0 ya está disponible! +author: + name: El equipo de Vite +date: 2024-11-26 +sidebar: false +head: + - - meta + - property: og:type + content: website + - - meta + - property: og:title + content: Anunciando Vite 6 + - - meta + - property: og:image + content: https://es.vite.dev/og-image-announcing-vite6.png + - - meta + - property: og:url + content: https://es.vite.dev/blog/announcing-vite6 + - - meta + - property: og:description + content: Anuncio de lanzamiento de Vite 6 + - - meta + - name: twitter:card + content: summary_large_image +--- + +# ¡Vite 6.0 ya está disponible! + +_26 de Noviembre de 2024_ + +![Imagen de portada del anuncio de Vite 6](/og-image-announcing-vite6.png) + +Hoy damos otro gran paso en la historia de Vite. El equipo de Vite, los colaboradores y los socios del ecosistema están emocionados de anunciar el lanzamiento de Vite 6. + +Ha sido un año lleno de eventos. La adopción de Vite sigue creciendo, con las descargas semanales de npm saltando de 7.5 millones a 17 millones desde el lanzamiento de Vite 5 hace un año. [Vitest](https://vitest.dev) no solo es más favorecido por los usuarios, sino que también está comenzando a formar su propio ecosistema. Por ejemplo, [Storybook](https://storybook.js.org) ahora tiene nuevas capacidades de prueba impulsadas por Vitest. + +Nuevos frameworks también se han unido al ecosistema de Vite, incluyendo [TanStack Start](https://tanstack.com/start), [One](https://onestack.dev/), [Ember](https://emberjs.com/), entre otros. Los frameworks web están innovando a un ritmo cada vez más rápido. Puedes ver las mejoras que se están realizando en [Astro](https://astro.build/), [Nuxt](https://nuxt.com/), [SvelteKit](https://kit.svelte.dev/), [Solid Start](https://www.solidjs.com/blog/introducing-solidstart), [Qwik City](https://qwik.builder.io/qwikcity/overview/), [RedwoodJS](https://redwoodjs.com/), [React Router](https://reactrouter.com/), y la lista sigue. + +Vite es utilizado por OpenAI, Google, Apple, Microsoft, NASA, Shopify, Cloudflare, GitLab, Reddit, Linear, entre muchos otros. Hace dos meses, comenzamos una lista de [empresas que usan Vite](https://github.com/vitejs/companies-using-vite). Nos alegra ver a muchos desarrolladores enviándonos un PR para agregar sus empresas a la lista. Es difícil de creer cuánto ha crecido el ecosistema que construimos juntos desde que Vite dio sus primeros pasos. + +![Descargas semanales de npm de Vite](/vite6-npm-weekly-downloads.png) + +## Acelerando el ecosistema de Vite + +El mes pasado, la comunidad se reunió para la tercera edición de [ViteConf](https://viteconf.org/24/replay), organizada una vez más por [StackBlitz](https://stackblitz.com). Fue la conferencia más grande de Vite, con una amplia representación de los creadores del ecosistema. Entre otros anuncios, Evan You presentó [VoidZero](https://staging.voidzero.dev/posts/announcing-voidzero-inc), una empresa dedicada a construir una cadena de herramientas de desarrollo unificada y de alto rendimiento para el ecosistema JavaScript. VoidZero está detrás de [Rolldown](https://rolldown.rs) y [Oxc](https://oxc.rs), y su equipo está logrando avances significativos, preparándolos rápidamente para ser adoptados por Vite. Mira la charla de apertura de Evan para conocer más sobre los próximos pasos para el futuro impulsado por Rust de Vite. + +[Stackblitz](https://stackblitz.com) presentó [bolt.new](https://bolt.new), una aplicación Remix que combina Claude y WebContainers y te permite interactuar, editar, ejecutar y desplegar aplicaciones full-stack. Nate Weiner presentó [One](https://onestack.dev/), un nuevo framework React impulsado por Vite para la web y lo nativo. Storybook mostró sus últimas [funciones de prueba](https://youtu.be/8t5wxrFpCQY?si=PYZoWKf-45goQYDt) impulsadas por Vitest. Y mucho más. Te recomendamos ver [todas las 43 charlas](https://www.youtube.com/playlist?list=PLqGQbXn_GDmnObDzgjUF4Krsfl6OUKxtp). Los ponentes hicieron un gran esfuerzo para compartir con nosotros lo que cada proyecto ha estado haciendo. + +Vite también tiene una página de inicio renovada y un dominio limpio. Debes actualizar tus URL para que apunten al nuevo dominio [vite.dev](https://es.vite.dev) de ahora en adelante. El nuevo diseño e implementación fue realizado por VoidZero, el mismo equipo que creó su sitio web. Un agradecimiento a [Vicente Rodriguez](https://bento.me/rmoon) y [Simon Le Marchant](https://marchantweb.com/). + +## La próxima versión importante de Vite ya está aquí + +Vite 6 es la versión más importante desde Vite 2. Estamos ansiosos por asociarnos con el ecosistema para seguir expandiendo nuestros recursos comunes a través de nuevas APIs y, como siempre, una base más pulida sobre la cual construir. + +Enlaces rápidos: + +- [Documentación](/) +- Traducciones: [简体中文](https://cn.vite.dev/), [日本語](https://ja.vite.dev/), [Español](https://es.vite.dev/), [Português](https://pt.vite.dev/), [한국어](https://ko.vite.dev/), [Deutsch](https://de.vite.dev/) +- [Guía de migración](/guide/migration) +- [Lista de cambios en GitHub](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#600-2024-11-26) + +Si eres nuevo en Vite, te sugerimos leer primero [las guías de inicio](/guide/) y [las funcionalidades](/guide/features). + +Queremos agradecer a los más de [1,000 colaboradores de Vite Core](https://github.com/vitejs/vite/graphs/contributors) y a los mantenedores y colaboradores de plugins, integraciones, herramientas y traducciones de Vite que nos han ayudado a crear esta nueva versión importante. Te invitamos a involucrarte y ayudarnos a mejorar Vite para todo el ecosistema. Aprende más en nuestra [Guía de Contribuciones](https://github.com/vitejs/vite/blob/main/CONTRIBUTING.md). + +Para comenzar, te sugerimos ayudar a [clasificar problemas](https://github.com/vitejs/vite/issues), [revisar PRs](https://github.com/vitejs/vite/pulls), enviar PRs con pruebas fallidas basadas en problemas abiertos y apoyar a otros en [las discusiones](https://github.com/vitejs/vite/discussions) y el [foro de ayuda de Vite Land](https://discord.com/channels/804011606160703521/1019670660856942652). Si deseas hablar con nosotros, únete a nuestra [comunidad en Discord](http://chat.vite.dev/) y saluda en el canal [#contributing](https://discord.com/channels/804011606160703521/804439875226173480). + +Para las últimas noticias sobre el ecosistema Vite y Vite Core, síguenos en [Bluesky](https://bsky.app/profile/vite.dev), [X](https://twitter.com/vite_js), o [Mastodon](https://webtoo.ls/@vite). + +## Comenzando con Vite 6 + +Puedes usar `pnpm create vite` para crear rápidamente una aplicación Vite con tu framework preferido o jugar en línea con Vite 6 usando [vite.new](https://vite.new). También puedes ejecutar `pnpm create vite-extra` para acceder a plantillas de otros frameworks y entornos de ejecución (Solid, Deno, SSR, y plantillas para bibliotecas). Las plantillas `create vite-extra` también están disponibles cuando ejecutas `create vite` bajo la opción `Others`. + +Las plantillas de inicio de Vite están pensadas para ser usadas como un campo de pruebas para probar Vite con diferentes frameworks. Cuando inicies tu próximo proyecto, deberías buscar la plantilla recomendada por cada framework. `create vite` también proporciona un acceso rápido para configurar plantillas adecuadas por algunos frameworks, como `create-vue`, `Nuxt 3`, `SvelteKit`, `Remix`, `Analog`, y `Angular`. + +## Soporte de Node.js + +Vite 6 soporta Node.js 18, 20 y 22+, similar a Vite 5. El soporte para Node.js 21 ha sido descontinuado. Vite deja de soportar versiones más antiguas de Node.js después de su [EOL](https://endoflife.date/nodejs). El EOL de Node.js 18 es a finales de abril de 2025, después de lo cual podríamos lanzar una nueva versión importante para actualizar la versión mínima requerida de Node.js. + +## API Experimental de Entorno + +Vite se está volviendo más flexible con la introducción de la nueva API de Entorno. Estas APIs permitirán a los autores de frameworks ofrecer una experiencia de desarrollo más cercana a la producción, además de permitir que el Ecosistema comparta nuevos bloques de compilación. Si estás construyendo una Aplicación de Página Única (SPA), nada cambiará; al usar Vite con un entorno de cliente único, todo funcionará como antes. Vite 6 también es retrocompatible para aplicaciones SSR (Renderizado del lado del servidor) personalizadas. El público principal para la API de Entorno son los autores de frameworks. + +Para los usuarios interesados en aprender más, [Sapphi](https://github.com/sapphi-red) escribió una excelente [Introducción a la API de Entorno](https://green.sapphi.red/blog/increasing-vites-potential-with-the-environment-api). Este es un excelente lugar para comenzar y entender cómo Vite se está volviendo aún más flexible. + +Si eres un autor de framework o mantenedor de un plugin de Vite y te gustaría usar las nuevas APIs, puedes explorar las [Guías de la API de Entorno](/guide/api-environment). + +Queremos expresar nuestro agradecimiento a todos los involucrados en la definición e implementación de estas nuevas APIs. La historia comenzó con Vite 2, que adoptó el esquema de desarrollo SSR sin empaquetar pionero de [Rich Harris](https://github.com/Rich-Harris) y el equipo de [SvelteKit](https://svelte.dev/docs/kit). La transformación SSR de Vite allanó el camino para que [Anthony Fu](https://github.com/antfu/) y [Pooya Parsa](https://github.com/pi0) crearan vite-node y mejoraran la historia de SSR de [Nuxt](https://antfu.me/posts/dev-ssr-on-nuxt). Anthony usó vite-node para potenciar [Vitest](https://vitest.dev), y [Vladimir Sheremet](https://github.com/sheremet-va) continuó mejorándolo mientras mantenía Vitest. A principios de 2023, Vladimir comenzó a trabajar en llevar vite-node al núcleo de Vite, finalizando en su lanzamiento como la API de Runtime en Vite 5.1. Los comentarios de los socios del ecosistema, especialmente el equipo de Cloudflare, motivaron una reestructuración más ambiciosa de los entornos de Vite. Puedes aprender más sobre este viaje viendo [la charla de Patak en ViteConf 24](https://www.youtube.com/watch?v=WImor3HDyqU?si=EZ-rFJn4pDW3tUvp). + +Todo el equipo de Vite participó en la definición de la nueva API, que fue co-diseñada con comentarios de muchos proyectos dentro del Ecosistema. ¡Gracias a todos los que contribuyeron! Animamos a aquellos que estén construyendo frameworks, plugins o herramientas sobre Vite a involucrarse. Las nuevas APIs son experimentales, y colaboraremos con el Ecosistema para refinarlas y estabilizarlas para la próxima versión principal. Si tienes preguntas o comentarios, no dudes en unirte a la [discusión abierta en GitHub](https://github.com/vitejs/vite/discussions/16358). + +## Cambios Principales + +- [Valor por defecto para `resolve.conditions`](/guide/migration#default-value-for-resolve-conditions) +- [JSON.stringify](/guide/migration#json-stringify) +- [Soporte extendido de referencias de recursos en elementos HTML](/guide/migration#extended-support-of-asset-references-in-html-elements) +- [postcss-load-config](/guide/migration#postcss-load-config) +- [Sass ahora usa la API moderna por defecto](/guide/migration#sass-now-uses-modern-api-by-default) +- [Personalizar el nombre del archivo CSS de salida en modo librería](/guide/migration#customize-css-output-file-name-in-library-mode) +- [Y más cambios que solo deberían afectar a unos pocos usuarios](/guide/migration#advanced) + +También hay una nueva página de [Cambios importantes](/changes/) que enumera todos los cambios planificados, en consideración y pasados en Vite. + +## Migración a Vite 6 + +Para la mayoría de los proyectos, la actualización a Vite 6 debería ser directa, pero recomendamos revisar la [Guía de Migración detallada](/guide/migration) antes de actualizar. + +La lista completa de cambios está en el [Changelog de Vite 6](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#500-2024-11-26). + +## Agradecimientos + +Vite 6 es el resultado de largas horas de trabajo por parte de nuestra comunidad de contribuyentes, mantenedores descendentes, autores de plugins y el [equipo de Vite](/team). Agradecemos a las personas y empresas que patrocinan el desarrollo de Vite. Vite es traído a ustedes por [VoidZero](https://voidzero.dev), en colaboración con [StackBlitz](https://stackblitz.com/), [Nuxt Labs](https://nuxtlabs.com/) y [Astro](https://astro.build). Un agradecimiento a los patrocinadores en [GitHub Sponsors de Vite](https://github.com/sponsors/vitejs) y [Open Collective de Vite](https://opencollective.com/vite). diff --git a/docs/changes/shared-plugins-during-build.md b/docs/changes/shared-plugins-during-build.md index 63e3e1c..5929b29 100644 --- a/docs/changes/shared-plugins-during-build.md +++ b/docs/changes/shared-plugins-during-build.md @@ -1,21 +1,81 @@ -# Plugins Compartidos durante la Construcción +# Plugins compartidos durante la compilación -::: tip Feedback -Danos tu opinión en la [discusión de feedback sobre la API de Entorno](https://github.com/vitejs/vite/discussions/16358). +::: tip Comentarios +Danos tu opinión en [Discusión sobre la API del entorno](https://github.com/vitejs/vite/discussions/16358) ::: Consulta [Plugins compartidos durante la compilación](/guide/api-environment.md#shared-plugins-during-build). -Ámbito afectado: **`Autores de Plugins para Vite`** +Ámbito afectado: `Autores de plugins de Vite` -::: warning Cambio Futuro por Defecto -`builder.sharedConfigBuild` se introdujo por primera vez en `v6.0`. Puedes configurarlo como `true` para verificar cómo funcionan tus plugins con una configuración compartida. Estamos recopilando feedback sobre cambiar esta opción a predeterminada en una versión principal futura, una vez que el ecosistema de plugins esté preparado. +::: warning Cambio futuro por defecto +`builder.sharedConfigBuild` se introdujo por primera vez en `v6.0`. Puedes configurarlo como `true` para comprobar cómo funcionan tus plugins con una configuración compartida. Estamos buscando comentarios sobre la posibilidad de cambiar el valor por defecto en una futura versión importante una vez que el ecosistema de plugins esté listo. ::: ## Motivación -// TODO: +Alinear los pipelines de plugins de desarrollo y compilación. -## Guía de Migración +## Guía de migración -// TODO: +Para poder compartir plugins entre entornos, el estado del plugin debe estar asociado al entorno actual. Un plugin de la siguiente forma contará el número de módulos transformados en todos los entornos. + +```js +function CountTransformedModulesPlugin() { + let transformedModules + return { + name: 'count-transformed-modules', + buildStart() { + transformedModules = 0 + }, + transform(id) { + transformedModules++ + }, + buildEnd() { + console.log(transformedModules) + }, + } +} +``` + +Si en cambio queremos contar el número de módulos transformados para cada entorno, necesitamos mantener un mapa: + +```js +function PerEnvironmentCountTransformedModulesPlugin() { + const state = new Map() + return { + name: 'count-transformed-modules', + perEnvironmentStartEndDuringDev: true, + buildStart() { + state.set(this.environment, { count: 0 }) + } + transform(id) { + state.get(this.environment).count++ + }, + buildEnd() { + console.log(this.environment.name, state.get(this.environment).count) + } + } +} +``` + +Para simplificar este patrón, Vite exporta un helper `perEnvironmentState`: + +```js +function PerEnvironmentCountTransformedModulesPlugin() { + const state = perEnvironmentState<{ count: number }>(() => ({ count: 0 })) + return { + name: 'count-transformed-modules', + perEnvironmentStartEndDuringDev: true, + buildStart() { + state(this).count = 0 + } + transform(id) { + state(this).count++ + }, + buildEnd() { + console.log(this.environment.name, state(this).count) + } + } +} +``` diff --git a/docs/config/server-options.md b/docs/config/server-options.md index 0c24d13..eb0d0c6 100644 --- a/docs/config/server-options.md +++ b/docs/config/server-options.md @@ -215,11 +215,11 @@ export defineConfig default ({ - **Tipo:** `object | null` -Opciones del observador del sistema de archivos que se pasan a [chokidar](https://github.com/paulmillr/chokidar#getting-started). Si se pasa la opción `ignored`, Vite también convertirá automáticamente cualquier cadena en [patrones picomatch](https://github.com/micromatch/picomatch#globbing-features). +Opciones del observador del sistema de archivos que se pasan a [chokidar](https://github.com/paulmillr/chokidar/tree/3.6.0#api). El observador del servidor Vite observa el `root` y omite los directorios `.git/`, `node_modules/`, y las carpetas de Vite `cacheDir` y `build.outDir` de forma predeterminada. Al actualizar un archivo observado, Vite aplicará HMR y actualizará la página solo si es necesario. -Si se configura en `null`, no se observarán archivos. `server.watcher` no observará ningún archivo y llamar a `add` no tendrá efecto. +Si se configura en `null`, no se vigilarán archivos. `server.watcher` proporcionará un emisor de eventos compatible, pero llamar a `add` o `unwatch` no tendrá efecto. ::: warning Observando archivos en `node_modules` Actualmente no es posible ver archivos y paquetes en `node_modules`. Para obtener más avances y soluciones alternativas, puede seguir la [propuesta #8619](https://github.com/vitejs/vite/issues/8619). @@ -234,7 +234,7 @@ Para solucionarlo, podrías: - **Recomendado**: Utilizar las aplicaciones WSL2 para editar tus archivos. - También se recomienda mover la carpeta del proyecto fuera del sistema de archivos de Windows. El acceso al sistema de archivos de Windows desde WSL2 es lento. Eliminar esa sobrecarga mejorará el rendimiento. - Configura `{ usePolling: true }`. - - Ten en cuenta que [`usePolling` conduce a un uso elevado de la CPU](https://github.com/paulmillr/chokidar#performance). + - Ten en cuenta que [`usePolling` conduce a un uso elevado de la CPU](https://github.com/paulmillr/chokidar/tree/3.6.0#performance). ::: diff --git a/docs/config/shared-options.md b/docs/config/shared-options.md index f0f5a70..3192003 100644 --- a/docs/config/shared-options.md +++ b/docs/config/shared-options.md @@ -109,7 +109,7 @@ Para compilaciones de SSR, la deduplicación no funciona para las salidas de com ## resolve.conditions - **Tipo:** `string[]` -- **Por defecto:** `['module', 'browser', 'development|production']` +- **Por defecto:** `['module', 'browser', 'development|production']` (`defaultClientConditions`) Condiciones adicionales permitidas al resolver las [exportaciones condicionales](https://nodejs.org/api/packages.html#packages_conditional_exports) desde un paquete. @@ -139,7 +139,7 @@ Las claves de exportación que terminan en "/" están obsoletas en Node y es pos ## resolve.mainFields - **Tipo:** `string[]` -- **Por defecto:** `[''browser', 'module', 'jsnext:main', 'jsnext']` +- **Por defecto:** `['browser', 'module', 'jsnext:main', 'jsnext']` (`defaultClientMainFields`) Lista de campos en `package.json` para probar al resolver el punto de entrada de un paquete. Ten en cuenta que esto tiene menos prioridad que las exportaciones condicionales resueltas desde el campo `exports`: si un punto de entrada se resuelve con éxito desde `exports`, el campo principal se ignorará. diff --git a/docs/config/ssr-options.md b/docs/config/ssr-options.md index 68c68a6..79e930e 100644 --- a/docs/config/ssr-options.md +++ b/docs/config/ssr-options.md @@ -34,7 +34,7 @@ Ten en cuenta que si tanto `ssr.noExternal: true` como `ssr.external: true` est ## ssr.resolve.conditions - **Tipo:** `string[]` -- **Por defecto:** `['module', 'node', 'development|production']` (`['module', 'browser', 'development|production']` for `ssr.target === 'webworker'`) +- **Por defecto:** `['module', 'node', 'development|production']` (`defaultServerConditions`) (`['module', 'browser', 'development|production']` (`defaultClientConditions`) for `ssr.target === 'webworker'`) - **Relacionado:** [Condiciones de resolución](./shared-options.md#resolve-conditions) El valor predeterminado es la raíz [`resolve.conditions`](./shared-options.md#resolve-conditions). @@ -46,4 +46,17 @@ Ten en cuenta que si tanto `ssr.noExternal: true` como `ssr.external: true` est - **Tipo:** `string[]` - **Por defecto:** `['node']` - Condiciones que se utilizan durante la importación ssr (incluido `ssrLoadModule`) de dependencias externalizadas. + Condiciones que se utilizan durante la importación en SSR (incluyendo `ssrLoadModule`) de dependencias directas externalizadas (dependencias externas importadas por Vite). + + :::tip + + Al usar esta opción, asegúrate de ejecutar Node con la [opción `--conditions`](https://nodejs.org/docs/latest/api/cli.html#-c-condition---conditionscondition) y los mismos valores tanto en desarrollo como en compilación para obtener un comportamiento coherente. + + Por ejemplo, al establecer `['node', 'custom']`, deberías ejecutar `NODE_OPTIONS='--conditions custom' vite` en desarrollo y `NODE_OPTIONS="--conditions custom" node ./dist/server.js` después de compilar. + +### ssr.resolve.mainFields + +- **Tipo:** `string[]` +- **Por defecto:** `['module', 'jsnext:main', 'jsnext']` + +Lista de campos en `package.json` que se intentarán al resolver el punto de entrada de un paquete. Ten en cuenta que esta configuración tiene menor precedencia que las exportaciones condicionales resueltas desde el campo `exports`: si se resuelve con éxito un punto de entrada desde `exports`, se ignorará el campo `main`. Esta configuración solo afecta a las dependencias no externalizadas. diff --git a/docs/guide/api-environment-frameworks.md b/docs/guide/api-environment-frameworks.md index 416c80a..1971886 100644 --- a/docs/guide/api-environment-frameworks.md +++ b/docs/guide/api-environment-frameworks.md @@ -1,13 +1,14 @@ # API de Entorno para Frameworks :::warning Experimental -El trabajo inicial para esta API se introdujo en Vite 5.1 con el nombre "API de Runtime de Vite". Esta guía describe una API revisada, renombrada como API de Entorno. Esta API será lanzada en Vite 6 como experimental. Ya puedes probarla en la última versión `vite@6.0.0-beta.x`. -Recursos: +La API de Entorno es experimental. Mantendremos las API estables durante Vite 6 para permitir que el ecosistema experimente y construya sobre ella. Planeamos estabilizar estas nuevas API con posibles cambios incompatibles en Vite 7. + +**Recursos:** - [Discusión sobre comentarios](https://github.com/vitejs/vite/discussions/16358) donde estamos recopilando opiniones sobre las nuevas APIs. - [PR de la API de Entorno](https://github.com/vitejs/vite/pull/16471) donde se implementaron y revisaron las nuevas APIs. -Por favor, comparte tus comentarios mientras pruebas la propuesta. +Por favor, comparte tus comentarios con nosotros. ::: ## Entornos y frameworks @@ -80,7 +81,7 @@ app.use('*', async (req, res, next) => { }) ``` -## SSR agnóstico al tiempo de ejecución +## SSR Agnóstico al tiempo de ejecución Dado que el `RunnableDevEnvironment` solo se puede usar para ejecutar código en el mismo tiempo de ejecución que el servidor Vite, requiere un entorno compatible con Node.js. Esto significa que necesitarás usar el `DevEnvironment` sin modificar para hacerlo agnóstico al tiempo de ejecución. @@ -370,7 +371,7 @@ export function createHandler(input) { } ``` -## Entornos durante la compilación +## Entornos Durante la Compilación En la interfaz de línea de comandos, al ejecutar `vite build` y `vite build --ssr`, se seguirán compilando únicamente los entornos de cliente y SSR para mantener la retrocompatibilidad. @@ -391,7 +392,7 @@ export default { } ``` -## Código independiente del entorno +## Código Agnóstico del entorno La mayor parte del tiempo, la instancia actual de `environment` estará disponible como parte del contexto del código que se está ejecutando, por lo que la necesidad de acceder a ella a través de `server.environments` será poco común. diff --git a/docs/guide/api-environment-instances.md b/docs/guide/api-environment-instances.md index 2771430..acbd9e0 100644 --- a/docs/guide/api-environment-instances.md +++ b/docs/guide/api-environment-instances.md @@ -1,17 +1,17 @@ -# Uso de instancias de `Environment` +# Uso de Instancias de `Environment` :::warning Experimental -El trabajo inicial para esta API se introdujo en Vite 5.1 bajo el nombre "API de Runtime de Vite". Esta guía describe una API revisada, renombrada a API de Entorno (Environment API). Esta API será lanzada en Vite 6 como experimental. Puedes probarla en la última versión beta `vite@6.0.0-beta.x`. +La API de Entorno es experimental. Mantendremos las API estables durante Vite 6 para permitir que el ecosistema experimente y construya sobre ella. Planeamos estabilizar estas nuevas API con posibles cambios incompatibles en Vite 7. **Recursos:** - [Discusión de feedback](https://github.com/vitejs/vite/discussions/16358), donde estamos recopilando opiniones sobre las nuevas APIs. - [Solicitud de cambios de la API de Entorno](https://github.com/vitejs/vite/pull/16471), donde se implementó y revisó la nueva API. -Por favor, compártenos tus comentarios mientras pruebas esta propuesta. +Por favor, comparte tus comentarios con nosotros. ::: -## Acceso a los entornos +## Acceso a los Entornos Durante el desarrollo, los entornos disponibles en un servidor de desarrollo se pueden acceder utilizando `server.environments`: @@ -100,7 +100,7 @@ Una instancia de entorno en el servidor Vite permite procesar una URL utilizando Estamos usando `transformRequest(url)` y `warmupRequest(url)` en la versión actual de esta propuesta para que sea más fácil de discutir y entender para los usuarios acostumbrados a la API actual de Vite. Antes de liberar, podemos aprovechar la oportunidad para revisar estos nombres también. Por ejemplo, podría llamarse `environment.processModule(url)` o `environment.loadModule(url)` tomando como referencia el `context.load(id)` de los hooks de Rollup. Por el momento, creemos que mantener los nombres actuales y posponer esta discusión es lo mejor. ::: -## Grafos de módulos separados +## Grafos de Módulos Separados Cada entorno tiene un grafo de módulos aislado. Estos grafos tienen la misma estructura, lo que permite implementar algoritmos genéricos para recorrer o consultar los nodos sin depender del entorno. Por ejemplo, cuando un archivo es modificado, el grafo de módulos de cada entorno se usa para descubrir los módulos afectados y ejecutar HMR independientemente. diff --git a/docs/guide/api-environment-plugins.md b/docs/guide/api-environment-plugins.md index c31ad48..ecdbc1a 100644 --- a/docs/guide/api-environment-plugins.md +++ b/docs/guide/api-environment-plugins.md @@ -1,17 +1,17 @@ # API de Entorno para Plugins :::warning Experimental -El trabajo inicial para esta API se introdujo en Vite 5.1 con el nombre "API de Runtime de Vite". Esta guía describe una API revisada, renombrada a API de Entorno. Esta API se lanzará en Vite 6 como experimental. Ya puedes probarla en la última versión `vite@6.0.0-beta.x`. +La API de Entorno es experimental. Mantendremos las API estables durante Vite 6 para permitir que el ecosistema experimente y construya sobre ellas. Planeamos estabilizar estas nuevas API con posibles cambios incompatibles en Vite 7. -Recursos: +**Recursos:** - [Discusión de feedback](https://github.com/vitejs/vite/discussions/16358) donde estamos recopilando comentarios sobre las nuevas APIs. - [PR de la API de Entorno](https://github.com/vitejs/vite/pull/16471) donde se implementaron y revisaron las nuevas APIs. -Por favor, comparte con nosotros tus comentarios mientras pruebas la propuesta. +Por favor, comparte tus comentarios con nosotros. ::: -## Accediendo al entorno actual en hooks +## Accediendo al Entorno Actual en Hooks Dado que solo había dos entornos hasta Vite 6 (`client` y `ssr`), un booleano `ssr` era suficiente para identificar el entorno actual en las APIs de Vite. Los hooks de plugins recibían un booleano `ssr` en el último parámetro de opciones, y varias APIs esperaban un parámetro `ssr` opcional para asociar correctamente los módulos con el entorno adecuado (por ejemplo, `server.moduleGraph.getModuleByUrl(url, { ssr })`). @@ -27,7 +27,7 @@ transform(code, id) { } ``` -## Registrar nuevos entornos usando hooks +## Registrar Nuevos Entornos usando Hooks Los plugins pueden agregar nuevos entornos en el hook `config` (por ejemplo, para tener un grafo de módulos separado para [RSC](https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components)): @@ -39,7 +39,7 @@ config(config: UserConfig) { Un objeto vacío es suficiente para registrar el entorno, con valores predeterminados desde la configuración de entorno a nivel raíz. -## Configuración del entorno usando hooks +## Configuración del Entorno usando Hooks Mientras el hook `config` se está ejecutando, la lista completa de entornos aún no es conocida y los entornos pueden verse afectados tanto por los valores predeterminados desde la configuración de entorno a nivel raíz como explícitamente a través del registro `config.environments`. @@ -53,7 +53,7 @@ configEnvironment(name: string, options: EnvironmentOptions) { } ``` -## El hook `hotUpdate` +## El Hook `hotUpdate` - **Tipo:** `(this: { environment: DevEnvironment }, options: HotUpdateOptions) => Array | void | Promise | void>` - **Ver también:** [API de HMR](./api-hmr) @@ -140,7 +140,8 @@ const UnoCssPlugin = () => { // usar hooks globales normalmente }, applyToEnvironment(environment) { - // retorna true si este plugin debe estar activo en este entorno + // devuelve `true` si este plugin debe estar activo en este entorno, + // o devuelve un nuevo plugin para reemplazarlo. // si no se usa el hook, el plugin está activo en todos los entornos }, resolveId(id, importer) { @@ -150,13 +151,42 @@ const UnoCssPlugin = () => { } ``` -## Entorno en hooks de compilación +Si un plugin no es consciente del entorno y tiene un estado que no está asociado al entorno actual, el hook `applyToEnvironment` permite convertirlo fácilmente en un plugin por entorno. + +```js +import { nonShareablePlugin } from 'non-shareable-plugin' +export default defineConfig({ + plugins: [ + { + name: 'per-environment-plugin', + applyToEnvironment(environment) { + return nonShareablePlugin({ outputName: environment.name }) + }, + }, + ], +}) +``` + +Vite exporta un helper `perEnvironmentPlugin` para simplificar estos casos donde no se requieren otros hooks: + +```js +import { nonShareablePlugin } from 'non-shareable-plugin' +export default defineConfig({ + plugins: [ + perEnvironmentPlugin('per-environment-plugin', (environment) => + nonShareablePlugin({ outputName: environment.name }) + ), + ], +}) +``` + +## Entorno en Hooks de Compilación De la misma manera que durante el desarrollo, los hooks de plugins también reciben la instancia del entorno durante la compilación, reemplazando el booleano `ssr`. Esto también funciona para `renderChunk`, `generateBundle` y otros hooks solo de compilación. -## Plugins compartidos durante la compilación +## Plugins Compartidos durante la Compilación Antes de Vite 6, los pipelines de plugins funcionaban de manera diferente durante el desarrollo y la compilación: diff --git a/docs/guide/api-environment-runtimes.md b/docs/guide/api-environment-runtimes.md index 60b4a36..0338fad 100644 --- a/docs/guide/api-environment-runtimes.md +++ b/docs/guide/api-environment-runtimes.md @@ -1,14 +1,14 @@ # API de Entorno para Runtimes :::warning Experimental -El trabajo inicial para esta API se introdujo en Vite 5.1 con el nombre "API de Runtime de Vite". Esta guía describe una API revisada, renombrada a API de Entorno. Esta API se lanzará en Vite 6 como experimental. Ya puedes probarla en la última versión `vite@6.0.0-beta.x`. +La API de Entorno es experimental. Mantendremos las API estables durante Vite 6 para permitir que el ecosistema experimente y construya sobre ellas. Planeamos estabilizar estas nuevas API con posibles cambios incompatibles en Vite 7. **Recursos:** - [Discusión de feedback](https://github.com/vitejs/vite/discussions/16358) donde recopilamos opiniones sobre las nuevas APIs. - [PR de la API de Entorno](https://github.com/vitejs/vite/pull/16471) donde se implementaron y revisaron las nuevas APIs. -Por favor, comparte tus comentarios mientras pruebas esta propuesta. +Por favor, comparte tus comentarios con nosotros. ::: ## Fábricas de Entornos @@ -72,7 +72,7 @@ Los frameworks pueden usar un entorno con el runtime Workerd para hacer SSR medi const ssrEnvironment = server.environments.ssr ``` -## Crear una nueva fábrica de entornos +## Crear una nueva Fábrica de Entornos Un servidor de desarrollo Vite expone dos entornos por defecto: un entorno `client` y un entorno `ssr`. El entorno `client` es un entorno de navegador por defecto, y el ejecutor de módulos se implementa importando el módulo virtual `/@vite/client` en las aplicaciones cliente. El entorno `ssr` se ejecuta en el mismo runtime Node que el servidor Vite por defecto y permite que los servidores de aplicaciones procesen solicitudes con soporte completo de HMR durante el desarrollo. @@ -255,9 +255,7 @@ interface ModuleRunnerTransport { connect?(handlers: ModuleRunnerTransportHandlers): Promise | void disconnect?(): Promise | void send?(data: HotPayload): Promise | void - invoke?( - data: HotPayload - ): Promise<{ /** result */ r: any } | { /** error */ e: any }> + invoke?(data: HotPayload): Promise<{ result: any } | { error: any }> timeout?: number } ``` diff --git a/docs/guide/api-environment.md b/docs/guide/api-environment.md index 6c0af73..d167b7c 100644 --- a/docs/guide/api-environment.md +++ b/docs/guide/api-environment.md @@ -1,21 +1,21 @@ # API de Entorno ::: warning Experimental -El trabajo inicial para esta API se introdujo en Vite 5.1 con el nombre "API de Entorno en Tiempo de Ejecución". Esta guía describe una API revisada, renombrada como API de Entorno. Esta API será lanzada en Vite 6 como experimental. Puedes probarla ya en la última versión `vite@6.0.0-beta.x`. +La API de Entorno es experimental. Mantendremos las API estables durante Vite 6 para permitir que el ecosistema experimente y construya sobre ellas. Planeamos estabilizar estas nuevas API con posibles cambios incompatibles en Vite 7. Recursos: - [Discusión de feedback](https://github.com/vitejs/vite/discussions/16358) donde estamos recopilando comentarios sobre las nuevas APIs. - [Solicitud de cambios de la API de Entorno](https://github.com/vitejs/vite/pull/16471) donde se implementa y revisa la nueva API. -Por favor, compártenos tus comentarios a medida que pruebas la propuesta. +Por favor, comparte tus comentarios con nosotros. ::: ## Formalizando entornos Vite 6 formaliza el concepto de Entornos. Hasta Vite 5, había dos entornos implícitos (`client` y opcionalmente `ssr`). La nueva API de Entornos permite a los usuarios y autores de frameworks crear tantos entornos como sea necesario para mapear la forma en que sus aplicaciones funcionan en producción. Esta nueva capacidad requirió una gran reestructuración interna, pero se ha puesto mucho esfuerzo en mantener la retrocompatibilidad. El objetivo inicial de Vite 6 es migrar el ecosistema a la nueva versión principal de la manera más fluida posible, retrasando la adopción de estas nuevas APIs experimentales hasta que un número suficiente de usuarios haya migrado y los autores de frameworks y plugins hayan validado el nuevo diseño. -## Cerrando la brecha entre la compilación y el desarrollo +## Cerrando la Brecha entre la Compilación y el Desarrollo Para una SPA/MPA simple, no se exponen nuevas APIs sobre los entornos en la configuración. Internamente, Vite aplicará las opciones a un entorno `client`, pero no es necesario conocer este concepto al configurar Vite. La configuración y el comportamiento de Vite 5 deberían funcionar de manera fluida aquí. @@ -92,7 +92,7 @@ interface UserConfig extends EnvironmentOptions { Ten en cuenta que la propiedad de nivel superior `ssr` se va a declarar obsoleta una vez que la API de Entornos sea estable. Esta opción tiene el mismo rol que `environments`, pero para el entorno predeterminado `ssr` y solo permitía configurar un pequeño conjunto de opciones. -## Instancias de entornos personalizados +## Instancias de Entornos Personalizados Están disponibles APIs de configuración de bajo nivel para que los proveedores de entornos en tiempo de ejecución puedan proporcionar entornos con valores predeterminados adecuados para sus entornos de ejecución. Estos entornos también pueden generar otros procesos o hilos para ejecutar los módulos durante el desarrollo en un entorno de ejecución más cercano al entorno de producción. @@ -121,7 +121,7 @@ La API actual del servidor Vite aún no está obsoleta y es compatible con versi - [SSR usando la API `ModuleRunner`](/changes/ssr-using-modulerunner) - [Plugins compartidos durante la compilación](/changes/shared-plugins-during-build) -## Usuarios objetivo +## Usuarios Objetivo Esta guía proporciona los conceptos básicos sobre entornos para usuarios finales. diff --git a/docs/guide/api-javascript.md b/docs/guide/api-javascript.md index 71abd4a..2356b1b 100644 --- a/docs/guide/api-javascript.md +++ b/docs/guide/api-javascript.md @@ -106,9 +106,9 @@ interface ViteDevServer { */ httpServer: http.Server | null /** - * Instancia del observador Chokidar. Si `config.server.watch` está configurado en `null`, - * no observará ningún archivo y llamar a `add` no tendrá efecto. - * https://github.com/paulmillr/chokidar#getting-started + * Instancia del observador Chokidar. Si `config.server.watch` se establece en `null`, + * no se vigilarán archivos y llamar a `add` o `unwatch` no tendrá efecto. + * https://github.com/paulmillr/chokidar/tree/3.6.0#api */ watcher: FSWatcher /** diff --git a/docs/guide/assets.md b/docs/guide/assets.md index 24a2da4..46bfb0d 100644 --- a/docs/guide/assets.md +++ b/docs/guide/assets.md @@ -14,7 +14,7 @@ import imgUrl from './img.png' document.getElementById('hero-img').src = imgUrl ``` -Por ejemplo, `imgUrl` será `/img.png` durante el desarrollo y se convertirá en `/assets/img.2d8efhg.png` en la compilación de producción. +Por ejemplo, `imgUrl` será `/src/img.png` durante el desarrollo y se convertirá en `/assets/img.2d8efhg.png` en la compilación de producción. El comportamiento es similar al `file-loader` de webpack. La diferencia es que la importación puede ser usando rutas públicas absolutas (basadas en la raíz del proyecto durante el desarrollo) o rutas relativas. diff --git a/docs/guide/backend-integration.md b/docs/guide/backend-integration.md index 9cbd51c..287aded 100644 --- a/docs/guide/backend-integration.md +++ b/docs/guide/backend-integration.md @@ -98,6 +98,8 @@ Si necesitas una integración personalizada, puedes seguir los pasos de esta gu - El manifest tiene una estructura `Record`. - Para fragmentos de entrada fija o dinámica, la key es la ruta src relativa de la raíz del proyecto. + - Para los fragmentos que no son de entrada, la clave es el nombre base del archivo generado, precedido por un `_`. + - Para el archivo CSS generado cuando [`build.cssCodeSplit`](/config/build-options.md#build-csscodesplit) es `false`, la clave es `style.css`. - Los fragmentos contendrán información en sus importaciones estaticas y dinamicas (ambos son keys que mapean al correspondiente fragmento en el manifest), y tambien su correspondiente css y archivo de recurso estatico (si los hay). 4. Tambien puedes usar este archivo para renderizar links o precargar directivas con archivos con hash. diff --git a/docs/guide/env-and-mode.md b/docs/guide/env-and-mode.md index 27599e1..1fef125 100644 --- a/docs/guide/env-and-mode.md +++ b/docs/guide/env-and-mode.md @@ -29,6 +29,8 @@ Vite usa [dotenv](https://github.com/motdotla/dotenv) para cargar variables de e Un archivo env para un modo específico (por ejemplo, `.env.production`) tendrá mayor prioridad que uno genérico (por ejemplo, `.env`). +Vite siempre cargará los archivos `.env` y `.env.local`, además del archivo específico de modo `.env.[modo]`. Las variables declaradas en los archivos específicos del modo tendrán prioridad sobre las de los archivos genéricos, pero las variables definidas solo en `.env` o `.env.local` seguirán estando disponibles en el entorno. + Además, las variables de entorno que ya existen cuando se ejecuta Vite tienen la prioridad más alta y no serán sobrescritas por los archivos `.env`. Por ejemplo, al ejecutar `VITE_SOME_KEY=123 vite build`. Los archivos `.env` se cargan al inicio de Vite. Reinicia el servidor después de realizar cambios. diff --git a/docs/guide/features.md b/docs/guide/features.md index 756c110..d62a4db 100644 --- a/docs/guide/features.md +++ b/docs/guide/features.md @@ -176,7 +176,7 @@ Los recursos referenciados por elementos HTML como `