使用类型记录的创建-反应应用程序:为什么npm-开始忽略我的.env.development文件

Question

我有一个反应18应用程序使用创建-反应-应用程序。我使用代码作为我的ide。根文件夹中有两个.env文件(而不是scr文件夹)。它们都持有相同的环境变量。

在我的.env文件中，变量的值设置为false：

REACT_APP_IS_CONSOLELOG=false

在我的.env.development文件中，变量的值设置为true：

REACT_APP_IS_CONSOLELOG=true

然后，我使用npm在一个新的终端中启动Visual代码中的应用程序。在我的*.tsx文件中，我将以下内容输出到控制台：

    console.log(process.env);
    console.log(process.env.REACT_APP_IS_CONSOLELOG);

关于第一项声明，我看到如下：

{NODE_ENV：‘开发’，PUBLIC_URL：''，WDS_SOCKET_HOST:未定义，WDS_SOCKET_PATH:未定义，WDS_SOCKET_PORT:未定义，…}

对于第二个陈述，我看到“假”。我期待着在第二次声明中看到“真实”。React是从我的".env“文件中读取环境变量，而不是从".env.development”文件读取环境变量。我做错了什么？当我在本地主机上运行应用程序时，我希望使用来自.env.development文件的环境变量，而不是来自.env文件的环境变量。

根据https://create-react-app.dev/docs/adding-custom-environment-variables/#adding-development-environment-variables-in-env的React文档，我的设置应该可以工作。

在文档中的链接之后，我看到了一条安装"dotenv“的指令，但它仍然不起作用。

这就是我的package.jason依赖项的样子：

  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.11.64",
    "@types/react": "^18.0.21",
    "@types/react-dom": "^18.0.6",
    "dotenv": "^16.0.3",
    "jest-editor-support": "^30.2.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-error-boundary": "^3.1.4",
    "react-query": "^3.39.2",
    "typescript": "^4.8.4",
    "uuid": "^9.0.0",
    "web-vitals": "^2.1.4"
  },

这就是我的package.json脚本的样子；在“开始”设置中，我将加载一个本地ssl证书，然后调用“”。

  "scripts": {
    "start": "set HTTPS=true&&set SSL_CRT_FILE=C:/Users/MyName/Documents/Certificates/cert.crt&&set SSL_KEY_FILE=C:/Users/MyName/Documents/Certificates/cert.key&&react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Answer 1

将“.env.development”添加到package.json中“脚本”设置中的“react”命令中。

“脚本”设置应该如下所示：

  "scripts": {
    "start": "set HTTPS=true&&set SSL_CRT_FILE=C:/Users/MyName/Documents/Certificates/cert.crt&&set SSL_KEY_FILE=C:/Users/MyName/Documents/Certificates/cert.key&&react-scripts start .env.development",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

从依赖项设置中删除“dotenv”，它是多余的。