Vite 8
Vite 8.x, depuis https://vite.dev/guide/. Chaque affirmation se termine par sa page source.
Comment naviguer
- Lisez les règles rapides ci-dessous. Elles permettent d'éviter les erreurs les plus fréquentes.
- Ouvrez le fichier de référence qui correspond à votre tâche, dans le tableau à la fin.
- Pour
rollupOptions,esbuildoumanualChunks, lisez d'abordreferences/migration.md.
Démarrage rapide
// vite.config.ts
import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd(), '') // les fichiers .env ne sont pas dans process.env ici
return {
plugins: [react()],
server: { port: Number(env.PORT ?? 5173), strictPort: true },
build: {
rolldownOptions: { output: { /* Options Rolldown, pas Rollup */ } },
},
}
})
{ "compilerOptions": { "types": ["vite/client"], "isolatedModules": true } }
- Node.js 20.19+ ou 22.12+. Initialisez un projet avec
npm create vite@latest my-app -- --template react-ts. https://vite.dev/guide/ - Scripts :
vite(développement, port 5173),vite build,vite preview(port 4173, vérification locale uniquement, jamais un serveur de production). https://vite.dev/guide/cli , https://vite.dev/config/preview-options - Vite ne vérifie jamais les types. Lancez
tsc --noEmiten parallèle. https://vite.dev/guide/features#transpile-only
Règles rapides
Chaîne d'outillage et configuration
- Rolldown regroupe les builds et pré-regroupe les dépendances. Oxc transforme et minifie le JS, Lightning CSS minifie le 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
- Utilisez
build.rolldownOptions,worker.rolldownOptions,optimizeDeps.rolldownOptionsetoxc. Les clésrollupOptions,esbuildOptionsetesbuildsont dépréciées. https://vite.dev/guide/migration#other-related-deprecations , https://vite.dev/guide/migration#javascript-transforms-by-oxc - Déclarez les points d'entrée avec l'option de premier niveau
input. C'est la valeur par défaut pourbuild.rolldownOptions.input,build.lib.entryetoptimizeDeps.entries. https://vite.dev/config/shared-options#input - Le découpage en morceaux passe par
build.rolldownOptions.output.codeSplitting, pas parmanualChunks. https://vite.dev/guide/build#chunking-strategy - La cible
tsconfigest ignorée : définissezbuild.target(par défaut'baseline-widely-available'). Vite n'ajoute aucun polyfill, utilisez@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 ne peut pas transpiler les décorateurs natifs ni obscurcir les propriétés. Ajoutez Babel ou SWC en filtrant les fichiers contenant
@. https://vite.dev/guide/migration#javascript-transforms-by-oxc , https://vite.dev/guide/migration#javascript-minification-by-oxc - Une importation par défaut depuis CommonJS peut désormais renvoyer la totalité de
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 d'environnement et modes
- Seules les variables
VITE_atteignent le code client, toujours sous forme de chaînes, intégrées dans le bundle. N'y placez jamais de secrets et ne définissez jamaisenvPrefix: ''. https://vite.dev/guide/env-and-mode#env-variables , https://vite.dev/config/shared-options#envprefix - Les fichiers
.envsont chargés après l'exécution de la configuration. Dansvite.config, utilisezloadEnv(mode, root, ''). https://vite.dev/config/#using-environment-variables-in-config - Les variables shell ont priorité sur les fichiers
.env. Les modifications des fichiers.envnécessitent un redémarrage. https://vite.dev/guide/env-and-mode#env-files --modeetNODE_ENVsont indépendants :vite build --mode stagingreste une build de production. https://vite.dev/guide/env-and-mode#node-env-and-modes- Écrivez
import.meta.env.BASE_URLlittéralement, la forme entre crochets n'est pas remplacée. https://vite.dev/guide/build#public-base-path
Serveur de développement
- Ne définissez jamais
server.allowedHosts: trueouserver.cors: true: n'importe quel site web pourrait lire votre source. https://vite.dev/config/server-options#server-allowedhosts , https://vite.dev/config/server-options#server-cors - Un port occupé passe silencieusement au suivant sauf si
strictPort: true. https://vite.dev/config/server-options#server-port - Les paramètres WebSocket se trouvent dans
server.ws.server.hmrne conserve queboolean | { overlay }. https://vite.dev/config/server-options#server-hmr - Après
npm linkou la modification d'une dépendance liée, redémarrez avecvite --force. https://vite.dev/guide/troubleshooting#outdated-pre-bundled-deps-when-linking-to-a-local-package - Un rechargement complet au lieu du HMR peut provenir d'une dépendance circulaire (
vite --debug hmr). https://vite.dev/guide/troubleshooting#a-full-reload-happens-instead-of-hmr
Build et déploiement
- Servez le HTML avec
Cache-Control: no-cacheet rechargez en cas d'erreurvite:preloadError, sinon les anciennes pages se brisent après un déploiement. https://vite.dev/guide/build#load-error-handling - Les arguments de
import.meta.globdoivent être des littéraux. Unimport()dynamique doit commencer par./,../ou#et se terminer par une extension de fichier :import(`./dir/${name}.js`). https://vite.dev/guide/features#glob-import-caveats , https://vite.dev/guide/features#dynamic-import - CSS sous forme de chaîne :
import css from './a.css?inline'. Les importations par défaut de.cssont disparu. https://vite.dev/guide/features#disabling-css-injection-into-the-page - Le mode bibliothèque remplace statiquement
import.meta.env.*mais laisseprocess.env.*intact. https://vite.dev/guide/build#library-mode
Plugins, HMR, SSR
- Utilisez les filtres de hook,
transform: { filter: { id: /\\.ext$/ }, handler }, et renvoyezmoduleType: 'js'lors de la conversion de fichiers non-JS. https://vite.dev/guide/api-plugin#hook-filters , https://vite.dev/guide/migration#module-type-support-and-auto-detection - Lisez
this.environmentdans les hooks plutôt que l'optionssr.hotUpdateest l'équivalent sensible à l'environnement dehandleHotUpdate, dont la déprédation est seulement prévue pour une future version majeure. https://vite.dev/guide/api-environment-plugins#accessing-the-current-environment-in-hooks , https://vite.dev/changes/hotupdate-hook - Les middlewares
configureServers'exécutent avant ceux de Vite. Renvoyez une fonction pour qu'elle s'exécute après. https://vite.dev/guide/api-plugin#configureserver - Écrivez
import.meta.hot.accept(littéralement à l'intérieur deif (import.meta.hot). https://vite.dev/guide/api-hmr#hot-accept-cb - SSR en développement :
server.middlewareMode: trueplusappType: 'custom', chargez le point d'entrée avecserver.environments.ssr.runner.import()(ssrLoadModuleest prévue pour déprédation). 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 buildconstruit seulement le client.vite build --appconstruit tous les environnements. https://vite.dev/guide/api-environment-frameworks#environments-during-build
Anciens motifs
| Ancien | Actuel |
|---|---|
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() (un noop) | import.meta.hot.invalidate() |
server.ssrLoadModule(url) | environment.runner.import(url) |
handleHotUpdate + server.ws.send | hotUpdate + this.environment.hot.send |
Fichiers de référence
| Fichier | Lire pour |
|---|---|
| references/migration.md | Migration de Vite 7 à 8 : options renommées, interopérabilité CommonJS, fonctionnalités supprimées |
| references/config-and-env.md | Configuration, loadEnv, import.meta.env, modes, base |
| references/code-features.md | TypeScript, JSX, HTML, CSS, assets, import.meta.glob, importations dynamiques, workers, WebAssembly |
| references/dev-server.md | Hôte, port, allowedHosts, CORS, proxy, mode middleware, preview |
| references/dependencies-and-performance.md | Pré-regroupement, optimizeDeps, paquets liés, vitesse de développement |
| references/build.md | Cibles, rolldownOptions, morceaux, mode bibliothèque |
| references/backend-integration-and-deploy.md | Intégration backend, manifeste, hébergement statique |
| references/ssr.md | Serveur de développement SSR, build de production, external dependencies, plugins |
| references/plugins.md | Hooks de plugins, filtres, modules virtuels, ordre |
| references/hmr-and-javascript-api.md | import.meta.hot, événements personnalisés, createServer, build, preview |
| references/environment-api.md | Configuration environments, this.environment, configEnvironment, état par environnement |
| references/environment-frameworks.md | builder.buildApp, ModuleRunner |
Pages lues : SOURCES.md.