同構JS應用程序中的環境變量：Webpack查找和替換？

Question

我正在使用webpack捆綁一個同構的JS應用程序（ 基於此示例 ），以便瀏覽器運行與服務器相同的代碼。 一切都運行順利，除了我有一個config.js ，其中有一些設置是從服務器上的環境變量中提取的：

module.exports = {
  servers:
    auth: process.env.AUTH_SERVER_URL,
    content: process.env.CONTENT_SERVER_URL
  }
}

在服務器上這是盛大的，但是當webpack為客戶端process呈現這個時，它是空的，這不起作用。

我希望有一種'查找和替換'webpack插件，它將僅用該文件中的內容替換它們？

"…config.js content…".replace(/process\.env\.([a-z0-9_]+)/, function(match, varName) {
  return process.env[varName];
})

Answer 1

請注意，在接受的答案中建議使用DefinePlugin可能是一個危險的操作，因為它完全暴露了process.env 。 正如Tobias在上面評論的那樣，實際上有一個插件EnvironmentPlugin可以在內部使用DefinePlugin增加白名單功能。

在你的webpack.config.js ：

{
  plugins: [
    new webpack.EnvironmentPlugin([
      'NODE_ENV',
      'WHITELISTED_ENVIRONMENT_VARIABLE'
    ])
  ]
}

Answer 2

在您的webpack.config.js ，使用以下preLoaders （或postLoaders ），

  module: {
    preLoaders: [
      { test: /\.js$/, loader: "transform?envify" },
    ]
  }

使用webpack.DefinePlugin另一種方法：

plugins: [
    new DefinePlugin({
      'process.env': Object.keys(process.env).reduce(function(o, k) {
        o[k] = JSON.stringify(process.env[k]);
        return o;
      }, {})
    })
]

注意 ：不推薦使用envify-loader的舊方法：

DEPRECATED ：改為使用transform-loader + envify 。

Answer 3

是啊; 看起來像envify-loader是一個簡單的解決方案。

我剛剛將以下內容添加到我的webpack加載器中：

{
  test: /config\.js$/, loader: "envify-loader"
}

並修改config.js （並且只有該文件）以靜態包含任何引用的環境變量:)

Answer 4

我需要一種方法來使用運行代碼的機器上設置的env變量，而不是構建應用程序的機器的env變量。

我還沒有看到解決方案。 這就是我做的。

在publicEnv.js ：

// List of the env variables you want to use on the client. Careful on what you put here!
const publicEnv = [
  'API_URL',
  'FACEBOOK_APP_ID',
  'GA_ID'
];

const isBrowser = typeof window !== 'undefined';
const base = (isBrowser ? window.__ENV__ : process.env) || {};

const env = {};
for (const v of publicEnv) {
  env[v] = base[v];
}
export default env;

在我的頁面的HTML模板文件中：

import publicEnv from 'publicEnv.js';

...

<script>
  window.__ENV__ = ${stringify(publicEnv)};

  // Other things you need here...
  window.__INITIAL_STATE__ = ${stringify(initialState)};
</script>

所以現在我可以在前端和后端獲得env變量的值：

import publicEnv from 'publicEnv.js';

...

console.log("Google Analytic code is", publicEnv.GA_ID);

我希望它可以提供幫助。