問題描述
我有一個系統(tǒng)(它恰好是 Gatsby，但我認為這與這個問題無關(guān))它使用 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
我可以很好地閱讀這個.
I can read this just fine.
不幸的是，由于應(yīng)用程序啟動過程的怪異，我需要選擇在站點加載后對這些 EnvironmentVariables 進行一些簡短的覆蓋.(在這個問題的背景下，沒有興趣討論這是否是最佳選擇.我知道還有其他選擇；我想知道 this 是否可行)
Unfortunatley, due to weirdnesses in the app startup proces, I need 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: invalid assignment left-hand side.
如果我通過索引器執(zhí)行此操作(這似乎是 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);
將記錄 undefined 兩次.<小時>我做錯了什么，我該如何解決?
will log undefined twice.
What am I doing wrong, and how do I fix this?
推薦答案
這個嘗試的解決方案背后的前提是有缺陷的.
The premise behind this attempted solution was flawed.
我的印象是 webpack 使 process.env.* 在瀏覽器中作為對象可用".
I was under the impression that webpack "made process.env.* available as an object in the browser".
不會！
它實際上所做的是將您的代碼轉(zhuǎn)換成文字，無論您在哪里引用 process.env.那么看起來像 fetch(process.env.MY_URL_VAR);實際上并沒有引用變量，它實際上在編譯時被轉(zhuǎn)譯為 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 對象"上的值，因為在轉(zhuǎn)譯的 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.
這解釋了為什么直接賦值會產(chǎn)生 ref 錯誤(您嘗試執(zhí)行 "someString" = "someOtherString";)但索引器沒有.(我假設(shè) process.env 被編譯成一些不同的文字，這在技術(shù)上支持索引設(shè)置器)
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 構(gòu)建過程(不是一個選項，盡管我很快會提出 PR 以使其成為可能:))，使用不同的過程將 Env.Vars 放入前端(子- 出于各種其他原因而優(yōu)化)或使用 Gatsby 提供的各種環(huán)境控制來解決問題，以使其完全正常工作(出于其他原因令人反感).
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).
這篇關(guān)于無法在客戶端 Javascript 中設(shè)置“process.env"的值的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！