Booste ton dev avec les alias Vite

Les alias dans Vite.js sont une fonctionnalité puissante qui te permet de définir des raccourcis pour les chemins d’importation dans ton projet. Au lieu d’écrire des chemins relatifs longs et parfois déroutants comme import MonComposant from '../../../../components/MonComposant', tu peux configurer un alias @ (ou tout autre nom de ton choix) pour pointer vers ton répertoire src, et ainsi écrire import MonComposant from '@/components/MonComposant'.

Pourquoi utiliser les alias ?

1. Lisibilité : Des imports plus courts et plus clairs.
2. Maintenabilité : Si tu restructures tes dossiers, tu n’auras qu’à mettre à jour la configuration des alias, pas tous tes imports.
3. Cohérence : Assure une manière uniforme d’importer les modules à travers le projet.

Comment configurer les alias dans vite.config.js (ou .ts) ?

Voici un exemple simple pour configurer un alias @ pointant vers le dossier src :

// vite.config.js
import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  // ... autres configurations
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

N’oublie pas d’installer path si ce n’est pas déjà fait (npm install -D @types/node si tu utilises TypeScript pour avoir les types de Node.js, path est généralement inclus avec Node).

Et pour TypeScript ?

Si tu utilises TypeScript, tu devras également mettre à jour ton tsconfig.json pour informer TypeScript de ces alias :

// tsconfig.json
{
  "compilerOptions": {
    // ... autres options
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

Et voilà ! Tu peux maintenant profiter d’imports plus propres et d’une meilleure organisation dans tes projets Vite.js.