Невозможно установить значения для `process.env` в Javascript на стороне клиента

Question

У меня есть система (это Гэтсби, но я не думаю, что это имеет отношение к этому вопросу), которая использует веб-пакет DefinePlugin для присоединения некоторых EnvironmentVariables к глобальной переменной: process.env

IЯ могу прочитать это очень хорошо.

К сожалению, из-за странностей в процессе запуска приложения, мне нужно сделать небольшую перезапись этих EnvironmentVariables после загрузки сайта.(Не заинтересован в обсуждении того, является ли это лучшим вариантом в контексте этого вопроса. Я знаю, что есть другие варианты; я хочу знать, возможно ли это )

Но это не такt работать :(

---

Если я попытаюсь сделать это явно:

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 компилируется в какой-то другой литерал, который технически поддерживает индексированный установщик)

---

Единственными доступными решениями будет изменение процесса сборки webpack (не вариант, хотя я будув ближайшее время поднимите PR, чтобы сделать это возможным :)), используйте другой процесс для получения Env.Vars во frontEnd (неоптимальный по разным причинам) или взломайте с помощью различных элементов управления средой, которые Gatsby предоставляет, чтобы сделать этовсякая любопытная работа (неприятная по другим причинам).