Webpack DefinePluginが環境変数をノードサーバーに渡さない

Question

WebpackのDefinePluginが環境変数を通過していません。

plugins: [ 
    new webpack.DefinePlugin({ 
    'process.env.NODE_ENV': JSON.stringify("development"), 
    'process.env.API_URL': JSON.stringify("test") 
    }), 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoEmitOnErrorsPlugin() 
] 

server.js：私はpluginsブロックは以下の通りですWebPACKのv2.2.1

私のWebPACKを使用してい

console.log('env', process.env.NODE_ENV) // undefined 
console.log('url', process.env.API_URL); // undefined 

.babelrc設定：私は切り替えた

{"presets": ["es2015", "stage-0", "react"]} 

babelプリセットは、Webpackを2.0.0に戻しました。実際には、これらの変数がコピーされない原因となることはありません。追加の情報やコードを提供する必要がある場合は、lmk。 :)

Answer 1

これはまだ誰かに役立つことを願っています。

Webpackは静的なバンドルファイルを作成するので、webpackがそれをするときに環境変数を利用できるようにする必要があります。

.babelrcファイルに基づいて、webpackにバンドルされている反応アプリだとわかります。 だから、あなたが何をしたいのか、あなたは次の操作を行う必要がある依存関係としてごwebpack.config.jsファイルでnpm install --save dotenv

をdotenvインストールです：だから何が起こるかは、バンドル時にある

//require dotenv and optionally pass path/to/.env 
    const DotEnv = require('dotenv').config({path: __dirname + '/.env'}), 
      webpack = require('webpack'), 

    //Then define a new webpack plugin which reads the .env variables at bundle time 
      dotEnv = new webpack.DefinePlugin({ 
       "process.env": { 
       'BASE_URL': JSON.stringify(process.env.BASE_URL), 
       'PORT': JSON.stringify(process.env.PORT) 
      } 
     }); 

    // Then add the newly defined plugin into the plugin section of the exported 
    //config object 
    const config = { 
     entry: `${SRC_DIR}/path/to/index.js`, 
     output: { 
      path: `${DIST_DIR}/app`, 
      filename: 'bundle.js', 
      publicPath: '/app/' 
     }, 
     module: { 
      loaders: [ 
       { 
        test: /\.js?$/, 
        include: SRC_DIR, 
        loader: "babel-loader", 
        exclude: /node_modules/, 
        query: { 
         presets: ["react", "es2015", "stage-3"] 
        } 
       } 
      ] 
     }, 
     plugins: [ 
      dotEnv 
     ] 
    }; 
    module.exports = config; 

を、環境変数が新しく定義されたWebPACKのプラグインで作成しprocess.envオブジェクトにグローバルに保存され、 が、これはprocess.env.[VARIABLE_NAME]

PSを経由して私たちのコードベース内のどこでも、私たちの変数にアクセスできるようになり：クラウドサーバーのsuでchをherokuとして使用する場合は、コードをデプロイする前に、必要な環境変数をすべて設定してください。また、コードをデプロイした後に変更が加えられた場合、格納された変数を更新するためにwebpackのために再デプロイする必要があります。 このメソッドは、反応と角度の両方で機能します。私はそれがすべてのwebpackビルドで動作するはずだと信じています。 編集： また、webpackプラグインに渡している環境変数に対してJSON.stringify()を実行する必要があります。