前回までのあらすじ
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.tsにresolve.aliasの項目を作成してパスエイリアスの設定を作成する- resolve.alias:
Record<string, string> | Array<{ find: string | RegExp, replacement: string, customResolver?: ResolverFunction | ResolverObject }>
- resolve.alias:
- 設定は内部的に使われている @rollup/plugin-alias の書き方を参照する
- TypeScript なプロジェクトの場合は
tsconfig.jsonにも同様の設定をする必要がある
e.g. @/ で src/、 ~/ で public/ にアクセスできるようにする
1. vite.config.ts に resolve.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": {
// …
+ "baseUrl": "./",
+ "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": {
// ...
+ "baseUrl": "./",
+ "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 Autocomplete - Visual Studio Marketplace
- 【Visual Studio Code】ファイルパスを補完候補を表示してくれるPath Autocompleteでルートの位置を変える方法 | WEB Drawer
所感
随分大きなエントリーになってしまったけど、プラグインを使えば簡単に path alias が設定できました !!
チョロいから Vite 好きになってきちゃったな… ぽわぽわ…
おわり ₍ ᐢ. ̫ .ᐢ ₎
[参考]
- vite-tsconfig-paths - npm
- Configuring Vite | Vite
- <2022/02更新>vite+TypeScriptでalias pathを~に設定する
- Path Autocomplete - Visual Studio Marketplace
- 【Visual Studio Code】ファイルパスを補完候補を表示してくれるPath Autocompleteでルートの位置を変える方法 | WEB Drawer
全然関係ないけど、SPY×FAMILY めちゃ好〜!! 原作の表紙がミッドセンチュリーなチェアで統一されてるのもとても良… 原作買うか!? (本棚の空き場所無いぞ…)
