Глобалы JS вызывают сбой при оценке

1

Я хочу настроить глобальные переменные среды, определяющие текущую среду, в которой работает приложение Webpacked ReactJS (разработка, производство, тестирование или развертывание). Однако я получаю эту очень странную ошибку при попытке получить доступ к моей переменной среды __ENV__.

Следующие аналогичные фрагменты кода не работают с той же ошибкой, Uncaught ReferenceError: deployment is not defined, где развертывание является значением __ENV__, а не ref name. То же самое происходит независимо от того, какую ценность я ему даю. Вот три примера:

console.log(process.env.NODE_ENV);
global.__ENV__ = process.env.NODE_ENV || 'development';
console.log(__ENV__); // crashes here otherwise crashes at next line
global.__PROD__ = __ENV__ == 'production';
global.__DEPLOY__ = __ENV__ == 'deployment';
global.__DEV__ = __ENV__ == 'development';
global.__TEST__ = __ENV__ == 'test';

console.log(process.env.NODE_ENV);
window.__ENV__ = process.env.NODE_ENV || 'development';
console.log(__ENV__); // crashes here otherwise crashes at next line
window.__PROD__ = __ENV__ == 'production';
window.__DEPLOY__ = __ENV__ == 'deployment';
window.__DEV__ = __ENV__ == 'development';
window.__TEST__ = __ENV__ == 'test';

console.log(process.env.NODE_ENV);
window.__ENV__ = process.env.NODE_ENV || 'development';
console.log('${__ENV__}'); // crashes here otherwise crashes at next line
window.__PROD__ = '${__ENV__}' == 'production';
window.__DEPLOY__ = '${__ENV__}' == 'deployment';
window.__DEV__ = '${__ENV__}' == 'development';
window.__TEST__ = '${__ENV__}' == 'test';

Даже более странный, этот подход работает вместо этого:

const __ENV__ = process.env.NODE_ENV || 'development';
console.log(__ENV__);
global.__PROD__ = __ENV__ === 'production';
global.__DEPLOY__ = __ENV__ === 'deployment';
global.__DEV__ = __ENV__ === 'development';
global.__TEST__ = __ENV__ === 'test';

Моя конфигурация Webpack включает в себя следующее:

config.globals = {
  'process.env': {
    'NODE_ENV': JSON.stringify(config.env)
  },
  '__ENV__': config.env,
  '__DEPLOY__': config.env === '"deployment"',
  '__DEV__': config.env === '"development"',
  '__PROD__': config.env === '"production"',
  '__TEST__': config.env === '"test"'
};

webpack_config.plugins.push(
  new webpack.DefinePlugin(config.globals)
);

Любая идея, почему это вещь?

Если это может оказать какую-либо помощь, моя кодовая база передается из ES2015 с включенными предложениями этапа 0, а затем отправляется как один пакет с использованием Webpack.

Теги:
ecmascript-6
global-variables

1 ответ

4

Единственная причина, по которой это произойдет, - это настроить ваш инструмент сборки, заменив глобальные ссылки на __ENV__ чем-то другим.

Поэтому инструмент сборки заменит

console.log(__ENV__);

с

console.log(development);

Это не работает в строгом режиме, поскольку переменная- development не определена.

Вы не показываете, как вы настроили свой инструмент сборки, но вместо того, чтобы делать что-то вроде

replace('__ENV__', 'development')

так должно быть

replace('__ENV__' , '"development"')

так что инструмент построения вставляет строковый литерал в код (вместо имени переменной).

(если значение исходит от переменной, сначала передайте ее через JSON.stringify, что добавит кавычки)

  • 0
    (Обновлен OP с конфигурацией Webpack) Действительно, это, кажется, было источником ошибки - добавление JSON.stringify (...) вокруг каждой из переменных, похоже, закрывает ошибку. Однако добавление отпечатка переменной __ENV__ до того, как в первой строке третьего образца будет напечатано неопределенное значение. Любая идея?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню