在 React(CRA) 中使用 .env 和 [Runtime] 中的 Typescript答案

【问题标题】：Usage .env in React(CRA) with Typescript in [Runtime]在 React(CRA) 中使用 .env 和 [Runtime] 中的 Typescript
【发布时间】：2021-11-06 21:23:08
【问题描述】：

我想在带有 Typescript 的 React 项目 CRA-4.0.3 中使用环境变量。

我确实尝试了很多方法（here、here、here 和其他一些方法）使用 dotenv、webpack 和来自不同来源的建议，但我仍然不确定。

但是，我仍然不确定，有人能指出我正确的方向吗？我已经花费了合理的时间。

更新：我忘了提到我希望它们在运行时可用，因此，我可以将它们用于 E2E 测试，其中 Playwright 和 Jest 作为运行器。

我在 /main/e2e/tests/file.spec.ts 这样的结构中使用它们

.env

REACT_APP_ADMINUSER=用户 REACT_APP_ADMINPASS=通过

提前致谢

【问题讨论】：

你的 .env 是什么样的？（请隐藏敏感信息）
另外，请添加您访问环境变量的方式
如果您不使用 Create React App，请在此处发布带有 DefinePlugin 设置的 webpack 配置部分。 webpack.js.org/plugins/define-plugin 这个插件允许你解析 React 代码中的变量。您应该定义要在此 webpack 设置中传递的变量。 Create React App 从头开始提供 DefinePlugin，因此它应该可以开箱即用。如果您使用 CRA，请确保您在根目录（除了 package.json）中定义了 .env 文件。示例：A=1 (.env)、console.log(process.env.A) (App.jsx)
1. [Ryan] 使用 .env 2 更新了描述。[Mohit] 我有一个类似这样的结构 /main/e2e/tests/file.spec.ts 3。[Max] 我确实使用 Create React App

标签： node.js typescript environment-variables

【解决方案1】：

如果您按照 here 的描述使用 CRA，您只需在项目的根目录中创建一个 .env 文件，并使用类似 REACT_APP_NOT_SECRET_CODE=abcdef 的内容填充它。

然后在您的应用程序中，您可以通过 using 来使用该变量

console.log(process.env.REACT_APP_NOT_SECRET_CODE)

你不需要在 CRA 自带的默认配置中添加 Webpack 或其他模块

更新：我看到了问题的编辑。让运行时暴露的环境变量有很大的不同，因为默认情况下它们是在构建时注入的。

我发现这个模块https://github.com/kHRISl33t/runtime-env-cra 似乎使in the offical doc 描述的方法更容易在运行时拥有变量

【讨论】：

是的，我确实遵循了，但仍然未定义
谢谢，我会试试你的建议