Démarrer #

Introduction #

Vite est un outil de construction qui vise à fournir une expérience de développement plus rapide et plus légère pour les projets web modernes. It consists of two major parts:

• Un serveur de développement qui fournit des améliorations de fonctionnalités riches sur les modules ES natifs, par exemple un remplacement de module chaud (HMR) extrêmement rapide.

• Une commande de construction qui regroupe votre code avec Rollup, préconfigurée pour produire des ressources statiques hautement optimisées pour la production.

Vite est indépendant de l'opinion publique et est livré avec des valeurs par défaut raisonnables, mais il est également très extensible grâce à son API de plugin et à son API JavaScript avec une prise en charge complète de la saisie.

Vous pouvez en apprendre davantage sur la raison d'être du projet dans la section Pourquoi Vite.

Support des navigateurs #

La compilation par défaut cible les navigateurs qui prennent en charge native ES Modules, native ESM dynamic import, et import.meta. Les anciens navigateurs peuvent être supportés via le plugin officiel @vitejs/plugin-legacy - voir la section Building for Production pour plus de détails.

Essayer Vite en ligne #

Vous pouvez essayer Vite en ligne sur StackBlitz. Il exécute la configuration de construction basée sur Vite directement dans le navigateur, il est donc presque identique à la configuration locale, mais ne nécessite pas d'installer quoi que ce soit sur votre machine. Vous pouvez naviguer vers vite.new/{template} pour sélectionner le framework à utiliser.

The supported template presets are:

Échafaudage de votre premier projet Vite #

Note de compatibilité

Avec NPM:

$ npm create vite@latest

Avec Yarn:

$ yarn create vite

Avec PNPM:

$ pnpm create vite

Puis suivez les instructions !

Vous pouvez également spécifier directement le nom du projet et le modèle que vous souhaitez utiliser via des options de ligne de commande supplémentaires. Par exemple, pour échafauder un projet Vite + Vue, exécutez :

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

Voir create-vite pour plus de détails sur chaque modèle supporté : vanilla, vanilla-ts, vue, vue-ts, react, react-ts, preact, preact-ts, lit, lit-ts, svelte, svelte-ts.

Modèles communautaires #

create-vite est un outil pour démarrer rapidement un projet à partir d'un modèle de base pour les frameworks populaires. Consultez Awesome Vite pour les community maintained templates qui incluent d'autres outils ou ciblent différents frameworks. Vous pouvez utiliser un outil comme degit pour échafauder votre projet avec l'un des modèles.

npx degit user/project my-project
cd my-project

npm install
npm run dev

Si le projet utilise main comme branche par défaut, suffixez le repo du projet avec #main.

npx degit user/project#main my-project

index.html et la racine du projet #

Une chose que vous avez peut-être remarquée est que dans un projet Vite, index.html est au centre du projet au lieu d'être caché dans public. C'est intentionnel : pendant le développement, Vite est un serveur, et index.html est le point d'entrée de votre application.

Vite traite index.html comme du code source et une partie du graphe des modules. Il résout les <script type="module" src="..."> qui font référence à votre code source JavaScript. Même les <script type="module"> en ligne et les CSS référencés via <link href> bénéficient également de fonctionnalités spécifiques à Vite. De plus, les URLs à l'intérieur de index.html sont automatiquement rebasées de sorte qu'il n'est pas nécessaire d'utiliser des espaces réservés %PUBLIC_URL%.

Similaire aux serveurs http statiques, Vite a le concept d'un "répertoire racine" à partir duquel vos fichiers sont servis. Vous le verrez référencé comme <root> dans le reste de la documentation. Les URLs absolues dans votre code source seront résolues en utilisant la racine du projet comme base, donc vous pouvez écrire du code comme si vous travailliez avec un serveur de fichiers statique normal (sauf qu'il est beaucoup plus puissant !). Vite est également capable de gérer les dépendances qui se résolvent par des emplacements de système de fichiers hors de la racine, ce qui le rend utilisable même dans une configuration basée sur monorepo.

Vite supporte également les applications multi-pages avec plusieurs points d'entrée .html.

Spécifier une racine alternative #

L'exécution de vite démarre le serveur de développement en utilisant le répertoire de travail actuel comme racine. Vous pouvez spécifier une racine alternative avec vite serve some/sub/dir.

Interface de ligne de commande #

Dans un projet où Vite est installé, vous pouvez utiliser le binaire vite dans vos scripts npm, ou le lancer directement avec npx vite. Voici les scripts npm par défaut dans un projet Vite scaffoldé :

{
  "scripts" : {
    "dev" : "vite", // démarrage du serveur de développement, alias : `vite dev', `vite serve'.
    "build" : "vite build", // construire pour la production
    "preview" : "vite preview" // prévisualisation locale du build de production
  }
}

Vous pouvez spécifier des options CLI supplémentaires comme --port ou --https. Pour une liste complète des options CLI, exécutez npx vite --help dans votre projet.

Utiliser les Commits non publiés #

Si vous ne pouvez pas attendre une nouvelle version pour tester les dernières fonctionnalités, vous devrez cloner le vite repo sur votre machine locale, puis le compiler et le lier vous-même (pnpm est nécessaire) :

git clone https://github.com/vitejs/vite.git
cd vite
pnpm install
cd packages/vite
pnpm run build
pnpm link --global # vous pouvez utiliser votre gestionnaire de paquets préféré pour cette étape

Ensuite, allez dans votre projet basé sur Vite et lancez pnpm link --global vite (ou le gestionnaire de paquets que vous avez utilisé pour lier vite globalement). Maintenant, redémarrez le serveur de développement pour être à la pointe du progrès !

Communauté #

Si vous avez des questions ou besoin d'aide, contactez la communauté sur Discord et Discussions GitHub.