🐈

【Vite×React】import時のパスエイリアスを設定してみる

2023/02/19に公開

プライベートで開発中のReactアプリケーション。それなりの規模になってきて、そろそろ相対パスでimportするのが辛くなってきた。。

import { PicturesApi } from '../../../api';
import { useApiRequest } from '../../../hooks/useApiRequest';

...

そこで今回は、パスエイリアスを設定してこの辛みから逃れてみます。

手法の調査

まず前提として、今回はVite × Reactでの開発なので、そこで適用できる手法を調べます。大まかには2通りがありそう。

1. vite.config.tsのresolve.alias記述とtsconfig.json設定の組み合わせ

vite.config.tsにresolve.aliasを記述し、それとtsconfig.jsonでのパスエイリアス設定を組み合わせて設定する方法です。

vite.config.ts
export default defineConfig({
+ resolve: {
+   alias: [
+     { find: '@picture-app/', replacement: `${__dirname}/src/` },
+   ],
+ },
  plugins: [react()],
});
tsconfig.json
{
  "compilerOptions": {
+   "baseUrl": "./",
+   "paths": {
+     "@picture-app/*": ["src/*"],
+   },
    ...

この手法での主な注意点は、

  • vite.config.tsのaliasに定義するreplacementは末尾の/までちゃんと書く
  • tsconfig.jsonは末尾の/*をしっかり書く

こと。

vite-tsconfig-pathsとtsconfig.json設定の組み合わせ

2つ目はvite-tsconfig-pathsを利用した設定方法です。まずは該当パッケージをインストール。

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';

export default defineConfig({
- plugins: [react()],
+ plugins: [react(), tsconfigPaths()],
});
tsconfig.json
{
  "compilerOptions": {
+   "baseUrl": "./",
+   "paths": {
+     "@picture-app/*": ["src/*"],
+   },
    ...

こちらの手法だと、パスエイリアスに関する設定記述はtsconfig.jsonの側に一元化することができるので、時間が経つごとにありがたみが増しそう。ということで今回はこちらの手法を選択しました。

おまけ: VSCode でパスエイリアスの補完が効くように

Path Autocompleteの拡張機能を入れつつ、以下のように設定を追加することで補完も効かせられます。

.vscode/settings.json
{
+  "path-autocomplete.pathMappings": {
+    "@picture-app": "${folder}/src",
+  }
...
}

ちなみにこちらは末尾の/を気にしなくてもOK。

https://chaika.hatenablog.com/entry/2022/05/14/083000

https://github.com/KiKiKi-KiKi/ts-react-app#gear-vscode-settings-for-auto-completion-of-path-aliases

Discussion