Javascript 同构JS应用程序中的环境变量：Webpack find&；代替

我正在使用webpack绑定一个同构的JS应用程序（），以便浏览器运行与服务器相同的代码。除了我有一个

config.js

和一些从服务器上的环境变量中拉入的设置外，一切都在顺利运行：

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

在服务器上，这是很重要的，但是当webpack为客户机

进程

呈现时，这是空的，并且不起作用

我希望有一种“查找并替换”的网页包插件，可以用文件中的内容替换它们

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

嗯,；看来这是个简单的解决办法

我刚刚在我的网页包加载程序中添加了以下内容：

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

---

并且

config.js

（只有该文件）被修改为静态地包含任何引用的环境变量：）

在

webpack.config.js

中， 使用以下

预加载程序

（或

后加载程序

）

使用

网页包的另一种方法。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

的旧方法已被弃用：

已弃用：改用+

---

请注意，使用公认答案中建议的

DefinePlugin

可能是一种危险的操作，因为它会完全暴露

process.env

。正如托拜厄斯在上面评论的那样，实际上有一个插件

EnvironmentPlugin

，它通过添加白名单功能，在内部使用

DefinePlugin

---

在

webpack.config.js

中：

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

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

---

我需要一种方法来使用运行代码的机器上设置的环境变量，而不是构建应用程序的机器上的环境变量

我还没有看到解决这个问题的办法。这就是我所做的

在publicEnv.js中：

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

// 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>

---

我希望它能有所帮助。

我已经找到了，但我在配置它时遇到了困难。有一个插件，它允许将应该内联的环境变量列入白名单：

new webpack.EnvironmentPlugin（[“AUTH\u SERVER\u URL”，“CONTENT\u SERVER\u URL”]）

问题在于，构建环境的机器并不总是运行代码的机器（在我们的例子中是这样的）。一种方法是将它们放在HTML的

global

和

window

中，但这不是我最喜欢的解决方案。此方法已被弃用！出于兴趣，有什么理由不推荐另一种方法？在

envify loader

中所做的一切都只是一个包装器。讨论。例如，我不明白webpack如何知道用

“生产”

替换

NODE\u ENV

。使用envify，您需要告诉它要替换什么

NODE_ENV

——这是如何工作的？Webpack不会真正替换此处的任何值，它会将您从process.ENV获得的白名单中的任何内容插入到您的代码中，并使用已设置的任何值。在编译开始之前，您需要自己设置环境变量。从命令行

NODE\u ENV=production webpack

，或者在您的webpack配置文件

process.ENV.NODE\u ENV='production'

中。