WebpackのTypescriptの環境変数

Question

WebpackのDefinePluginを使用して、Typescriptでグローバルを宣言するのに問題があります。私は間違っていることについて何らかのインプットを得ることを望んでいました。

私は私の.bash_profileで環境変数を作成：、（私が使用していますリアクト）index.tsxインサイド

... 
plugins: [ 
    new webpack.DefinePlugin({ 
    API_KEY_GOOGLE_MAPS: JSON.stringify(process.env.API_KEY_GOOGLE_MAPS), 
    }), 
], 
... 

：

私webpack.config.jsで

export API_KEY_GOOGLE_MAPS=xxxxxxxxxxxxxxxx 

、私は次の行を持っています私は以下を行います：

declare var API_KEY_GOOGLE_MAPS: string; 

console.log(API_KEY_GOOGLE_MAPS) 

これは、次のエラーを生成します。彼の行にはconsole.logが含まれています。

誰にもリードがありますか？

Answer 1

create-react-app環境変数はREACT_APP_接頭辞する必要があります。

注：あなたはREACT_APP_で始まるカスタム環境変数を作成する必要があります。 NODE_ENVを除く他の変数は無視され、誤って同じ名前を持つ可能性のある秘密鍵がマシンに公開されるのを防ぎます。

「Adding Custom Environment Variables」のドキュメント。

.envファイルにこれらの環境変数を追加して、.bash_profileファイルに追加する必要があります。ビルドに応じて適切なファイルが選択されます（つまり、startまたはbuild）。アプリケーションの共有とデプロイが容易になります。

Answer 2

私のやり方は、プロジェクトファイルのルートにある.envファイルを.gitignoreに追加することです。

私は私のプロジェクトの環境変数（追加の変数は、それ自身の行にそれぞれを追加することによって分離することができる）を定義し、そのファイル内：dotenvのNPMモジュールを使用して次に

NODE_ENV=development 

を私はWebPACKのファイル内の値にアクセスすることができます（またはサーバー側expressJSファイルなど）。

console.log(NODE_ENV); // development 

Answer 3

は自分の質問に答える：私は私のアプリの中でそれを参照することができる今

// in the command line 
$ npm install --save dotenv 

// at the top of the webpack config file 
require('dotenv').config(); 

// in the plugins of the webpack config 
plugins: [ 
    new webpack.DefinePlugin({ 
     'NODE_ENV': JSON.stringify(process.env.NODE_ENV) 
    }) 
], 

はWebPACKのでtranspiledされている私のプロジェクトはcreate-react-appを使用して生成された、およびそのマニュアルによると、環境変数は、このアクセスされていますway：

console.log(process.env.API_KEY_GOOGLE_MAPS) 

webpack.DefinePlugin()は必須ではありません。