Viteで環境変数を使って可変的なパスのエイリアス設定をする

なぜ可変的にしたいのか？

環境変数変えるだけでimportするファイルを変えたかった

環境変数でパスを切替えたい

以下実装すれば実現できます。

• .envファイル作成
• vite.config.tsから環境変数を読み込む
• vite.config.tsでエイリアス設定
• tsconfigでもエイリアス設定

.envファイル作成

以下のように環境変数を宣言してください。VITEの機能で参照する場合、接頭辞はVITE_である必要があります。vite.config.tsと同じ階層に作成してください。

VITE_APP_FOO='foo'

環境変数を読み込む

直接vite.config.tsからimport.meta.envを参照できないため、viteライブラリからloadEnv関数を読み込みます。

vite.config.tsのloadEnv

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd());

loadEnvで環境変数をenvに読み込み、関数内で自由に参照可能となります。

vite.config.tsでエイリアス設定

env.変数名で使用して可変的なエイリアスを設定することができます。
この手順まででもvite serveの場合は正常に動きますが、tscを行うとcannot find moduleエラーが出るため、後述のtsconfigを修正する必要があります。

vite.config.ts

 return {
    plugins: [react(), htmlPlugin()],
    resolve: {
      alias: {
        "/@FEATURE": path.resolve(__dirname, `src/feature/${env.VITE_APP_FOO}`),
      },
    },
    base: "./"
  };

公式を見る限り、プラグインを使うと高度なことができると記載がありましたが、可変的なパスのエイリアスは見当たらなかったです。
https://ja.vitejs.dev/config/shared-options.html#resolve-alias
https://ja.vitejs.dev/guide/api-plugin.html

tsconfigにエイリアス設定

可変的にしているため、型エラー起きないように固定値でエイリアス設定しています。

    "baseUrl": "./",
    "paths": {
      "/@FEATURE/*": ["./src/feature/foo/*"]
    }

おまけ

viteはindex.htmlから環境変数を読み込む際に正規表現で置き換える処理を行いますが、urlを置き換えたい際は特殊文字使えないので注意です。

const htmlPlugin = () => ({
name: 'html-transform',
transformIndexHtml: (html: string): string =>
html.replace(/%=(.*?)%/g, (match, p1) => env[p1] ?? match),
});

引用元：
https://qiita.com/JotarO_Oyanagi/items/45227341a3465dec58fe

公式：
https://ja.vitejs.dev/guide/api-plugin.html#transformindexhtml

今回のコード全て

https://codesandbox.io/p/sandbox/vite-env-resolve-bnngq0

参考