かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

Vite + React で path alias を使いたい!

前回までのあらすじ

npm create vite コマンドでサクッと Vite + React (TypeScript) のプロジェクトが作れました!
SPA はファイルがたくさんになるので import の際に ../../../ HELL になりがちです。これを回避するためにパスエイリアス(path alias)を設定しておきたいお気持ちに溢れます。

結論: vite-tsconfig-paths を使えば楽ちん

vite-tsconfig-pathsを使えば tsconfig.json にパスエイリアス設定を作成するだけで済む。

$ npm i -D vite-tsconfig-paths

vite.config.ts

import { defineConfig } from 'vite'
+ import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
+ plugins: [tsconfigPaths()],
})

これで tsconfig.json に設定したパスエイリアスの設定が効くようになる


下記経緯

Vite の path alias の設定方法

cf. resolve.alias

  • vite.config.tsresolve.alias の項目を作成してパスエイリアスの設定を作成する
    • resolve.alias: Record<string, string> | Array<{ find: string | RegExp, replacement: string, customResolver?: ResolverFunction | ResolverObject }>
  • 設定は内部的に使われている @rollup/plugin-alias の書き方を参照する
  • TypeScript なプロジェクトの場合は tsconfig.json にも同様の設定をする必要がある

e.g. @/src/~/public/ にアクセスできるようにする

1. vite.config.tsresolve.alias を作成

vite.config.ts

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

export default defineConfig({
+ resolve: {
+   alias: {
+     '@/': `${__dirname}/src/`,
+     '~/': `${__dirname}/public/`
+   },
+ },
  plugins: [react()],
});

[{ find: 'エイリアス', replacement: '変換するパス' }] で書くなら下記のような感じ

export default defineConfig({
+ resolve: {
+   alias: [
+     { find: '@/', replacement: `${__dirname}/src/` },
+     { find: '~/', replacement: `${__dirname}/public/`},
+   ],
+ },
  plugins: [react()],
});
resolve.alias は変換するパスが / で終わってないと正しくエイリアスとして動作しない。
  • 🙅 NG `${__dirname}/src`, path.join(__dirname, 'src')
  • 🙆 OK `${__dirname}/src/`, path.join(__dirname, 'src/')

最後が / で終わってないと次のようなエラーになる
Failed to resolve import "@/App.module.css" from "src/App.tsx". Does the file exist?
パス末の / が原因だと分からなくて時間とかした… (ᐡ •̥ ̫ •̥ ᐡ)

cf. <2022/02更新>vite+TypeScriptでalias pathを~に設定する

2. __dirname が TS のエラー Cannot find name '__dirname'.ts(2304) になるので修正する

node の型が入ってないのが原因。Vite で作ったプロジェクトにはデフォルトでは含まれてないっぽい。

$ npm i -D @types/node

tsconfig.json

{
  "compilerOptions": {
+   "types": ["node"],
    // …

cf. node.js - TSC cannot find name of Global Object - Stack Overflow

3. tsconfig.json にパスエイリアスの設定を追加

tsconfig.json

{
  "compilerOptions": {
    // …
+   "paths": {
+     "@/*": ["src/*"],
+     "~/*": ["public/*"]
+   },
    // …

これで tsx 内の import を @/~/ に変更して npm run dev をして問題なく動作していれば OK ₍ ᐢ. ̫ .ᐢ ₎👌

🌟 vite-tsconfig-paths を使う方法 (個人的オススメ!)

vite-tsconfig-pathsを使えば vite.config.ts に alias の設定を書く必要がなくなりパスエイリアスの設定を tsconfig.json に一元化できる! (@types/node のインストールも不要になる)

インストール

$ npm i -D vite-tsconfig-paths

vite.config.ts

import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
+ import tsconfigPaths from 'vite-tsconfig-paths';

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    open: true,
  },
- plugins: [react()],
+ plugins: [react(), tsconfigPaths()],
});

tsconfig.json

{
  "compilerOptions": {
    // ...
+   "paths": {
+     "@/*": ["src/*"],
+     "~/*": ["public/*"]
+   },
    // …

₍ᐢ •̥ ̫ •̥ ᐢ₎‪ できた!!!!
TSのエラーと戦う必要もなく、パスエイリアスの設定も一元管理できるので vite-tsconfig-paths プラグイン使ってしまうのが良さそうです。


VSCode でパスエイリアスの補完が効くようにする

いつもの。cf. GitHub - KiKiKi-KiKi/ts-react-app: React with TypeScript app template
path-autocomplete.pathMappings に補完させたいパスエイリアスを設定できる。

$ mkdir .vscode
$ touch .vscode/settings.json

今回は @//src 配下のファイルを、~//public 配下のファイルを補完させたいので下記のように設定を追加すればOK

.vscode/settings.json

{
  "path-autocomplete.pathMappings": {
    "@": "${folder}/src",
    "~": "${folder}/public"
  }
}

VSCode@/, ~/ と打った時にパスの保管がサジェストされるようになっていればOK

cf.

所感

随分大きなエントリーになってしまったけど、プラグインを使えば簡単に path alias が設定できました !! チョロいから Vite 好きになってきちゃったな… ぽわぽわ…
おわり ₍ ᐢ. ̫ .ᐢ ₎


[参考]

全然関係ないけど、SPY×FAMILY めちゃ好〜!! 原作の表紙がミッドセンチュリーなチェアで統一されてるのもとても良… 原作買うか!? (本棚の空き場所無いぞ…)