パスエイリアスのセットアップ方法 Vite + React

なぜパスエイリアスを使うのか?

Vite のパス エイリアスを使用すると、モジュールをインポートするときにプロジェクト ディレクトリへのカスタム パスを使用できます。
React プロジェクトに取り組んでいるとします。カード コンポーネントで、カードを構築するために 3 つほどの異なるコンポーネントをインポートしたいとします。ボタン、ヘッダー、画像としましょう。

このように書くことができます

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"

ここでパス インポートが役立ちます。パス インポートを使用すると、インポート ステートメントがよりクリーンで管理しやすくなります。 Path Alias を使用すると、上記のものは
になります。

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 反応
次に、作成したばかりのプロジェクト ディレクトリに移動し、
を実行します。

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 i パス

次に、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 に新しいエイリアスを追加する場合は、IDE サポートを維持するために jsconfig.json も更新することを忘れないでください。
5. エイリアスの競合: 混乱や潜在的なエラーを避けるために、エイリアス名が npm パッケージ名またはブラウザーのグローバルと競合しないようにしてください。

読んでいただきありがとうございます

以上がパスエイリアスのセットアップ方法 Vite + Reactの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。