「React」webpackを使用して構築されたReactプロジェクトに環境変数を適用

CRAではなく、Webpackとbabelを直接使用して構築されたプロジェクトに環境変数を設定して、挿入された内容を消去したいと考えています.
「応答に環境変数を適用」キーワードでGoogle検索を行う場合
dotnvパッケージのインストール>プロジェクトルートディレクトリにあります.envファイルの作成>REACTアプリで始まる変数の作成>プロセス.env.<変数名の使用>環境変数へのアクセス
上記のようにすればよい.実際,CRAによって生成される項目では,この手法を用いて環境変数を簡単に設定できる.今回もそうすればいいのですが、適用されましたが、成功しませんでした…!

dotnvとは?

いわゆる「dotnv」です.envファイルに宣言された変数を処理します.envにロードされた依存性のないモジュール.
OSとpathモジュールを介して、.envファイルの絶対パスを見つけ、fsモジュールを使用します.物理的にenvファイルを取得して処理します.envにはkey-value形式で含まれます.
ここでos、path、fsモジュールはNodeである.jsが基本的に提供するモジュールの1つです.こんな感じでdotnvはNodeこれはjsの基本環境で実行するためのパッケージであり,無依存モジュールといえる.

ReactはNodejsじゃない😀

Node.jsはreactを使用して開発されたプログラムが実行できるランタイム環境を提供し、reactに直接関連するものではない.
Node.jsはjavascriptが実行されると、webpackはプロファイルの設定に基づいて静的ファイルをバインドし、npmから開発サーバにサーバをアップロードしてバインドファイルを実行する環境を提供します.
すなわち,ReactプロジェクトのJavaScriptファイルはノードである.js自体ではないので、特定のパッケージが必要な場合はnpmでインストールし、/node modulesからインポートして使用に依存する必要があります.したがって、os、path、fsモジュールは/srcサブファイルに見つかりません.(dotnvしかインストールされていないので!)

2.dotnvを環境変数としてどのように使用しますか?

1)WebPackのDefinePluginを用いて処理する.envという名前のグローバル変数を定義します.

/srcルートディレクトリにあります.envファイルを作成し、環境変数を記入するだけです.「REACTアプリ」を付ける必要はありませんが、他の環境変数との衝突を防ぐためには、区別可能な接頭辞を付けることが望ましいです.

2)代替良薬nv-webpack

npm install dotenv-webpack --save-dev

インストール後、webpack configファイルからプラグインに追加すればいいです.

const Dotenv = require("dotenv-webpack")

module.exports = {
	...
	plugins: [
		new Dotenv(),
	]
}

この方法は試したことがありませんが、探してみると簡単そうなのでまとめてみました.