【React + Vite】import.meta.env.DEVで本番と開発の環境を簡単に切り分ける

概要

React + Viteで開発する中で、本番環境と開発環境で処理を切り替える必要がある。

• 開発環境の場合、APIはモックを使用して後続処理が止まらないようにしたい
• 開発環境であると、画面上でも明示的にしたい

その際に、viteのオブジェクトのimport.meta.envが便利だったので備忘録として記録

import.meta.env

https://ja.vite.dev/guide/env-and-mode
import.meta.envオブジェクトの中にある定数はグローバル定数としてプログラム上で活用できる

import.meta.env.DEV/PROD

npm run xxxで結果が変わる
import.meta.env.DEV：npm run dev の場合trueになる
import.meta.env.PROD：npm run buildの場合trueになる

処理イメージ

//　初期動作時の読み込みだけなのでuseMemo()でメモ化
const isDevelopment = useMemo(() => import.meta.env.DEV, []);
const isProduction = useMemo(() => import.meta.env.PROD ,[],);

{/* npm run devの場合開発モード表示 */}
{isDevelopment && (
<StatusBadge status="dev-mock">
{MessageConst.DEV.MOCK_API_MODE}
</StatusBadge>
)}
{/* npm run buildの場合本番モード表示 */}
{isProduction && (
<StatusBadge status="real-api">
{MessageConst.DEV.REAL_API_MODE}
</

他に条件を設定したいときは.envに書き込む