同构 JS 应用程序中的环境变量：Webpack 查找和替换？

Question

我正在使用 webpack 捆绑同构 JS 应用程序 (based on this example)，以便浏览器运行与服务器相同的代码。一切都运行顺利，除了我有一个 config.js 的一些设置是从服务器上的环境变量中提取的：

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

在服务器上这很好，但是当 webpack 为客户端呈现时 process 是空的，这不起作用。

我希望有一种 'find and replace' webpack 插件可以单独用该文件中的内容替换它们？

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

Answer 1

是的；看起来 envify-loader 是简单的解决方案。

我刚刚将以下内容添加到我的 webpack 加载器中：

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

并且 config.js（并且只有那个文件）被修改为静态地包含任何引用的环境变量:)

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: use transform-loader + envify instead.

Answer 3

请注意，按照接受的答案中的建议使用 DefinePlugin 可能是一项危险的操作，因为它会完全暴露 process.env。正如托比亚斯在上面评论的那样，实际上有一个插件 EnvironmentPlugin 可以通过添加白名单功能在内部使用 DefinePlugin 来做到这一点。

在你的webpack.config.js中：

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

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

希望对你有所帮助

同构 JS 应用程序中的环境变量：Webpack 查找和替换？

Environment Variables in an isomorphic JS app: Webpack find & replace?

javascript

webpack