Vite 8
Vite 8.x, de https://vite.dev/guide/. Cada afirmación termina con su página de origen.
Cómo navegar
- Lee las reglas rápidas a continuación. Capturan los errores más frecuentes.
- Abre el archivo de referencia que coincida con la tarea, de la tabla al final.
- Para
rollupOptions,esbuildomanualChunks, lee primeroreferences/migration.md.
Inicio rápido
// vite.config.ts
import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd(), '') // Los archivos .env no están en process.env aquí
return {
plugins: [react()],
server: { port: Number(env.PORT ?? 5173), strictPort: true },
build: {
rolldownOptions: { output: { /* Opciones de Rolldown, no de Rollup */ } },
},
}
})
{ "compilerOptions": { "types": ["vite/client"], "isolatedModules": true } }
- Node.js 20.19+ o 22.12+. Crear proyecto con
npm create vite@latest my-app -- --template react-ts. https://vite.dev/guide/ - Scripts:
vite(desarrollo, puerto 5173),vite build,vite preview(puerto 4173, solo verificación local, nunca un servidor de producción). https://vite.dev/guide/cli , https://vite.dev/config/preview-options - Vite nunca verifica tipos. Ejecuta
tsc --noEmitjunto a él. https://vite.dev/guide/features#transpile-only
Reglas rápidas
Cadena de herramientas y configuración
- Rolldown empaqueta las compilaciones y pre-empaqueta las dependencias. Oxc transforma y minimiza JS, Lightning CSS minimiza CSS. https://vite.dev/guide/why#a-unified-toolchain , https://vite.dev/guide/migration#dependency-optimizer-now-uses-rolldown , https://vite.dev/guide/migration#javascript-transforms-by-oxc , https://vite.dev/guide/migration#css-minification-by-lightning-css
- Escribe
build.rolldownOptions,worker.rolldownOptions,optimizeDeps.rolldownOptionsyoxc. Las clavesrollupOptions,esbuildOptionsyesbuildestán obsoletas. https://vite.dev/guide/migration#other-related-deprecations , https://vite.dev/guide/migration#javascript-transforms-by-oxc - Declara las entradas con la opción de nivel superior
input. Es el valor predeterminado parabuild.rolldownOptions.input,build.lib.entryyoptimizeDeps.entries. https://vite.dev/config/shared-options#input - La división en fragmentos se realiza mediante
build.rolldownOptions.output.codeSplitting, nomanualChunks. https://vite.dev/guide/build#chunking-strategy - El
targetdetsconfigse ignora: establecebuild.target(por defecto'baseline-widely-available'). Vite no añade polyfills, usa@vitejs/plugin-legacy. https://vite.dev/guide/features#target , https://vite.dev/config/build-options#build-target , https://vite.dev/guide/build#browser-compatibility - Oxc no puede reducir decoradores nativos ni ofuscar propiedades. Añade Babel o SWC filtrados a los archivos que contengan
@. https://vite.dev/guide/migration#javascript-transforms-by-oxc , https://vite.dev/guide/migration#javascript-minification-by-oxc - Una importación por defecto desde CommonJS puede devolver ahora todo el
module.exports("got: object", "is not a function"). https://vite.dev/guide/migration#consistent-commonjs-interop , https://vite.dev/guide/troubleshooting#default-import-unexpectedly-returns-an-object
Variables de entorno y modos
- Solo las variables
VITE_llegan al código del cliente, siempre como cadenas, incrustadas en el paquete. Nunca pongas secretos allí, y nunca establezcasenvPrefix: ''. https://vite.dev/guide/env-and-mode#env-variables , https://vite.dev/config/shared-options#envprefix - Los archivos
.envse cargan después de ejecutar la configuración. Envite.config, usaloadEnv(mode, root, ''). https://vite.dev/config/#using-environment-variables-in-config - Las variables de shell prevalecen sobre los archivos
.env. Los cambios en.envrequieren reiniciar. https://vite.dev/guide/env-and-mode#env-files --modeyNODE_ENVson independientes:vite build --mode stagingsigue siendo una compilación de producción. https://vite.dev/guide/env-and-mode#node-env-and-modes- Escribe
import.meta.env.BASE_URLliteralmente, la forma con corchetes no se reemplaza. https://vite.dev/guide/build#public-base-path
Servidor de desarrollo
- Nunca establezcas
server.allowedHosts: trueoserver.cors: true: cualquier sitio web podría leer tu código fuente. https://vite.dev/config/server-options#server-allowedhosts , https://vite.dev/config/server-options#server-cors - Un puerto ocupado se mueve silenciosamente al siguiente a menos que
strictPort: true. https://vite.dev/config/server-options#server-port - La configuración de WebSocket está en
server.ws.server.hmrsolo conservaboolean | { overlay }. https://vite.dev/config/server-options#server-hmr - Después de
npm linko editar una dependencia vinculada, reinicia convite --force. https://vite.dev/guide/troubleshooting#outdated-pre-bundled-deps-when-linking-to-a-local-package - Una recarga completa en lugar de HMR puede deberse a una dependencia circular (
vite --debug hmr). https://vite.dev/guide/troubleshooting#a-full-reload-happens-instead-of-hmr
Compilación y despliegue
- Sirve el HTML con
Cache-Control: no-cachey recarga envite:preloadError, o las páginas antiguas se romperán después de un despliegue. https://vite.dev/guide/build#load-error-handling - Los argumentos de
import.meta.globdeben ser literales. Unimport()dinámico debe comenzar con./,../o#y terminar con una extensión de archivo:import(`./dir/${name}.js`). https://vite.dev/guide/features#glob-import-caveats , https://vite.dev/guide/features#dynamic-import - CSS como cadena:
import css from './a.css?inline'. Las importaciones por defecto de.csshan desaparecido. https://vite.dev/guide/features#disabling-css-injection-into-the-page - El modo librería reemplaza estáticamente
import.meta.env.*pero dejaprocess.env.*intacto. https://vite.dev/guide/build#library-mode
Plugins, HMR, SSR
- Usa filtros de hooks,
transform: { filter: { id: /\\.ext$/ }, handler }, y devuelvemoduleType: 'js'al convertir código que no es JS. https://vite.dev/guide/api-plugin#hook-filters , https://vite.dev/guide/migration#module-type-support-and-auto-detection - Lee
this.environmenten los hooks en lugar de la banderassr.hotUpdatees la contraparte consciente del entorno dehandleHotUpdate, cuya eliminación solo está planificada para una versión futura. https://vite.dev/guide/api-environment-plugins#accessing-the-current-environment-in-hooks , https://vite.dev/changes/hotupdate-hook - Los middlewares de
configureServerse ejecutan antes que los de Vite. Devuelve una función para ejecutarla después. https://vite.dev/guide/api-plugin#configureserver - Escribe
import.meta.hot.accept(literalmente dentro deif (import.meta.hot). https://vite.dev/guide/api-hmr#hot-accept-cb - SSR dev:
server.middlewareMode: truemásappType: 'custom', carga la entrada conserver.environments.ssr.runner.import()(ssrLoadModuleestá planificado para eliminación). https://vite.dev/guide/ssr#setting-up-the-dev-server , https://vite.dev/guide/api-environment-frameworks#runnabledevenvironment , https://vite.dev/changes/ssr-using-modulerunner vite buildcompila solo el cliente.vite build --appcompila todos los entornos. https://vite.dev/guide/api-environment-frameworks#environments-during-build
Patrones antiguos
| Antiguo | Actual |
|---|---|
build.rollupOptions | build.rolldownOptions |
esbuild: { jsx..., jsxInject } | oxc: { jsx: {...}, jsxInject } |
optimizeDeps.esbuildOptions | optimizeDeps.rolldownOptions |
output.manualChunks | output.codeSplitting |
server.hmr.port, clientPort | server.ws.port, clientPort |
build.polyfillModulePreload | build.modulePreload.polyfill |
import s from './a.css' | import s from './a.css?inline' |
import.meta.hot.decline() (sin efecto) | import.meta.hot.invalidate() |
server.ssrLoadModule(url) | environment.runner.import(url) |
handleHotUpdate + server.ws.send | hotUpdate + this.environment.hot.send |
Archivos de referencia
| Archivo | Léelo para |
|---|---|
| references/migration.md | Vite 7 a 8: opciones renombradas, interoperabilidad CommonJS, características eliminadas |
| references/config-and-env.md | Configuración, loadEnv, import.meta.env, modos, base |
| references/code-features.md | TypeScript, JSX, HTML, CSS, assets, import.meta.glob, importaciones dinámicas, workers, WebAssembly |
| references/dev-server.md | Host, puerto, allowedHosts, CORS, proxy, modo middleware, preview |
| references/dependencies-and-performance.md | Pre-empaquetado, optimizeDeps, paquetes vinculados, velocidad de desarrollo |
| references/build.md | Targets, rolldownOptions, fragmentos, modo librería |
| references/backend-integration-and-deploy.md | Integración con backend, manifiesto, hosting estático |
| references/ssr.md | Servidor de desarrollo SSR, compilación de producción, externalización, plugins |
| references/plugins.md | Hooks de plugins, filtros, módulos virtuales, ordenación |
| references/hmr-and-javascript-api.md | import.meta.hot, eventos personalizados, createServer, build, preview |
| references/environment-api.md | Configuración de environments, this.environment, configEnvironment, estado por entorno |
| references/environment-frameworks.md | builder.buildApp, ModuleRunner |
Páginas leídas: SOURCES.md.