Aller au contenu principal

Découvrir Vite

Notions théoriques​

Qu'est-ce que Vite ?​

Vite est un outil de build pour le développement Web. Ce n'est pas un framework comme Svelte ou React : c'est l'outil qui vous permet de :

  • démarrer un serveur de développement local en quelques secondes
  • recharger automatiquement la page quand vous modifiez votre code
  • préparer votre projet pour la mise en ligne (build de production)
info

Vite (prononcé "vite" comme en français) a été créé par Evan You, le créateur de Vue.js. Son nom reflète sa principale qualité : la rapidité.

Pourquoi Vite est-il rapide ?​

Les outils traditionnels comme Webpack recompilent tout le projet à chaque modification. Vite utilise une approche différente :

  • En développement, il sert les fichiers directement comme des ES Modules natifs du navigateur — pas de compilation globale.
  • Seul le module modifié est rechargé grâce au HMR (Hot Module Replacement).
FonctionnalitéViteWebpack
Démarrage du serveurInstantanéLent (compilation initiale)
Rechargement à chaudInstantané (HMR)Peut être lent
ConfigurationMinimaleSouvent complexe
ES Modules natifsOuiNon (transformé)

Structure d'un projet Vite​

Après avoir créé un projet Vite (vanilla JavaScript), voici les fichiers générés :

mon-projet/
├── index.html         ← Point d'entrée du projet
├── package.json       ← Dépendances et scripts npm
├── vite.config.js     ← Configuration Vite (optionnel)
├── public/            ← Fichiers statiques (images, icônes)
└── src/
    ├── main.js        ← Code JavaScript principal
    ├── style.css      ← Styles CSS
    └── counter.js     ← Exemple de module JS
Rôle de index.html

Contrairement à d'autres outils, index.html est le point d'entrée principal dans Vite. C'est lui qui charge votre script via <script type="module" src="/src/main.js">.

Créer un projet Vite​

La commande pour créer un projet Vite est :

npm create vite@latest mon-projet

Vite vous pose deux questions :

  1. Quel framework ? → choisir Vanilla (sans framework)
  2. Quel langage ? → choisir JavaScript

Ensuite :

cd mon-projet
npm install
npm run dev

Le serveur de développement démarre sur http://localhost:5173.

Les commandes npm essentielles​

CommandeRôle
npm run devDémarrer le serveur de développement
npm run buildGénérer les fichiers de production dans dist/
npm run previewPrévisualiser le build de production localement

Exemple pratique​

Après avoir créé un projet Vite vanilla, ouvrez src/main.js. Par défaut, ce fichier ressemble à :

import './style.css'
import javascriptLogo from './javascript.svg'
import { setupCounter } from './counter.js'

document.querySelector('#app').innerHTML = `
  <div>
    <h1>Hello Vite!</h1>
    <p>Modifiez <code>src/main.js</code> et enregistrez pour tester le HMR.</p>
  </div>
`

setupCounter(document.querySelector('#counter'))

Modifiez le message affiché :

import './style.css'

document.querySelector('#app').innerHTML = `
  <div>
    <h1>Bienvenue sur mon premier projet Vite !</h1>
    <p>Le rechargement à chaud fonctionne automatiquement.</p>
  </div>
`

Dès que vous enregistrez le fichier, la page se met à jour sans recharger — c'est le HMR en action.

astuce

Observez la console du navigateur (F12) : Vite affiche le temps de rechargement en millisecondes.

Test de mémorisation/compréhension​


Vite est un…


Que signifie HMR ?


Quelle commande démarre le serveur de développement Vite ?


Sur quel port le serveur Vite démarre-t-il par défaut ?


Dans quel dossier Vite place-t-il les fichiers de production ?


Quel est le point d'entrée principal d'un projet Vite ?


TP pour réfléchir et résoudre des problèmes​

Dans ce TP, vous allez créer votre premier projet Vite en JavaScript pur et y ajouter une interaction simple.

Étape 1 — Créer le projet Vite​

Dans votre terminal, exécutez :

npm create vite@latest tp-vitejs

Choisissez :

  • Framework : Vanilla
  • Variant : JavaScript

Puis lancez le projet :

cd tp-vitejs
npm install
npm run dev

Ouvrez http://localhost:5173 dans votre navigateur et observez le projet par défaut.


Bonne pratique - Toujours faire npm install après la création

La commande npm create vite@latest génère les fichiers du projet mais ne télécharge pas les dépendances. Sans npm install, le dossier node_modules n'existe pas et npm run dev échoue avec une erreur.

Étape 2 — Modifier la page d'accueil​

Ouvrez src/main.js et remplacez tout son contenu par le code suivant, en complétant la ligne manquante :


Bonne pratique - Template literals pour le HTML

Les backticks ` permettent d'écrire du HTML sur plusieurs lignes sans concaténation de chaînes. C'est la syntaxe recommandée pour injecter du HTML dynamiquement depuis JavaScript.

Étape 3 — Ajouter un bouton interactif​

Ajoutez un bouton qui change le titre au clic. Complétez src/main.js avec la ligne d'écouteur d'événement :


Bonne pratique - Sélectionner les éléments par leur id

Donnez des id explicites à vos éléments HTML interactifs (#titre, #btn). querySelector('#monId') cible un élément unique et rend le code lisible. Évitez de sélectionner par balise (querySelector('button')) quand plusieurs boutons peuvent exister sur la page.

Étape 4 — Générer le build de production​


Bonne pratique - Tester le build avant déploiement

Utilisez npm run preview pour tester localement la version de production avant de la mettre en ligne. Cela révèle parfois des différences entre le mode développement et le mode production (chemins d'assets, variables d'environnement).

📌 Une solution