Vite 8
Vite 8.x, de https://vite.dev/guide/. Cada afirmação termina com sua página de origem.
Como navegar
- Leia as regras rápidas abaixo. Elas capturam os erros mais frequentes.
- Abra o arquivo de referência que corresponde à tarefa, a partir da tabela no final.
- Para
rollupOptions,esbuildoumanualChunks, leiareferences/migration.mdprimeiro.
Início 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(), '') // arquivos .env não estão em process.env aqui
return {
plugins: [react()],
server: { port: Number(env.PORT ?? 5173), strictPort: true },
build: {
rolldownOptions: { output: { /* opções do Rolldown, não do Rollup */ } },
},
}
})
{ "compilerOptions": { "types": ["vite/client"], "isolatedModules": true } }
- Node.js 20.19+ ou 22.12+. Gere com
npm create vite@latest my-app -- --template react-ts. https://vite.dev/guide/ - Scripts:
vite(dev, porta 5173),vite build,vite preview(porta 4173, apenas verificação local, nunca um servidor de produção). https://vite.dev/guide/cli , https://vite.dev/config/preview-options - Vite nunca faz verificação de tipos. Execute
tsc --noEmitem paralelo. https://vite.dev/guide/features#transpile-only
Regras rápidas
Ferramentas e configuração
- Rolldown empacota builds e pré-empacota dependências. Oxc transforma e minifica JS, Lightning CSS minifica 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
- Escreva
build.rolldownOptions,worker.rolldownOptions,optimizeDeps.rolldownOptionseoxc. As chavesrollupOptions,esbuildOptionseesbuildestão obsoletas. https://vite.dev/guide/migration#other-related-deprecations , https://vite.dev/guide/migration#javascript-transforms-by-oxc - Declare entradas com a opção de nível superior
input. É o padrão parabuild.rolldownOptions.input,build.lib.entryeoptimizeDeps.entries. https://vite.dev/config/shared-options#input - A divisão em chunks passa por
build.rolldownOptions.output.codeSplitting, não pormanualChunks. https://vite.dev/guide/build#chunking-strategy targetdotsconfigé ignorado: definabuild.target(padrão'baseline-widely-available'). Vite não adiciona polyfills, use@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 não pode reduzir decoradores nativos nem ofuscar propriedades. Adicione Babel ou SWC filtrados para arquivos contendo
@. https://vite.dev/guide/migration#javascript-transforms-by-oxc , https://vite.dev/guide/migration#javascript-minification-by-oxc - Uma importação padrão de CommonJS pode agora retornar todo o
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
Variáveis de ambiente e modos
- Apenas variáveis
VITE_chegam ao código do cliente, sempre como strings, embutidas no bundle. Nunca coloque segredos ali, e nunca definaenvPrefix: ''. https://vite.dev/guide/env-and-mode#env-variables , https://vite.dev/config/shared-options#envprefix - Arquivos
.envsão carregados após a execução da configuração. Emvite.config, useloadEnv(mode, root, ''). https://vite.dev/config/#using-environment-variables-in-config - Variáveis de shell sobrescrevem arquivos
.env. Edições em.envexigem reinicialização. https://vite.dev/guide/env-and-mode#env-files --modeeNODE_ENVsão independentes:vite build --mode stagingainda é uma build de produção. https://vite.dev/guide/env-and-mode#node-env-and-modes- Escreva
import.meta.env.BASE_URLliteralmente; a forma com colchetes não é substituída. https://vite.dev/guide/build#public-base-path
Servidor de desenvolvimento
- Nunca defina
server.allowedHosts: trueouserver.cors: true: qualquer site poderia ler seu código fonte. https://vite.dev/config/server-options#server-allowedhosts , https://vite.dev/config/server-options#server-cors - Uma porta ocupada move-se silenciosamente para a próxima, a menos que
strictPort: true. https://vite.dev/config/server-options#server-port - Configurações de WebSocket ficam em
server.ws.server.hmrmantém apenasboolean | { overlay }. https://vite.dev/config/server-options#server-hmr - Após
npm linkou editar uma dependência linkada, reinicie comvite --force. https://vite.dev/guide/troubleshooting#outdated-pre-bundled-deps-when-linking-to-a-local-package - Um recarregamento completo em vez de HMR pode vir de uma dependência circular (
vite --debug hmr). https://vite.dev/guide/troubleshooting#a-full-reload-happens-instead-of-hmr
Build e deploy
- Sirva HTML com
Cache-Control: no-cachee recarregue emvite:preloadError, ou páginas antigas quebram após um deploy. https://vite.dev/guide/build#load-error-handling - Argumentos de
import.meta.globdevem ser literais. Umimport()dinâmico deve começar com./,../ou#e terminar com uma extensão de arquivo:import(`./dir/${name}.js`). https://vite.dev/guide/features#glob-import-caveats , https://vite.dev/guide/features#dynamic-import - CSS como string:
import css from './a.css?inline'. Importações padrão de.cssnão existem mais. https://vite.dev/guide/features#disabling-css-injection-into-the-page - O modo biblioteca substitui estaticamente
import.meta.env.*mas deixaprocess.env.*intacto. https://vite.dev/guide/build#library-mode
Plugins, HMR, SSR
- Use filtros de hook,
transform: { filter: { id: /\\.ext$/ }, handler }, e retornemoduleType: 'js'ao converter não-JS. https://vite.dev/guide/api-plugin#hook-filters , https://vite.dev/guide/migration#module-type-support-and-auto-detection - Leia
this.environmentnos hooks em vez da flagssr.hotUpdateé a contraparte ciente de ambiente dehandleHotUpdate, cuja obsolescência está apenas planejada para um futuro major. https://vite.dev/guide/api-environment-plugins#accessing-the-current-environment-in-hooks , https://vite.dev/changes/hotupdate-hook - Middlewares do
configureServerexecutam antes dos do Vite. Retorne uma função para executar depois. https://vite.dev/guide/api-plugin#configureserver - Escreva
import.meta.hot.accept(literalmente dentro deif (import.meta.hot). https://vite.dev/guide/api-hmr#hot-accept-cb - SSR dev:
server.middlewareMode: truemaisappType: 'custom', carregue a entrada comserver.environments.ssr.runner.import()(ssrLoadModuleestá planejado para obsolescência). 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 buildconstrói apenas o cliente.vite build --appconstrói todos os ambientes. https://vite.dev/guide/api-environment-frameworks#environments-during-build
Padrões antigos
| Antigo | Atual |
|---|---|
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() (um noop) | import.meta.hot.invalidate() |
server.ssrLoadModule(url) | environment.runner.import(url) |
handleHotUpdate + server.ws.send | hotUpdate + this.environment.hot.send |
Arquivos de referência
| Arquivo | Leia para |
|---|---|
| references/migration.md | Migração do Vite 7 para 8: opções renomeadas, interop CommonJS, recursos removidos |
| references/config-and-env.md | Config, loadEnv, import.meta.env, modos, base |
| references/code-features.md | TypeScript, JSX, HTML, CSS, assets, import.meta.glob, importações dinâmicas, workers, WebAssembly |
| references/dev-server.md | Host, porta, allowedHosts, CORS, proxy, modo middleware, preview |
| references/dependencies-and-performance.md | Pré-empacotamento, optimizeDeps, pacotes linkados, velocidade de desenvolvimento |
| references/build.md | Alvos, rolldownOptions, chunks, modo biblioteca |
| references/backend-integration-and-deploy.md | Integração com backend, manifesto, hospedagem estática |
| references/ssr.md | Servidor dev SSR, build de produção, externals, plugins |
| references/plugins.md | Hooks de plugin, filtros, módulos virtuais, ordenação |
| references/hmr-and-javascript-api.md | import.meta.hot, eventos personalizados, createServer, build, preview |
| references/environment-api.md | Config environments, this.environment, configEnvironment, estado por ambiente |
| references/environment-frameworks.md | builder.buildApp, ModuleRunner |
Páginas lidas: SOURCES.md.