如何使用 dotenv 在 TypeScript 中访问 .env 文件变量？

Question

我正在尝试使用 .env 文件在 TypeScript React 项目中存储 API 键。我的 .env 文件位于项目的根目录中，我正在尝试通过 process.env.

从 src/index.tsx 访问它的变量

.env:

FOO=foo

src/index.tsx:

import * as dotenv from "dotenv";

console.log(dotenv.config()); // prints TypeError: fs.readFileSync is not a function
console.log(process.env.FOO); // prints undefined

看起来 dotenv.config() 抛出了一个错误，所以我认为这就是问题所在。只是不确定如何解决它。我试过将 .env 移动到 src 目录并将路径传递给函数，例如dotenv.config({ path: `${__dirname}/.env` }) 但仍然出现相同的错误。

dotenv 似乎是在 Node.js 项目中使用环境变量的最常见方式，但如果有更好的选择，我也有兴趣听听这些。

如有任何想法和想法，我们将不胜感激。

Answer 1

将环境变量重命名为 REACT_APP_FOO 并重新启动 react-scripts 似乎可以解决问题。它无需调用 dotenv.config() 即可工作。不太确定为什么会这样工作，所以我很想听听某人对此的见解。

Answer 2

您可以通过首先在项目根目录调用 require('dotenv').config() 来访问变量。然后你可以像 process.env.FOO.

这样使用它们

您必须考虑调用 process.env.FOO

如何使用 dotenv 在 TypeScript 中访问 .env 文件变量？

How to access .env file variables in TypeScript using dotenv?

node.js

reactjs

typescript

environment-variables

dotenv