同构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);

我希望它可以提供帮助。