Configurer Vite

Adam Fraga | Jan 17, 2025 min read

Vite est un outil moderne et rapide pour le développement d’applications web, axé sur les performances. Dans ce guide, nous allons configurer rapidement un projet de base pour compiler des fichiers JavaScript avec Vite.

Configurer une Configuration de Base avec Vite

Vite fournit une configuration prête à l’emploi pour la compilation de JavaScript, que vous pouvez facilement personnaliser selon vos besoins.

Prérequis

Assurez-vous que Node.js est installé. Vous pouvez vérifier votre installation avec ces commandes :

node -v
npm -v

Ensuite, initialisez le projet avec npm :

npm init -y

Installez Vite en tant que dépendance de développement :

npm install vite --save-dev

Créer la structure du projet

Créez un dossier src pour stocker vos fichiers JavaScript :

mkdir src
touch src/index.js

Dans le fichier index.js, ajoutez le code suivant :

console.log("Hello, Vite !");

Configurer Vite pour compiler le fichier JavaScript

Créez un fichier de configuration Vite nommé vite.config.js à la racine du projet :

import { defineConfig } from 'vite'

export default defineConfig({
  // configuration de base (peut être étendue plus tard)
  root: './src', // où se trouve le point d'entrée
  build: {
    outDir: '../dist', // où les fichiers compilés seront placés
    sourcemap: true, // activer les sourcemaps
  }
})

Demarrer le serveur de développement

npm run dev

Compiler le projet pour la production

npm run build

Conclusion

Ceci est la configuration de base pour commencer à utiliser Vite dans vos projets JavaScript. Vous pouvez personnaliser davantage le processus de construction, ajouter des plugins ou travailler avec divers types d’actifs en fonction de la complexité de votre projet.

Pour des configurations avancées, consultez la documentation officielle de Vite.