Démarrer #

Vue d’ensemble #

Vite (prononcé comme en français) est un outil de compilation qui vise à proposer une expérience de développement plus rapide et légère pour les projets web modernes. Il se découpe en deux grandes parties :

• Un serveur de développement qui propose de nombreuses fonctionnalités à travers les modules ES natifs, y compris un rafraîchissement des modules à la volée (HMR) ultra rapide.

• Une commande de compilation qui bundle votre code à l’aide de Rollup, qui est pré-configuré pour optimiser grandement la taille des ressources statiques en production.

Vite est « opinionated » et propose certains comportements par défaut qui conviendront dans la plupart des cas, et il est aussi possible de l’étendre grâce à son API pour plugin et son API JavaScript.

Vous pouvez en apprendre plus sur les raisons qui motivent le projet sur la page Pourquoi utiliser Vite ?.

Support navigateur #

• La configuration par défaut cible les navigateurs qui supportent à la fois les modules ES natifs à travers les balises script et l’import dynamique de modules ES natifs. Les navigateurs antérieurs peuvent être supportés à l’aide du plugin officiel @vitejs/plugin-legacy — voir la page Compilation en production pour plus de détails.

Essayer Vite en ligne #

Vous pouvez essayer Vite en ligne sur StackBlitz. Le site exécute une configuration de compilation basée sur Vite directement dans le navigateur, alors l’expérience est quasiment la même qu’en local, sans avoir besoin d’installer quoi que ce soit sur votre machine. Vous pouvez naviguer sur vite.new/{template} pour utiliser un framework.

Les templates supportés sont :

Démarrer votre premier projet Vite #

Avec NPM :

$ npm create vite@latest

Avec Yarn :

$ yarn create vite

Avec PNPM :

$ pnpm create vite

Et suivez les instructions (en anglais) !

Vous pouvez également spécifier directement le nom du projet et le template que vous souhaitez utiliser avec des options de commande supplémentaires. Par exemple, pour démarrer un projet Vite + Vue, lancez :

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

# pour npm à partir de la v7, un double-tiret supplémentaire est nécessaire :
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 template supporté : vanilla, vanilla-ts, vue, vue-ts, react, react-ts, preact, preact-ts, lit, lit-ts, svelte, svelte-ts.

Templates de la communauté #

create-vite est un outil qui vous permet de démarrer un projet rapidement à partir d’un template basique pour les frameworks les plus populaires. Allez voir du côté d’Awesome Vite si vous cherchez des templates de la communauté qui incluent d’autres outils ou qui visent d’autres frameworks. Vous pouvez utiliser un outil comme degit pour démarrer votre projet avec l’un des templates.

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

npm install
npm run dev

Si le projet utilise la branche main comme branche par défaut, ajoutez #main au nom du dépôt

npx degit user/project#main my-project

index.html et racine du projet #

Vous l’aurez peut-être remarqué, dans un projet Vite, index.html est au premier plan au lieu d’être caché au fin fond de public. C’est intentionnel : pendant le développement Vite est un serveur, et index.html est le point d’entrée vers votre application.

Vite traite index.html comme du code source et comme faisant partie intégrante du graphe de modules. Il résout les <script type="module" src="..."> qui renvoient vers votre code source JavaScript. Même les <script type="module"> contenant directement du code et le CSS référencé à l’aide de <link href> profitent de fonctionnalités de Vite. Ajoutons que les URLs dans index.html voient leur base automatiquement réécrite, ce qui évite de devoir utiliser des placeholders du type %PUBLIC_URL%.

À la manière des serveurs HTTP statiques, Vite a une notion de « dossier racine » d’où sont servis vos fichiers. Nous le désignerons par <racine> dans le reste de cette documentation. Les URLs absolues de votre code source seront résolues en utilisant la racine du projet comme base, alors vous pouvez écrire votre code comme si vous utilisiez un serveur de fichier statique normal (mais en bien plus puissant !). Vite est aussi capable de manipuler des dépendances situées hors de la racine, ce qui le rend utilisable même dans une configuration monorepo.

Vite supporte aussi les applications multi-page comportant plusieurs points d’entrée .html.

Spécifier une autre racine #

Lancer vite démarrera le serveur de développement en utilisant le dossier actuel comme racine. Vous pouvez spécifier une autre racine à l’aide de vite serve un/sous/dossier.

Interface en ligne de commande #

Dans un projet dans lequel Vite est installé, vous pouvez utiliser le binaire vite dans vos scrpits npm, ou le lancer directement avec npx vite. Les scripts de base d’une application Vite ressemblent à ça :

{
  "scripts": {
    "dev": "vite", // démarre le serveur de développement
                   // alias : `vite dev`, `vite serve`
    "build": "vite build",    // effectue la compilation de production
    "preview": "vite preview" // prévisualise la compilation de production
                              // en local
  }
}

Des options de ligne de commande supplémentaires comme --port ou --https sont disponibles. Vous pouvez en voir la liste en lançant npx vite --help dans votre projet.

Utiliser des commits inédits #

Si vous voulez tester les dernières fonctionnalités sans attendre de nouvelle version, vous devrez cloner le dépôt vite sur votre machine, le compiler et le lier (link) vous-même (pnpm doit être installé) :

git clone https://github.com/vitejs/vite.git
cd vite
pnpm install
cd packages/vite
pnpm run build
pnpm link --global # ici vous pouvez utiliser le gestionnaire de paquets de
                   # votre choix

Ensuite allez dans votre projet basé sur Vite et lancez pnpm link --global vite (ou bien le gestionnaire de paquets que vous avez utilisé pour lier vite globalement). Vous pouvez maintenant redémarrer le serveur de développement pour être à la pointe !

Communauté #

Si vous avez une question ou si vous avez besoin d’aide, la communauté est à votre disposition sur Discord et dans l’onglet Discussions de GitHub.