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.
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
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"), } }, });
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'), },
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!