Webpack。如何在客户端(浏览器)注入process.env运行时,使构建独立于环境。

简短的问题

我正在寻找一些方法来告诉Webpack,不要用它来做任何事情。process 变量,就像对待其他全局变量一样(所以它指的是客户端捆绑中的window.process)。如果不可能,那就用一种方法在 process.env 在客户端运行时,Webpack的。

冗长的解释

目前,我使用Webpack来打包我的React(SSR)应用程序。我有5个环境,比如dev1,dev2……staging和production。我想重复使用相同的构建,并保持可配置的东西,比如说每个环境的Google Analytics ID是不同的。

后台的Dot ENV模块就可以完成这个任务。我可以将所有常量定义为 KEY=value.env 文件,并在运行时加载它们,作为 process.env.KEY 在代码中。

我试图在前端侧(或共享文件)复制同样的行为。假设我有一个 baseService.js 召唤 fetch. 它也可以从node+客户端使用。它使用的变量包括 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中作为global的 window.process 变量)。) 这是因为webpack仍然从Node向前端注入过程变量,而前端的过程变量有 env 空白 {} 对象。我把它调试了一下,下面是截图。

enter image description here

上面是控制台的日志 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')getEnv('NODE_ENV') 在node和浏览器中都能完美地工作。

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

给TA打赏
共{{data.count}}人
人已打赏
未分类

如何在表达式验证器中比较一个数组的整数元素?

2022-9-9 4:57:19

未分类

将PHP FOR循环转换为Python FOR LOOP来XOR 2个字符串

2022-9-9 4:57:21

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索