Skip to content

Commit 488007e

Browse files
authored
docs: distinguish the two "env var"s using different words (#1854)
resolve #1839 resolve #1842 vitejs/vite@d173f9e の反映です。
1 parent bc2fc35 commit 488007e

File tree

3 files changed

+41
-38
lines changed

3 files changed

+41
-38
lines changed

config/index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ export default {
6161

6262
## 条件付き設定
6363

64-
設定がコマンド(`serve``build`)、使用されている[モード](/guide/env-and-mode)、SSR ビルドかどうか(`isSsrBuild`)、ビルドのプレビューかどうか(`isPreview`)に基づいて条件付きで設定のオプションを決定する必要がある場合は、代わりに関数をエクスポートできます:
64+
設定がコマンド(`serve``build`)、使用されている[モード](/guide/env-and-mode#modes)、SSR ビルドかどうか(`isSsrBuild`)、ビルドのプレビューかどうか(`isPreview`)に基づいて条件付きで設定のオプションを決定する必要がある場合は、代わりに関数をエクスポートできます:
6565

6666
```js twoslash
6767
import { defineConfig } from 'vite'

guide/env-and-mode.md

Lines changed: 39 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
# 環境変数とモード
22

3-
## 環境変数 {#env-variables}
3+
Vite は特定の定数を特別な `import.meta.env` オブジェクトの下で公開します。この定数は開発中はグローバル変数として定義され、ビルド時にはツリーシェイキングを効果的に行うために静的に置き換えられます。
4+
5+
## ビルトイン定数
46

5-
Vite は環境変数を特別な **`import.meta.env`** オブジェクトに公開しており、これはビルド時に静的に置き換えられます。いくつかのビルトイン変数は全てのケースで利用可能です:
7+
いくつかのビルトイン定数は全てのケースで利用可能です:
68

79
- **`import.meta.env.MODE`**: {string} アプリが動作している[モード](#modes)
810

@@ -14,7 +16,31 @@ Vite は環境変数を特別な **`import.meta.env`** オブジェクトに公
1416

1517
- **`import.meta.env.SSR`**: {boolean} アプリが[サーバー](./ssr.md#conditional-logic)で動作しているかどうか
1618

17-
## `.env` ファイル {#env-files}
19+
## 環境変数 {#env-variables}
20+
21+
Vite は環境変数を `import.meta.env` オブジェクトの下で自動的に文字列として公開します。
22+
23+
環境変数が誤ってクライアントに漏れてしまうことを防ぐために、`VITE_` から始まる変数のみが Vite で処理されたコードに公開されます。例えば、以下の環境変数だと:
24+
25+
```[.env]
26+
VITE_SOME_KEY=123
27+
DB_PASSWORD=foobar
28+
```
29+
30+
`VITE_SOME_KEY` だけが `import.meta.env.VITE_SOME_KEY` としてクライアントソースコードに公開され、`DB_PASSWORD` は公開されません。
31+
32+
```js
33+
console.log(import.meta.env.VITE_SOME_KEY) // "123"
34+
console.log(import.meta.env.DB_PASSWORD) // undefined
35+
```
36+
37+
環境変数のプレフィックスをカスタマイズしたい場合は、[envPrefix](/config/shared-options.html#envprefix) オプションを参照してください。
38+
39+
:::tip env のパース
40+
上に示したように、`VITE_SOME_KEY` は数値ですが、パースすると文字列が返ります。同じことはブール型の環境変数にも起こります。コード内で使用する場合には、必ず目的の型に変換するようにしてください。
41+
:::
42+
43+
### `.env` ファイル {#env-files}
1844
1945
Vite は、[環境ディレクトリー](/config/shared-options.md#envdir)にある以下のファイルから追加の環境変数を読み込むために [dotenv](https://github.com/motdotla/dotenv) を利用します。
2046
@@ -34,27 +60,7 @@ Vite は特定のモードの `.env.[mode]` ファイルに加えて、常に `.
3460
また、Vite の実行時に既に存在している環境変数は最も優先度が高く、`.env` ファイルによって上書きされることはありません。例えば、`VITE_SOME_KEY=123 vite build` を実行する場合。
3561
3662
`.env` は Vite 起動時に読み込まれます。変更した後はサーバーを再起動してください。
37-
:::
3863
39-
読み込まれた環境変数は、`import.meta.env` を経由してクライアントソースコードにも文字列として公開されます。
40-
41-
環境変数が誤ってクライアントに漏れてしまうことを防ぐために、`VITE_` から始まる変数のみが Vite で処理されたコードに公開されます。例えば、以下の環境変数だと:
42-
43-
```[.env]
44-
VITE_SOME_KEY=123
45-
DB_PASSWORD=foobar
46-
```
47-
48-
`VITE_SOME_KEY` だけが `import.meta.env.VITE_SOME_KEY` としてクライアントソースコードに公開され、`DB_PASSWORD` は公開されません。
49-
50-
```js
51-
console.log(import.meta.env.VITE_SOME_KEY) // "123"
52-
console.log(import.meta.env.DB_PASSWORD) // undefined
53-
```
54-
55-
:::tip env のパース
56-
57-
上に示したように、`VITE_SOME_KEY` は数値ですが、パースすると文字列が返ります。同じことはブール型の環境変数にも起こります。コード内で使用する場合には、必ず目的の型に変換するようにしてください。
5864
:::
5965
6066
また、Vite は [dotenv-expand](https://github.com/motdotla/dotenv-expand) を使って、設定不要で env ファイルに書かれた変数を展開できます。構文の詳細については、[ドキュメント](https://github.com/motdotla/dotenv-expand#what-rules-does-the-expansion-engine-follow)を参照してください。
@@ -68,14 +74,13 @@ NEW_KEY2=test\$foo # test$foo
6874
NEW_KEY3=test$KEY # test123
6975
```
7076
71-
環境変数のプレフィックスをカスタマイズしたい場合は、[envPrefix](/config/shared-options.html#envprefix) オプションを参照してください。
72-
7377
:::warning SECURITY NOTES
7478
7579
- `.env.*.local` ファイルはローカル限定で、センシティブな変数を含めることができます。git にチェックインされるのを防ぐために、`.gitignore``*.local` を追加すべきです。
7680
7781
- Vite のソースコードに公開される変数は最終的にクライアントバンドルに入るので、`VITE_*` 変数はセンシティブな情報を*含まない*ようにすべきです。
78-
:::
82+
83+
:::
7984
8085
::: details 変数の逆順展開
8186
@@ -94,7 +99,7 @@ VITE_BAR=bar
9499
95100
:::
96101
97-
### TypeScript 用の自動補完
102+
## TypeScript 用の自動補完
98103
99104
デフォルトで Vite は [`vite/client.d.ts`](https://github.com/vitejs/vite/blob/main/packages/vite/client.d.ts) で `import.meta.env` のための型定義を提供します。`.env.[mode]` ファイルで自前の環境変数を定義できますが、`VITE_` で始まるユーザー定義の環境変数に対する TypeScript の自動補完が欲しくなるかもしれません。
100105
@@ -124,11 +129,12 @@ interface ImportMeta {
124129
:::warning import は型拡張を破壊する
125130
126131
`ImportMetaEnv` の拡張が上手く動かない場合、`import` ステートメントが `vite-env.d.ts` 内に存在しないことを確認してください。詳しい情報については、[TypeScript のドキュメント](https://www.typescriptlang.org/docs/handbook/2/modules.html#how-javascript-modules-are-defined) を参照してください。
132+
127133
:::
128134
129-
## HTML での置換
135+
## HTML での定数の置換
130136
131-
Vite は HTML ファイルでの環境変数の置換もサポートしています`import.meta.env` にあるプロパティは、特別な `%ENV_NAME%` 構文使用して HTML ファイルで使用できます:
137+
Vite は HTML ファイルでの定数の置換もサポートしています`import.meta.env` にあるプロパティは、特別な `%CONST_NAME%` 構文を使用して HTML ファイルで使用できます:
132138
133139
```html
134140
<h1>Vite is running in %MODE%</h1>
@@ -145,8 +151,7 @@ Vite は多くのフレームワークで使用されているため、条件分
145151
146152
つまり、 `vite build` の動作中は、もし `.env.production` があれば、環境変数をそこから読み込むということです:
147153
148-
```
149-
# .env.production
154+
```[.env.production]
150155
VITE_APP_TITLE=My App
151156
```
152157
@@ -160,19 +165,17 @@ vite build --mode staging
160165
161166
また、`.env.staging` ファイルを作成します:
162167
163-
```
164-
# .env.staging
168+
```[.env.staging]
165169
VITE_APP_TITLE=My App (staging)
166170
```
167171
168172
`vite build` はデフォルトで本番環境のビルドを実行しますが、別のモードと `.env` ファイルの設定を変更することで、開発環境のビルドを実行することもできます:
169173
170-
```
171-
# .env.testing
174+
```[.env.testing]
172175
NODE_ENV=development
173176
```
174177
175-
## NODE_ENV とモード
178+
### NODE_ENV とモード
176179
177180
`NODE_ENV``process.env.NODE_ENV`)とモードは異なる概念であると意識するのが重要です。それぞれのコマンドが `NODE_ENV` とモードにどのように影響するかを以下に示します:
178181

guide/features.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ Vite はデフォルトでは Node.js の API を提供します。Vite でク
143143
`vite/client` は以下の型のシム(shim)を提供します:
144144

145145
- アセットのインポート(例: `.svg` ファイルのインポート)
146-
- `import.meta.env` に Vite が挿入した[環境変数](./env-and-mode#env-variables)の型
146+
- `import.meta.env` に Vite が挿入した[定数](./env-and-mode#env-variables)の型
147147
- `import.meta.hot`[HMR API](./api-hmr) の型
148148

149149
::: tip

0 commit comments

Comments
 (0)