Vite

Vite est un outil de développement moderne pour les projets JavaScript.

Il permet de :

• Lancer un serveur de développement
• Créer des projets rapidement
• Utiliser les modules modernes
• Construire une version de production

Vite est aujourd’hui très populaire dans les projets modernes.

1. Pourquoi utiliser Vite

Avant, plusieurs outils JavaScript étaient lourds et lents.

Vite apporte :

• Un démarrage rapide
• Un rechargement instantané
• Une configuration simple
• Une excellente expérience développeur

2. Créer un projet Vite

Pour créer un nouveau projet :

npm create vite@latest

Vite pose ensuite quelques questions :

• Nom du projet
• Framework
• Type de projet

3. Exemple avec JavaScript vanilla

npm create vite@latest my-project

Ensuite :

cd my-project

npm install

npm run dev

4. Structure de base

my-project/
│
├── node_modules/
├── public/
├── src/
├── index.html
├── package.json
└── vite.config.js

Cette structure est très commune dans les projets modernes.

5. Le dossier src

Le dossier src contient généralement le code principal du projet.

src/
│
├── main.js
├── style.css
└── components/

6. npm run dev

Cette commande démarre le serveur de développement.

npm run dev

Ensuite, Vite affiche une URL locale :

http://localhost:5173

7. Hot Module Replacement (HMR)

Vite recharge automatiquement le navigateur lorsqu’un fichier est modifié.

Cette fonctionnalité s’appelle :

Hot Module Replacement

Cela accélère énormément le développement.

8. Utilisation des modules

Vite fonctionne naturellement avec :

import / export

// math.js

export function add(a, b) {

    return a + b;

}

// main.js

import { add } from "./math.js";

console.log(add(2, 3));

9. npm run build

Cette commande crée une version optimisée du projet.

npm run build

Vite génère alors un dossier :

dist/

10. Le dossier dist

Le dossier dist contient la version de production du projet.

dist/
│
├── assets/
├── index.html
└── fichiers optimisés

11. npm run preview

Cette commande permet de prévisualiser le build de production.

npm run preview

12. vite.config.js

Vite possède un fichier de configuration :

vite.config.js

Ce fichier permet de personnaliser le comportement de Vite.

13. Exemple de configuration

import { defineConfig } from "vite";

export default defineConfig({

    server: {

        port: 3000

    }

});

Ici, le serveur Vite utilisera le port 3000.

14. Vite et les frameworks

Vite fonctionne avec plusieurs frameworks :

• React
• Vue
• Svelte
• Vanilla JavaScript

15. Vite et les projets modernes

Vite est devenu un standard moderne dans l’écosystème JavaScript.

Il est utilisé dans :

• Applications web modernes
• Frameworks frontend
• Tests modernes
• Applications SPA

16. Erreur fréquente

Plusieurs débutants oublient :

npm install

Après avoir créé un projet Vite.

Sans cette commande, les dépendances ne sont pas installées.

17. Bonnes pratiques

• Utiliser le dossier src pour le code principal
• Séparer les responsabilités dans plusieurs fichiers
• Utiliser import/export
• Tester souvent avec npm run dev
• Créer des builds avec npm run build

Résumé rapide