📖

Viteで.envファイルのstringをbooleanに変換する

2022/01/12に公開

dotenvで環境変数にtruefalseを記述すると、string型で受け取ってしまうため、以下のように書かないといけない。

if (import.meta.env.VITE_ANY_BOOLEAN === 'false') {
  // falseの時の処理...
}

こう書きたい

if (!import.meta.env.VITE_ANY_BOOLEAN) {
  // falseの時の処理...
}

ViteのPluginで実現可能そうだったので、以下のようにした。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

// envファイルのtrueやfalseをbooleanに変換する
const envStringToBoolean = () => ({
  name: 'env-string-to-boolean',
  configResolved: config => {
    const entries = Object.entries(config.env as Record<string, string>).map(([key, value]) => {
      const target = typeof value === 'string' ? value.toLowerCase() : value
      const results = {
        true: true,
        false: false,
        null: null
      }
      return [key, results[target] === undefined ? value : results[target]]
    })

    config.env = Object.fromEntries(entries)
    return config
  }
})

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), envStringToBoolean()],
  resolve: {
    alias: {
      src: path.join(__dirname, './src'),
      assets: path.join(__dirname, './assets'),
      stream: 'stream-browserify'
    }
  }
})

Discussion