问题描述
我有一个系统（碰巧是盖茨比，但我认为这与这个问题无关），它正在使用webpack DefinePlugin将某些EnvironmentVariables附加到全局变量： process.env
I have a system (it happens to be Gatsby, but I don't believe that's relevant to this question) which is using webpack DefinePlugin to attach some EnvironmentVariables to the global variable: process.env
我可以读得很好。
不幸的是，由于应用启动过程中，我选择在网站加载后对那些EnvironmentVariables进行简要覆盖。 （在这个问题的背景下，没有兴趣讨论这是否是最佳选择。我知道还有其他选择；我想知道这是否可能）
Unfortunatley, due to weirdnesses in the app startup proces, I have chosen to do some brief overwritting of those EnvironmentVariables after the site loads. (Not interested in discussing whether that's the best option, in the context of this question. I know there are other options; I want to know whether this is possible)
但是它不起作用:(
如果我尝试明确地做到这一点：
But it doesn't work :(
If I try to do it explicitly:
process.env.myVar = 'foo';
然后我得到 ReferenceError：左侧的赋值无效。
如果我这样做由索引器（似乎是 dotenv 所做的事情）执行，则它不会出错，但也不起作用：
If I do it by indexer (which appears to be what dotenv does) then it doesn't error, but also doesn't work:
console.log(process.env.myVar);
process.env['myVar'] = 'foo';
console.log(process.env.myVar);
将记录未定义 b。
我在做什么错了，我该如何解决？
will log undefined twice.
What am I doing wrong, and how do I fix this?
推荐答案
尝试这种解决方案的前提是有缺陷的。
The premise behind this attempted solution was flawed.
我对webpac印象很深k使process.env。*在浏览器中可作为对象使用。
I was under the impression that webpack "made process.env.* available as an object in the browser".
不是！
It doesn't!
它的实际作用是将您的代码转换为文字，无论您引用 process.env 哪里。所以看起来像 fetch（process.env.MY_URL_VAR）;实际上并没有引用变量，而是在编译时将其转换为 fetch（ http://theActualValue.com）。
What it actually does is to transpile you code down into literals wherever you reference process.env. So what looks like fetch(process.env.MY_URL_VAR); isn't in fact referencing a variable, it's actually being transpiled down into fetch("http://theActualValue.com") at compile time.
这意味着在概念上不可能修改 process.env 对象上的值，因为实际上并没有实际的对象，在转译的javascript中。
That means that it's conceptually impossible to modify the values on the "process.env object", because there is not in fact an actual object, in the transpiled javascript.
这说明了为什么直接分配会产生ref错误（您尝试执行 someString = someOtherString; ），但索引器没有。 （我假设 process.env 被编译成不同的文字，从技术上来说，它支持索引的二传手）
This explains why the direct assignment gives a ref error (you tried to execute "someString" = "someOtherString";) but the indexer doesn't. (I assume that process.env gets compiled into some different literal, which technically supports an indexed setter)
唯一可用的解决方案是修改webpack的构建过程（不是一种选择，尽管我不久将提出PR以使其成为可能:)），使用不同的过程来获取Env进入前端（出于各种其他原因而处于次优状态），或者采用盖茨比提供的各种环境控制措施来使它们全部工作（出于其他原因而令人讨厌）。
The only solutions available would be to modify the webpack build process (not an option, though I will shortly raise a PR to make it possible :) ), use a different process for getting the Env.Vars into the frontEnd (sub-optimal for various other reasons) or to hack around with various bits of environment control that Gatsby provides to make it all kinda-sorta work (distasteful for yet other reasons).
这篇关于无法在客户端Javascript中的`process.env`上设置值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！