Closed11
Viteのmodesがビルドにどう影響するか調べる

vite serve --mode=production
などとしてmodesを変えられると書いてあるが、production
, development
以外だとどうなるかいまいちわからない。

-
import.meta.env.PROD
,import.meta.env.DEV
の値はどうなるのか。 - Reactなどはdevelopmentビルドかproductionビルドかで挙動を変える。そこへの影響はどうか。

import.meta.env.PROD
, import.meta.env.DEV
の値はどうなるのか
シンプルに isProduction
を反映するだけらしい。そしてつねに DEV === !PROD

isProduction
の値はここで決まる。
- 環境変数
NODE_ENV
が最優先。 -
VITE_USER_NODE_ENV
は .env ファイルにNODE_ENV
を定義してあると、その値が入ってくる(後述)。 - 最後は
mode
の値を見る。--mode
で指定してあればその値を使うし、未指定ならserve
かbuild
かで自動で決まる。

VITE_USER_NODE_ENV
の出どころ。

mode
の値を決めているところ。
後ろの処理の意味がよくわからんけど、いま大事ではないので深追いはやめておく。

Reactなどはdevelopmentビルドかproductionビルドかで挙動を変える。そこへの影響はどうか。
そういう挙動の切り替えは NODE_ENV
を使うのが慣習なので、ここで調整されている。

結局modesまわりの値はどう決まるか
優先順に。
- 環境変数
NODE_ENV
- .envファイル内の
NODE_ENV
- CLIオプションの
--mode
- vite.configの
mode
- CLIコマンドがserveかbuildか

.env
NODE_ENV=from_dotenv
vite.config.ts
export default {
mode: "from_config",
}
NODE_ENV=from_env vite serve --mode=from_cli
結果
process.env.NODE_ENV === "from_env"
import.meta.env.MODE === "from_cli"
import.meta.env.DEV === true
import.meta.env.PROD === false

.env.staging
NODE_ENV=production
vite serve --mode=staging
結果
process.env.NODE_ENV === "production"
import.meta.env.MODE === "staging"
import.meta.env.DEV === false
import.meta.env.PROD === true

vite serve --mode=staging
結果
process.env.NODE_ENV === "staging"
import.meta.env.MODE === "staging"
import.meta.env.DEV === true
import.meta.env.PROD === false
このスクラップは2023/05/15にクローズされました