Cara Menyediakan Laluan Alias ​​Vite + React

Mengapa Alias ​​Laluan?

Alias ​​Laluan dalam Vite membolehkan kami menggunakan laluan tersuai ke direktori projek kami apabila mengimport modul kami.
Katakan kami sedang mengusahakan projek React, dalam komponen kad kami, kami ingin mengimport kira-kira tiga komponen berbeza untuk membina kad kami. Katakan butang, pengepala, imej.

Kita boleh menulisnya seperti ini

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

⁠
Ia kelihatan baik buat masa ini, tetapi fikirkan bila kita mahu memfaktorkan semula atau menambah baik komponen kita dan perlu mengimport kira-kira 5 atau 6 lagi komponen. Kemudian ia mula menjadi kucar-kacir.

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"

Di situlah import laluan menjadi berguna, ia menjadikan penyata import kami lebih bersih dan lebih mudah diurus. Dengan Path Alias ​​apa yang kita ada di atas menjadi

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

Bagi mereka yang tidak menggunakan import automatik, anda tidak perlu mengingati sejauh mana direktori itu daripada komponen yang sedang anda kerjakan. Ia hanya memudahkan organisasi kod apabila anda perlu memindahkan fail atau memfaktorkan semula struktur projek anda, anda tidak perlu mengemas kini banyak laluan import relatif merentas pangkalan kod anda

Menambah Alias ​​Laluan pada Projek Anda

Pertama sekali, anda perlu memasang React + Vite
⁠pnpm buat vite setup-path-alias --template react
Seterusnya, anda akan pergi ke direktori projek yang baru anda buat kemudian jalankan

cd setup-path-alias                                                                                                                                         pnpm install 
pnpm run dev    

Nota: Saya menggunakan pintasan untuk mencipta apl Vite dengan templat, anda boleh menggunakan kaedah lain yang anda suka. Jadi selagi anda membuat aplikasi. Saya juga menggunakan pnpm tetapi anda boleh menggunakan pengurus pakej pilihan anda (npm, benang, bun....).

Selepas itu selesai, direktori projek Vite kelihatan seperti ini
⁠├── awam
├── src/
│ └── komponen/
│ └── HelloWorld.jsx
├── .giignore
├── index.html
├── package.json
├── README.md
└── vite.config.js

⁠Sekarang pergi ke fail vite.config.js, beginilah rupa fail secara lalai

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

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

Seterusnya, kami akan memasang modul Path, kami menggunakannya untuk menggunakan kaedah path.resolve(), yang membantu mencipta laluan mutlak.

laluan pnpm i

Kemudian kami akan menyelesaikan alias laluan dalam fail vite.config.js kami dan hasilnya akan kelihatan seperti ini

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

Mengkonfigurasi Kod VS IntelliSense

Untuk memastikan Kod VS mengenali alias anda, buat atau kemas kini jsconfig.json dalam akar projek anda:

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

Kemudian kami boleh mengemas kini import kami daripada

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

Perhatikan bahawa kita boleh membuat alias laluan seperti ini, dan menyelesaikan seberapa banyak laluan yang kita mahu, kemudian mengemas kini intellisense kita. Saya meninggalkan saya sendiri yang lebih mudah kerana projek saya kecil dan secara lalai, folder src mengandungi semua fail projek, maka saya hanya boleh menunjukkannya ke src tetapi apabila anda menggunakan folder komponen banyak kali dalam kod anda, anda boleh menambahnya ke alias laluan untuk memastikan import anda bersih. Kemudian sekali lagi adalah dinasihatkan untuk mengelakkan penggunaan alias yang berlebihan: kerana walaupun ia boleh memudahkan import, penggunaan berlebihan boleh menjadikan kod anda kurang intuitif untuk ahli pasukan baharu. Gunakan alias untuk direktori biasa yang kerap diakses.

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

Isu Berpotensi dan Cara Mengelakkannya

1. Kebergantungan Pekeliling: Berhati-hati apabila menggunakan alias untuk mengelak daripada membuat kebergantungan bulat. Sentiasa susunkan import anda dengan cara yang mengekalkan hierarki yang jelas.
2. Terlalu banyak menggunakan Alias: Walaupun alias boleh memudahkan import, terlalu menggunakan alias boleh menjadikan kod anda kurang intuitif untuk ahli pasukan baharu. Gunakan alias untuk direktori biasa yang kerap diakses.
3. Penamaan Tidak Konsisten: Berpegang pada konvensyen penamaan yang konsisten untuk alias anda merentas projek. Contohnya, sentiasa gunakan awalan '@' untuk laluan beralias.
4. Terlupa untuk Kemas Kini jsconfig.json: Jika anda menambah alias baharu dalam vite.config.js, ingat untuk mengemas kini jsconfig.json juga untuk mengekalkan sokongan IDE.
5. Konflik Alias: Pastikan nama alias anda tidak bercanggah dengan nama pakej npm atau penyemak imbas global untuk mengelakkan kekeliruan dan kemungkinan ralat.

Terima kasih kerana membaca

Atas ialah kandungan terperinci Cara Menyediakan Laluan Alias ​​Vite + React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!