javascript - 将环境变量与常量进行比较时，字符串比较在 Javascript 中不起作用

Question

我们有一个简单的 React 应用程序，使用 CRA 1.x 创建。

我们安装了 dotenv 以在项目上使用环境变量，我们的变量包含在 .env 和 .env.development 文件中，例如这个:

.env

REACT_APP_LOGGER=LOGGER

.env.development

REACT_APP_LOGGER=NO_LOGGER

然后在代码中我们有这样的逻辑:

if(process.env.REACT_APP_LOGGER === "LOGGER") {
    // do something
}

在 development 模式下使用 webpack 4 进行本地构建时，if 为真，而在 production 模式下为 false。

但在 azure 上，两种情况都是 false

process.env.REACT_APP_LOGGER === "LOGGER" // false

我们检查了 process.env.REACT_APP_LOGGER 的值，它是 string 的“LOGGER”类型，但代码返回了奇怪的值:

console.log(process.env.REACT_APP_LOGGER)
console.log(process.env.REACT_APP_LOGGER === "LOGGER")
console.log(process.env.REACT_APP_LOGGER == "LOGGER")
console.log(typeof process.env.REACT_APP_LOGGER)

这是前面代码生成的输出:

LOGGER
false
false
string

我做错了什么吗？奇怪的是，我们还有其他类似的字符串比较，而且它们比较正确。

process.env.NODE_ENV === "production" // true 

编辑:当我们查看转译后的代码时，我们会看到以下内容:

console.log("LOGGER"),
console.log(!1),
console.log(!1),
console.log(f("LOGGER"));

所以我想这意味着比较是在构建期间完成的(因为这是一个常量，所以很有意义)。

Answer 1

解决方案是将两者都传递给 stringify，如下所示:

JSON.stringify(process.env.REACT_APP_LOGGER) === JSON.stringify("LOGGER")

这样，我们可以将两个变量转换为相同的字符串格式，长度相同，值也相同，但 Azure Process 注入(inject)的环境变量不相同。