Webpack：如何在客户端（浏览器）端注入 process.env 运行时，使构建独立于环境

Question

简短问题

我正在寻找某种方法来告诉 Webpack，不要对process变量执行任何操作，只需像任何其他全局变量一样对待（因此它引用客户端捆绑包中的 window.process ）。如果不可能，那么可以process.env在客户端运行时在 Webpack 中注入变量。

长解释

目前，我使用 Webpack 来打包我的 React (SSR) 应用程序。我有 5 个环境，例如 dev1、dev2...登台和生产。我想重复使用相同的构建并保持可配置性，例如每个环境上的 Google Analytics ID 是不同的。

后端 Dot ENV 模块完成这项工作。我可以将所有常量定义为文件KEY=value中的对.env，并在运行时加载它们并process.env.KEY在代码中使用。

我试图为前端（或共享文件）复制相同的行为。假设我有一个baseService.js拨打电话的电话fetch。它也可以从节点+客户端使用。它使用诸如 之类的变量process.env.HOST。到目前为止，我一直在为每个环境创建单独的构建，因此使用webpack.DefinePlugin插件在 Webpack 中定义了它，以便能够在客户端捆绑包上使用它。

现在，当我想重新使用构建时，我捕获所有常量，通过process.env将它们与（它将匹配 PUBLIC_KEY）进行匹配来查看它们是否可以在客户端使用PUBLIC_(.*)，如果是，则将其打包到数组中并添加到主 html 文件中对象如下图所示：-

window.process = {ENV: { PUBLIC_GA_ID: '1235', PUBLIC_FOO: 'bar' }}

当我使用 webpack 捆绑我的客户端时，执行process.env.PUBLIC_GA_ID是未定义的（尽管它在 head html 中作为全局window.process变量）。这是因为 webpack 仍然从 Node 向前端注入进程变量，前端的env对象为空白{}对象。我调试了一下，下面是截图。

process上面是文件中变量的控制台日志baseService.js。显然我不能在这里使用window.process，因为当在 Node.js 中使用文件时它会失败

我正在寻找某种方法来告诉 Webpack，不要对process变量执行任何操作，只需像任何其他全局变量一样对待（因此它引用客户端捆绑包中的 window.process ）。如果不可能，那么可以process.env在客户端运行时在 Webpack 中注入变量。

Answer 1

我认为我已经选择了最简单的解决方案，而不是使用 Webpack 来完成这项工作。如果有人有更好的答案，请留言。

我创建了一个实用函数，如下所示：-

export const getEnv = key => {
  if (typeof window === 'undefined') {
    // node
    return process.env[key]
  }
  // browser
  return window.process.env[key]
}

现在我在节点和浏览器中调用getEnv('PUBLIC_KEY')orgetEnv('NODE_ENV')两者并且工作得很好。

尽管我仍然更喜欢 Webpack 支持采取process.env运行时或为浏览器注入 API 的选项的更好方式