Vite 8
Vite 8.x, von https://vite.dev/guide/. Jede Behauptung endet mit ihrer Quellseite.
Navigation
- Lesen Sie die Quick Rules unten. Sie fangen die häufigsten Fehler ab.
- Öffnen Sie die eine Referenzdatei, die zur Aufgabe passt, aus der Tabelle am Ende.
- Für
rollupOptions,esbuildodermanualChunkslesen Sie zuerstreferences/migration.md.
Kurzanleitung
// vite.config.ts
import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd(), '') // .env-Dateien sind hier nicht in process.env
return {
plugins: [react()],
server: { port: Number(env.PORT ?? 5173), strictPort: true },
build: {
rolldownOptions: { output: { /* Rolldown-Optionen, nicht Rollup */ } },
},
}
})
{ "compilerOptions": { "types": ["vite/client"], "isolatedModules": true } }
- Node.js 20.19+ oder 22.12+. Erstellen Sie ein Projekt mit
npm create vite@latest my-app -- --template react-ts. https://vite.dev/guide/ - Skripte:
vite(Dev, Port 5173),vite build,vite preview(Port 4173, nur lokale Prüfung, niemals ein Produktionsserver). https://vite.dev/guide/cli , https://vite.dev/config/preview-options - Vite führt niemals Typprüfungen durch. Führen Sie
tsc --noEmitparallel dazu aus. https://vite.dev/guide/features#transpile-only
Quick Rules
Toolchain und Konfiguration
- Rolldown bündelt Builds und vorgebundene Abhängigkeiten. Oxc transformiert und minimiert JS, Lightning CSS minimiert 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
- Verwenden Sie
build.rolldownOptions,worker.rolldownOptions,optimizeDeps.rolldownOptionsundoxc. Die SchlüsselrollupOptions,esbuildOptionsundesbuildsind veraltet. https://vite.dev/guide/migration#other-related-deprecations , https://vite.dev/guide/migration#javascript-transforms-by-oxc - Deklarieren Sie Einstiegspunkte mit der obersten
input-Option. Sie ist der Standard fürbuild.rolldownOptions.input,build.lib.entryundoptimizeDeps.entries. https://vite.dev/config/shared-options#input - Chunking erfolgt über
build.rolldownOptions.output.codeSplitting, nichtmanualChunks. https://vite.dev/guide/build#chunking-strategy - Das
targetintsconfigwird ignoriert: setzen Siebuild.target(Standard'baseline-widely-available'). Vite fügt keine Polyfills hinzu, verwenden Sie@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 kann native Dekorateure nicht herunterstufen oder Eigenschaften verschleiern. Fügen Sie Babel oder SWC hinzu, gefiltert auf Dateien, die
@enthalten. https://vite.dev/guide/migration#javascript-transforms-by-oxc , https://vite.dev/guide/migration#javascript-minification-by-oxc - Ein Standardimport aus CommonJS kann nun das gesamte
module.exportszurückgeben („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
Umgebungsvariablen und Modi
- Nur
VITE_-Variablen erreichen den Client-Code, immer als Zeichenketten, im Bundle eingebettet. Platzieren Sie niemals Geheimnisse dort und setzen Sie niemalsenvPrefix: ''. https://vite.dev/guide/env-and-mode#env-variables , https://vite.dev/config/shared-options#envprefix .env-Dateien werden geladen, nachdem die Konfiguration ausgeführt wurde. Verwenden Sie invite.configloadEnv(mode, root, ''). https://vite.dev/config/#using-environment-variables-in-config- Shell-Variablen überschreiben
.env-Dateien. Änderungen an.enverfordern einen Neustart. https://vite.dev/guide/env-and-mode#env-files --modeundNODE_ENVsind unabhängig:vite build --mode stagingist dennoch ein Production Build. https://vite.dev/guide/env-and-mode#node-env-and-modes- Schreiben Sie
import.meta.env.BASE_URLwörtlich, die Klammerform wird nicht ersetzt. https://vite.dev/guide/build#public-base-path
Dev-Server
- Setzen Sie niemals
server.allowedHosts: trueoderserver.cors: true: jede Website könnte Ihren Quellcode lesen. https://vite.dev/config/server-options#server-allowedhosts , https://vite.dev/config/server-options#server-cors - Ein belegter Port weicht stillschweigend auf den nächsten aus, es sei denn,
strictPort: true. https://vite.dev/config/server-options#server-port - WebSocket-Einstellungen befinden sich in
server.ws.server.hmrbehält nurboolean | { overlay }. https://vite.dev/config/server-options#server-hmr - Nach
npm linkoder dem Bearbeiten einer verlinkten Abhängigkeit starten Sie mitvite --forceneu. https://vite.dev/guide/troubleshooting#outdated-pre-bundled-deps-when-linking-to-a-local-package - Ein vollständiger Neuladen anstelle von HMR kann durch eine zirkuläre Abhängigkeit verursacht werden (
vite --debug hmr). https://vite.dev/guide/troubleshooting#a-full-reload-happens-instead-of-hmr
Build und Deployment
- Servieren Sie HTML mit
Cache-Control: no-cacheund laden Sie beivite:preloadErrorneu, sonst brechen alte Seiten nach einem Deployment. https://vite.dev/guide/build#load-error-handling import.meta.glob-Argumente müssen Literale sein. Ein dynamischerimport()muss mit./,../oder#beginnen und mit einer Dateierweiterung enden:import(`./dir/${name}.js`). https://vite.dev/guide/features#glob-import-caveats , https://vite.dev/guide/features#dynamic-import- CSS als Zeichenkette:
import css from './a.css?inline'. Standardimporte von.csssind verschwunden. https://vite.dev/guide/features#disabling-css-injection-into-the-page - Der Library-Modus ersetzt
import.meta.env.*statisch, lässt aberprocess.env.*unberührt. https://vite.dev/guide/build#library-mode
Plugins, HMR, SSR
- Verwenden Sie Hook-Filter,
transform: { filter: { id: /\\.ext$/ }, handler }, und geben SiemoduleType: 'js'zurück, wenn Sie Nicht-JS konvertieren. https://vite.dev/guide/api-plugin#hook-filters , https://vite.dev/guide/migration#module-type-support-and-auto-detection - Lesen Sie
this.environmentin Hooks anstelle desssr-Flags.hotUpdateist die umgebungsbewusste Entsprechung vonhandleHotUpdate, dessen Veraltung erst für ein zukünftiges Major-Release geplant ist. https://vite.dev/guide/api-environment-plugins#accessing-the-current-environment-in-hooks , https://vite.dev/changes/hotupdate-hook configureServer-Middlewares laufen vor Vite's eigenen. Geben Sie eine Funktion zurück, um danach zu laufen. https://vite.dev/guide/api-plugin#configureserver- Schreiben Sie
import.meta.hot.accept(wörtlich innerhalb vonif (import.meta.hot). https://vite.dev/guide/api-hmr#hot-accept-cb - SSR Dev:
server.middlewareMode: trueplusappType: 'custom', laden Sie den Einstiegspunkt mitserver.environments.ssr.runner.import()(ssrLoadModuleist für die Veraltung vorgesehen). 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 builderstellt nur den Client.vite build --apperstellt jede Umgebung. https://vite.dev/guide/api-environment-frameworks#environments-during-build
Alte Patterns
| Alt | Aktuell |
|---|---|
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() (ein Noop) | import.meta.hot.invalidate() |
server.ssrLoadModule(url) | environment.runner.import(url) |
handleHotUpdate + server.ws.send | hotUpdate + this.environment.hot.send |
Referenzdateien
| Datei | Lesen Sie sie für |
|---|---|
| references/migration.md | Vite 7 zu 8: umbenannte Optionen, CommonJS-Interop, entfernte Funktionen |
| references/config-and-env.md | Konfiguration, loadEnv, import.meta.env, Modi, base |
| references/code-features.md | TypeScript, JSX, HTML, CSS, Assets, import.meta.glob, dynamische Importe, Workers, WebAssembly |
| references/dev-server.md | Host, Port, allowedHosts, CORS, Proxy, Middleware-Modus, Preview |
| references/dependencies-and-performance.md | Vorab-Bündelung, optimizeDeps, verlinkte Pakete, Entwicklungsgeschwindigkeit |
| references/build.md | Targets, rolldownOptions, Chunks, Library-Modus |
| references/backend-integration-and-deploy.md | Backend-Integration, Manifest, statisches Hosting |
| references/ssr.md | SSR-Dev-Server, Production Build, Externals, Plugins |
| references/plugins.md | Plugin-Hooks, Filter, virtuelle Module, Reihenfolge |
| references/hmr-and-javascript-api.md | import.meta.hot, benutzerdefinierte Events, createServer, build, preview |
| references/environment-api.md | environments-Konfiguration, this.environment, configEnvironment, umgebungsspezifischer Zustand |
| references/environment-frameworks.md | builder.buildApp, ModuleRunner |
Gelesene Seiten: SOURCES.md.