Comment configurer l'alias de chemin Vite + React

Pourquoi des alias de chemin ?

Les alias de chemin dans Vite nous permettent d'utiliser des chemins personnalisés vers notre répertoire de projet lors de l'importation de nos modules.
⁠Disons que nous travaillons sur un projet React, dans notre composant cartes, nous souhaitons importer environ trois composants différents pour construire notre carte. Disons un bouton, un en-tête, une image.

Nous pouvons l'écrire comme ceci

import Button from '../../components/Button'
import Header from '../../components/ui/Header'
import Image from '../../components/Image'

⁠
Cela semble bien pour le moment, mais pensez au moment où nous voulons refactoriser ou améliorer notre composant et devons importer environ 5 ou 6 composants supplémentaires. Ensuite, ça commence à devenir compliqué.

import Button from '../../components/Button'
import Header from '../../components/ui/Header'
import Image from '../../components/Image'
import Panel from "../../components/Dashboard/Panel";
import Input from "../../components/Forms/Input";
import Submit from "../../components/Forms/Submit"

C'est là que les importations de chemin deviennent utiles, elles rendent nos déclarations d'importation plus propres et plus gérables. Avec Path Alias, ce que nous avons ci-dessus devient

import Button from '@/src/components/Button'
import Header from '@/src/components/ui/Header'
import Image from '@/src/components/Image'

Pour ceux qui n'utilisent pas l'importation automatique, vous n'avez pas besoin de vous rappeler à quelle distance se trouve le répertoire du composant sur lequel vous travaillez. Cela simplifie simplement l'organisation du code lorsque vous devez déplacer des fichiers ou refactoriser la structure de votre projet, vous n'aurez pas à mettre à jour de nombreux chemins d'importation relatifs dans votre base de code

Ajout d'un alias de chemin à votre projet

Tout d'abord, vous devez installer React + Vite
⁠pnpm créer vite setup-path-alias --template réagir
Ensuite, vous irez dans le répertoire du projet que vous venez de créer puis exécuterez

cd setup-path-alias                                                                                                                                         pnpm install 
pnpm run dev    

Remarque : J'ai utilisé le raccourci pour créer l'application Vite avec le modèle, vous pouvez utiliser toute autre méthode que vous préférez. Donc, tant que vous créez l'application. J'ai aussi utilisé pnpm mais vous pouvez utiliser votre gestionnaire de paquets préféré (npm, fil, chignon....).

Une fois cette opération terminée, le répertoire du projet Vite ressemble à ceci
⁠├── publique
├──src/
│ └── composants/
│ └── HelloWorld.jsx
├── .gitignore
├── index.html
├── package.json
├── LISEZMOI.md
└── vite.config.js

⁠Maintenant, allez dans le fichier vite.config.js, voici à quoi devrait ressembler le fichier par défaut

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

Ensuite, nous installerons le module Path, nous l'utilisons pour utiliser la méthode path.resolve(), qui permet de créer des chemins absolus.

pnpm je chemin

Ensuite, nous allons résoudre l'alias du chemin dans notre fichier vite.config.js et le résultat devrait ressembler à ceci

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    }
  },
});

Configuration de VS Code IntelliSense

Pour vous assurer que VS Code reconnaît vos alias, créez ou mettez à jour jsconfig.json à la racine de votre projet :

{
    "compilerOptions": {
      "paths": {
        "@/*": [
          "./src/*"
        ]
      }
    }
  }

Ensuite, nous pouvons mettre à jour nos importations depuis

import Button from '../../components/Button'
//to this
⁠import Button from '@/src/components/Button'

Notez que nous pouvons créer un alias de chemin comme celui-ci et résoudre autant de chemins que nous le souhaitons, puis mettre à jour notre intellisense. J'ai laissé le mien plus simple car mon projet est petit et par défaut, le dossier src contient tous les fichiers du projet, alors je peux simplement le pointer vers src mais lorsque vous utilisez le dossier des composants plusieurs fois dans votre code, vous pouvez simplement l'ajouter à l'alias du chemin pour garder vos importations propres. Là encore, il est conseillé d'éviter l'utilisation excessive des alias : car s'ils peuvent simplifier les importations, leur utilisation excessive peut rendre votre code moins intuitif pour les nouveaux membres de l'équipe. Utilisez des alias pour les répertoires courants et fréquemment consultés.

⁠    alias: {
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components'),
  },

Problèmes potentiels et comment les éviter

1. Dépendances circulaires : soyez prudent lorsque vous utilisez des alias pour éviter de créer des dépendances circulaires. Structurez toujours vos importations de manière à maintenir une hiérarchie claire.
2. Surutilisation des alias : même si les alias peuvent simplifier les importations, leur utilisation excessive peut rendre votre code moins intuitif pour les nouveaux membres de l'équipe. Utilisez des alias pour les répertoires courants et fréquemment consultés.
3. Nom incohérent : respectez une convention de dénomination cohérente pour vos alias tout au long du projet. Par exemple, utilisez toujours le préfixe « @ » pour les chemins avec alias.
4. Oublier de mettre à jour jsconfig.json : si vous ajoutez de nouveaux alias dans vite.config.js, n'oubliez pas de mettre également à jour jsconfig.json pour maintenir la prise en charge de l'IDE.
5. Conflits d'alias : assurez-vous que vos noms d'alias n'entrent pas en conflit avec les noms de packages npm ou les paramètres globaux du navigateur pour éviter toute confusion et erreurs potentielles.

Merci d'avoir lu

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!