👽

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

2022/01/31に公開

TypeScript

Vite

tech

vite v2.7.13 で確認

npm init vite or yarn create viteでtsの環境を作成していることが前提
(ここではreact-tsを選択)

tsconfig.jsonとvite.config.tsそれぞれに以下を追加

// tsconfig.json
{
  "compilerOptions": {
    // 略
    // ↓ 2つ追記
    "baseUrl": "./src",
    "paths": {
      "~/*": [
        "./*"
      ]
    }
  },
  // ↓ 追記
  "include": [
    "**/*.ts",
    "**/*.tsx"
  ]
}

// vite.config.ts
import react from "@vitejs/plugin-react"
import path from "path"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [react()],
  resolve: {
    // ↓ 追記
    alias: {
      "~/": `${__dirname}/src/`, // path.join(__dirname, "src/") でも可
    },
    // alias: [
    //   { find: "~/", replacement: `${__dirname}/src/` }
    // ],
  },
})

とりあえずこれで動きます
resolve.aliasは書き方が2つありますが、findとreplacementを指定する方ではfindに正規表現を指定することができるようです。基本的にオブジェクトの書き方で大丈夫でしょう。
注意すべきなのは、resolve.aliasのvalue(replacement)に指定するstringの末尾に/がないと動かないので注意

公式ドキュメントに詳しいこと書かれてないし、vite aliasとかでググっても全く参考になる情報がなかったので同じように困っている人の役に立てば幸いです

2022/02/09 追記

vite-tsconfig-pathsというviteのプラグインを見つけました。
こちらを使用すればvite.config.tsのresolve.aliasを書かずにすみそうですが、こちらは未検証になります。ご参考までに

2022/02/09 追記

Discussion