Webpack: как внедрить среду выполнения process.env на стороне клиента (браузера), делая сборку независимой от среды - PullRequest
Новая
       18

Webpack: как внедрить среду выполнения process.env на стороне клиента (браузера), делая сборку независимой от среды

0 голосов
/ 24 апреля 2020

КРАТКИЙ Вопрос

Я ищу способ сказать Webpack, что ничего не делать с переменной process, просто обращаться с ней как с любой другой глобальной переменной (поэтому она относится в window.process в клиентском пакете). Если это невозможно, то способ внедрить переменные в process.env Webpack во время выполнения на клиенте.

LONG Объяснение

В данный момент я использую Webpack для упаковки мое приложение React (SSR). У меня есть 5 сред, таких как dev1, dev2 ... постановка и производство. Я хочу повторно использовать одну и ту же сборку и сохранять такие параметры, как, скажем, идентификатор Google Analytics для каждой среды.

Модуль Backend Dot ENV выполняет свою работу. Я могу определить все константы как пару KEY=value в файле .env, загрузить их во время выполнения и использовать в коде как process.env.KEY.

Я пытался повторить то же поведение для внешней стороны (или общие файлы). Скажем, у меня есть baseService.js, который звонит на fetch. Его также можно использовать с узла + клиента. Используются переменные типа process.env.HOST. До сих пор я создавал отдельные сборки для каждой среды, поэтому определил это в Webpack с помощью плагина webpack.DefinePlugin, чтобы иметь возможность использовать его в связке на стороне клиента.

Теперь, когда я хочу повторно использовать сборки, Я фиксирую все константы в process.env, чтобы увидеть, можно ли использовать их на стороне клиента, сопоставив их с PUBLIC_(.*) (будет соответствовать PUBLIC_KEY), если yes, упаковать затем в массив и добавить в основной файл html как объект, как показано ниже: - 

window.process = {ENV: { PUBLIC_GA_ID: '1235', PUBLIC_FOO: 'bar' }}

Когда я связываю свой клиент с помощью веб-пакета и выполняю process.env.PUBLIC_GA_ID, он не определен (хотя он присутствует в заголовке html как глобальная переменная window.process). Это связано с тем, что webpack все еще вводит переменную процесса из узла во внешний интерфейс, в котором объект env является пустым объектом {}. Я отладил ниже скриншот.

enter image description here

Выше находится консольный журнал переменной process в файле baseService.js. Очевидно, что я не могу использовать window.process здесь, потому что тогда произойдет сбой, когда файл будет использоваться в Node.js

Я ищу какой-то способ сказать Webpack, что ничего не делать с переменной process, просто трактовать как любую другую глобальную переменную (поэтому она относится к window.process в клиентском пакете). Если это невозможно, то способ внедрить переменные в process.env Webpack во время выполнения на клиенте.

1 Ответ

0 голосов
/ 24 апреля 2020

Я думаю, что вместо того, чтобы играть с 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') как в узле, так и в браузер и работает отлично.

Хотя я все же предпочел бы лучший способ, которым Webpack поддерживает опцию, чтобы взять process.env время выполнения или внедрить API для браузера

...