😺
Tauri(React + TypeScript)でエイリアスを設定する
これはなに
Tauriのプロジェクトでエイリアスを設定する方法のメモ。
TauriのフロントエンドはReact + TypeScript、バックエンドはRust。Webpackは利用していない。
方法
tsconfig.jsonとvite.config.tsにエイリアスを設定すれば利用できるようになる。下記に、@を./srcのエイリアスとして設定する方法を示す。
1. tsconfig.jsonにエイリアスを設定する
tsconfig.jsonに下記の記述を追加する。
tsconfig.json
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@/*": ["./*"]
},
}
}
React + TypeScriptの環境だけであれば、上記の設定だけでエイリアスを利用できる。
しかし、TauriはビルドツールにViteを利用しているため、これだけだと下記のようなビルドエラーが発生してしまう。
ビルドエラーの例
[plugin:vite:import-analysis] Failed to resolve import "@/contexts/ExampleContext" from "src\App.tsx". Does the file exist?
C:/Users/hoge/Tauri/test-app/src/App.tsx:5:33
19 | import { invoke } from "@tauri-apps/api/tauri";
20 | import { DarkModeProvider } from "@/contexts/ExampleContext";
| ^
21 | import "./App.css";
22 | function App() {
2. vite.config.tsにエイリアスを設定する
Viteがエイリアスを処理できるよう、vite.config.tsに下記の記述を追加する。
vite.config.ts
import { defineConfig } from 'vite';
import path from 'path';
export default defineConfig(async () => ({
// 他の設定
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
}));
上記を追加すると、場合によっては下記のエラーが表示される。
- モジュール 'path' またはそれに対応する型宣言が見つかりません。
- 名前 '__dirname' が見つかりません。
その場合は、下記コマンドで@types/nodeをインストールする。
npm install --save-dev @types/node
以上でエイリアスが動作するようになる。
npm run tauri devを実装して動作を確認する。
Discussion