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 がエイリアスを認識できるようにするには、プロジェクト ルートで 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'), },
読んでいただきありがとうございます
以上がパスエイリアスのセットアップ方法 Vite + Reactの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。