Vite+React+Typescriptでimportのパスを必要最低限にする

Viteを使用してReact+Typescriptのプロジェクトの開発をしています。
Typescriptのimportのパスに../のような相対パス指定を指定したくなくて、必要最低限の指定で利用できないものかと考えていました。
ほんのわずかなコードでも、コードが小さければ不具合はそれだけ減らせるからです。

そこでtsconfig.jsonにcompilerOptions.baseUrlの設定をしたものの、Viteはその設定を読んでくれませんでした。
Viteにはvite.config.tsという設定ファイルがあるのでそこに設定をしなければならないようです。

私のプロジェクトでは、アトミックデザインを採用しています。

tsconfig.jsonの例

baseUrlを書くと相対パスの指定がない場合にどこを起点にパスを解決するかを指定できます。
ここでは"src"としています。
pathsという設定もあるのですが、それもViteは読み込まないようです。

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "types": ["vite/client"],
    "allowJs": false,
    "skipLibCheck": false,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "baseUrl": "src"
  },
  "include": ["./src"]
}

vite.config.tsの例

tsconfig.jsonに書いたbaseUrlやpathsはViteは読んでくれません。
そこでvite.config.tsは以下のようにエイリアスを設定します。

import * as path from "path"の部分がエラーになる方は、yarn add @types/node -Dかnpm -i -D @types/nodeを実行してください

import { defineConfig } from "vite"
import reactRefresh from "@vitejs/plugin-react-refresh"
import * as path from "path"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [reactRefresh()],
  resolve: {
    alias: {
      "atoms": path.resolve(__dirname, "src/atoms"),
      "molecules": path.resolve(__dirname, "src/molecules"),
      "organisms": path.resolve(__dirname, "src/organisms"),
      "templates": path.resolve(__dirname, "src/templates"),
      "pages": path.resolve(__dirname, "src/pages")
    }
  }
})

import文はどうなる？

ディレクトリー構成は以下のようになっているとします。

：
├ pages
│　├ index.ts
│　└ HomePage.tsx
├ templates
│　├ index.ts
│　└ MainTemplate.tsx
：

index.tsは以下のようになっているとします。

import MainTemplate from "templates/MainTemplate"

export { MainTemplate }

import文は以下のように指定すれば、必要最低限の指定でコンポーネントを呼び出せます。

import * as React from "react"
import { MainTemplate } from "templates"

export default () => (
  <MainTemplate>
    コンテンツ
  </MainTemplate>
)

注意

• 本プロジェクトで使用しているViteのバージョンは2.1.2です。バージョン1系だと、vite.config.tsの書き方が違う可能性があるのでご注意ください。
• 指定したエイリアス以外のディレクトリーが必要になったときは、vite.config.tsにメンテナンスが必要になりますが、そのようなことが起こることはあまりない前提です。