同构JS应用程序中的环境变量:Webpackfind&代替

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

本文关键字：Webpackfind amp 代替 环境变量 JS 应用程序 同构      更新时间：2024-05-03

我正在使用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];
})

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

在您的webpack.config.js:中

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

在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的旧方法已被弃用：

已弃用：请改用转换加载程序+envify。

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

我刚刚在我的webpackloader中添加了以下内容：

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

并且config.js（并且只有该文件）被修改为静态地包括任何引用的环境变量：）

我需要一种方法来使用在运行代码的机器上设置的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);

我希望它能有所帮助。

相关文章：