如何設定路徑別名 Vite + React

為什麼路徑別名？

Vite 中的路徑別名允許我們在匯入模組時使用專案目錄的自訂路徑。
假設我們正在開發一個 React 項目，在我們的卡片元件中，我們想要匯入三個不同的元件來建立我們的卡片。比如說按鈕、標題、圖像。

我們可以這樣寫

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

⁠
目前看起來不錯，但想想當我們想要重構或改進我們的元件並且必須導入大約 5 或 6 個以上元件時。然後就開始變得混亂。

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"

這就是路徑導入變得有用的地方，它們使我們的導入語句更清晰、更易於管理。使用路徑別名，我們上面的內容就變成了

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

對於那些不使用自動導入的人，您不需要記住目錄與您正在處理的元件有多遠。當您需要移動檔案或重構專案結構時，它只是簡化了程式碼組織，您無需更新程式碼庫中的大量相對導入路徑

為您的專案新增路徑別名

首先需要安裝React + Vite
⁠pnpm create vite setup-path-alias --template react
接下來，您將進入剛剛建立的專案目錄然後執行

cd setup-path-alias                                                                                                                                         pnpm install 
pnpm run dev    

注意：我使用快捷方式使用模板創建Vite應用程序，您可以使用任何您喜歡的其他方法。所以只要你創建應用程式。我也使用了 pnpm，但你可以使用你喜歡的套件管理器（npm、yarn、bun...）。

完成後，Vite專案目錄如下
⁠├── 公
├── src/
│ └── 組件/
│ └──HelloWorld.jsx
├── .gitignore
├──index.html
├── package.json
├── README.md
└── vite.config.js

現在轉到 vite.config.js 文件，這是文件預設的樣子

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

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

接下來，我們將安裝 Path 模組，我們用它來使用 path.resolve() 方法，這有助於建立絕對路徑。

pnpm 我的路徑

然後我們將解析 vite.config.js 檔案中的路徑別名，結果應該如下所示

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

配置 VS Code IntelliSense

為了確保 VS Code 識別您的別名，請在專案根目錄中建立或更新 jsconfig.json：

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

然後我們可以更新我們的導入

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

請注意，我們可以像這樣建立路徑別名，並解析任意數量的路徑，然後更新我們的智慧感知。我留下了自己的更簡單的東西，因為我的項目很小，默認情況下，src文件夾包含所有項目文件，然後我可以將其指向src，但是當您在代碼中多次使用組件文件夾時，您可以新增它路徑別名以保持匯入乾淨。再次建議避免過度使用別名：因為雖然它們可以簡化導入，但過度使用它們會使您的程式碼對於新團隊成員來說不太直觀。對常用、經常被存取的目錄使用別名。

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

潛在問題以及如何避免它們

1. 循環相依：使用別名時要小心，以避免建立循環相依性。始終以保持清晰層次結構的方式建構導入。
2. 別名的過度使用：雖然別名可以簡化導入，但過度使用它們可能會使您的程式碼對於新團隊成員來說不太直觀。對常用、經常被存取的目錄使用別名。
3. 命名不一致：在整個專案中為別名堅持一致的命名約定。例如，始終使用“@”前綴作為別名路徑。
4. 忘記更新 jsconfig.json：如果您在 vite.config.js 中新增別名，請記得更新 jsconfig.json 以維持 IDE 支援。
5. 別名衝突：確保您的別名不會與 npm 套件名稱或瀏覽器全域變數衝突，以避免混淆和潛在錯誤。

感謝您的閱讀

以上是如何設定路徑別名 Vite + React的詳細內容。更多資訊請關注PHP中文網其他相關文章！