Question

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

我们安装了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为true，在production模式下为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

解决方案是通过两个都进行字符串化，例如：

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

这样，我们可以将两个变量转换为相同的字符串格式，都具有相同的长度，并且都具有相同的值，但是Azure Process注入的环境变量并不相同。

Answer 2

我找到了解决此问题的方法。

webpack.config.js

const webpack = require('webpack');

module.exports = {

  ...

  plugins: [
    new webpack.DefinePlugin({
        'process.env': {
            EYES_MODE: process.env.EYES_MODE,
        }
    }),
  ],
};

myapp.ts

const { REACT_APP_LOGGER } = process.env;
console.log(REACT_APP_LOGGER === "LOGGER");

Answer 3

这是因为config文件中值的长度。我们可以使用.trim()解决这个问题。

if (process.env.NODE_ENV.trim() === 'development') {
    app.use(morgan('dev'));
}

Answer 4

我遇到了这个问题，但出于不同的原因，使用 Windows CMD。

set ENVIRONMENT="prd"

process.env.ENVIRONMENT === 'prd' // false
process.env.ENVIRONMENT === '"prd"' // true, the double quotes are in the value

所以在 Windows CMD 中声明变量的正确方法是

set ENVIRONMENT=prd

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

4 个答案: