Boostez votre dev avec les alias Vite

Les alias dans Vite.js sont une fonctionnalité puissante qui vous permet de définir des raccourcis pour les chemins d’importation dans votre projet. Au lieu d’écrire des chemins relatifs longs et parfois déroutants comme import MonComposant from '../../../../components/MonComposant', vous pouvez configurer un alias @ (ou tout autre nom de votre choix) pour pointer vers votre 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 vous restructurez vos dossiers, vous n’aurez qu’à mettre à jour la configuration des alias, pas tous vos 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’oubliez pas d’installer path si ce n’est pas déjà fait (npm install -D @types/node si vous utilisez TypeScript pour avoir les types de Node.js, path est généralement inclus avec Node).

Et pour TypeScript ?

Si vous utilisez TypeScript, vous devrez également mettre à jour votre tsconfig.json pour informer TypeScript de ces alias :

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

Et voilà ! Vous pouvez maintenant profiter d’imports plus propres et d’une meilleure organisation dans vos projets Vite.js.