使用 '.env' 对于 React - JavaScript 的问题

在 React - JavaScript 中，我们经常需要使用敏感信息，例如 API 密钥或 DB 连接字符串。为了安全起见，我们不应将这些信息存储在代码或公共存储库中。这是我们需要 '.env' 文件的原因。 '.env' 文件是一个包含敏感信息的文件，该文件不包含在代码存储库中。当我们需要使用这些信息时，我们可以在代码中调用这些变量。

然而，React - JavaScript 的 '.env' 文件使用方法可能会让人感到困惑。这是因为 React - JavaScript 不会默认识别 '.env' 文件。因此，在使用 '.env' 文件时，我们需要先将其转化为环境变量。这意味着我们需要使用第三方库 dotenv 或手动设置环境变量来访问 '.env' 文件中的变量。

安装dotenv

为了将本地 '.env' 文件中的变量注入到您的应用程序中，您需要先安装 dotenv 库。您可以通过运行以下命令进行安装：

npm install dotenv

使用

一旦您安装了 dotenv，您可以在您的代码中使用以下代码段来加载环境变量：

const dotenv = require('dotenv');
dotenv.config();

在您运行应用程序之前，记得将您的敏感信息添加到本地 '.env' 文件中。下面是一个包含数据库连接字符串和端口号的示例:

DB_CONNECTION_STRING = mongodb://localhost:27017/mydatabase
PORT = 3000

您可以在应用程序中使用以下代码段来访问 .env 文件中的环境变量：

const dbConnection = process.env.DB_CONNECTION_STRING;
const port = process.env.PORT;

注意，在使用 process.env 访问环境变量时，您需要使用大写字母。

结论

使用 '.env' 文件可以确保您的敏感信息不会出现在代码仓库中，从而提高了您应用程序的安全性。但是，您需要添加一些额外的步骤来将 '.env' 文件作为环境变量加载到代码中。如果您想要更好地保护敏感信息， 'dotenv' 库是您值得信赖的选择。