javascript - 无法在客户端 Javascript 中设置 `process.env` 的值

Question

我有一个系统(它恰好是 Gatsby，但我不相信这与这个问题有关)使用 webpack DefinePlugin 将一些 EnvironmentVariables 附加到全局变量:process.env
我可以很好地阅读这个。

不幸的是，由于应用程序启动过程中的怪异，我需要选择在站点加载后对这些 EnvironmentVariables 进行一些简短的覆盖。 (在这个问题的背景下，对讨论这是否是最佳选择不感兴趣。我知道还有其他选择；我想知道这是否可能)

但它不起作用:(

如果我尝试明确地这样做:

process.env.myVar = 'foo';

然后我得到 ReferenceError: invalid assignment left-hand side .

如果我通过索引器执行此操作(这似乎是 dotenv 所做的)，那么它不会出错，但也不起作用:

console.log(process.env.myVar);
process.env['myVar'] = 'foo';
console.log(process.env.myVar);

将记录undefined两次。

我做错了什么，我该如何解决？

Answer 1

这个尝试的解决方案背后的前提是有缺陷的。

我的印象是 webpack “使 process.env.* 在浏览器中作为对象可用”。

它没有!

它实际上所做的是将您的代码转换为文字，无论您在哪里引用 process.env .那么看起来像 fetch(process.env.MY_URL_VAR) ;实际上并没有引用变量，它实际上被转译为 fetch("http://theActualValue.com")在编译时。

这意味着在概念上不可能修改“process.env 对象”上的值，因为在转译的 javascript 中实际上没有实际的对象。

这解释了为什么直接赋值会产生 ref 错误(您试图执行 "someString" = "someOtherString";)但索引器没有。 (我假设 process.env 被编译成一些不同的文字，这在技术上支持索引 setter )

唯一可用的解决方案是修改 webpack 构建过程(不是一个选项，尽管我很快会提出 PR 以使其成为可能:))，使用不同的过程将 Env.Vars 放入前端(对于各种其他原因)或使用 Gatsby 提供的各种环境控制来解决问题，以使其完全正常工作(由于其他原因令人反感)。