Question

我想设置全局环境变量，定义我的Webpacked ReactJS应用程序工作的当前环境（开发，生产，测试或部署）。但是，每当尝试访问我的环境变量__ENV__时，我都会遇到这个非常奇怪的错误。

以下类似的代码片段都失败并出现相同的错误Uncaught ReferenceError: deployment is not defined，其中部署是__ENV__的值，而不是它的引用名称。无论我给它什么价值，都会发生同样的事情。以下是三个样本：

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作为单个捆绑包发布。

Answer 1

发生这种情况的唯一原因是，如果您将构建工具配置为使用其他内容替换__ENV__的全局引用。

所以构建工具将取代

console.log(__ENV__);

与

console.log(development);

在严格模式下失败，因为未定义变量development。

您没有展示如何配置构建工具，而是执行类似

之类的操作

replace('__ENV__', 'development')

应该是

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

以便构建工具将字符串文字插入代码中（而不是变量名）。

（如果值来自变量，首先将其传递给JSON.stringify，这将添加引号）

JS全局变量导致评估崩溃

1 个答案: