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

简短问题

我正在寻找某种方式告诉 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 中使用webpack.DefinePlugin插件能够在客户端捆绑包上使用它。

现在，当我想重新使用构建时，我捕获了中的所有常量process.env通过将它们匹配来查看它们中的任何一个是否可以在客户端使用PUBLIC_(.*)（它将匹配 PUBLIC_KEY），如果是，则打包到数组中并作为对象添加到主 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。

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

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

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

现在我打电话getEnv('PUBLIC_KEY') or getEnv('NODE_ENV')在节点和浏览器中都工作得很好。

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