node js 環境変数取得

Question

nodejs の環境変数取得

index.htmlの＜HEAD＞内の＜script ＞で
process.envを参照したらprocess is not definedになってしまいました
index.js内では参照できています
この理由が知りたいです

以下情報です

フォルダ構成
-public
index.html
-src
index.js

ビルドはparcelを使用、エントリーポイントをindex.htmlに設定

環境変数は.envファイルに記述しており、index.js内では参照できています

追記
上記方法だと
クライアントｊｓ（localhost）で
process.env.ENVが表示できます
.envファイルに
ENV＝DEV
などとしております

Answer 1

クライアントサイドJSとサーバサイドJSを混同していると思います。

index.html に埋め込んだJSはクライアントサイドで動作するのでサーバーの環境変数を取得することはできません。

index.js内では参照できています

これは

node index.js

で確認したのですよね？
Node.jsはJSのサーバーサイド実行環境なのでサーバの環境変数を取得できます。

クライアントサイドというのは要するにWebブラウザです。
もしブラウザからサーバの環境変数を見れたら怖いですよね？

Answer 2

Parcelの厳密な動きを追えていないので確証はないのですが、HTMLは「エントリポイントを調べて書き換える」だけの変更しか行わない、のではないでしょうか。

Parcel公式のドキュメントを読んでも、HTMLについては「パスの生成を行う」とだけあって、直書きされたJavaScriptを変換するという旨はありませんでした。

そして、processはNode.jsの機能なので、ブラウザでは動きません。

Answer 3

Node.jsとChromeは同じV8エンジンでJavaScriptを動かしています。
しかしその前提条件が全く違います。
細かい箇所まで挙げればキリがないですが、簡単に上げるとこんな感じ。

Node.js

• OSのコアな箇所(環境変数やプロセスの停止等)にアクセスするprocessオブジェクトを用意
• require関数を用意

ブラウザのJavaScript

• DOMを操作するためのDOM APIを用意
• windowsオブジェクトや、documentオブジェクトを用意

従って、ブラウザで<script>タグにprocessを確認するようにしたJavaScriptファイルを読み込ませても、
**process.envなんて存在しませんけど？**というエラーが発生します。