是否可以在 React 项目中使用 dotenv？

Question

我正在尝试设置一些环境变量（用于对 dev/prod 端点进行 API 调用，密钥取决于 dev/prod 等），我想知道使用 dotenv 是否可行。

我已经安装了 dotenv，我正在使用 webpack。

我的 webpack 条目是main.js ，所以在这个文件中我把require('dotenv').config()

然后，在我的 webpack 配置中，我把这个：

  new webpack.EnvironmentPlugin([
    'NODE_ENV',
    '__DEV_BASE_URL__'  //base url for dev api endpoints
  ])

然而，它仍然是未定义的。 我怎样才能正确地做到这一点？

Answer 1

很抱歉提出旧问题，但是
react-scripts实际上在底层使用了dotenv库。

使用 react-scripts@0.2.3 及更高版本，您可以通过以下方式使用环境变量：

1. 在项目根目录创建.env文件
2. 在那里设置以REACT_APP_开头的环境变量
3. 通过process.env.REACT_APP_...在组件中访问它

.env

REACT_APP_BASE_URL=http://localhost:3000

应用程序.js

const BASE_URL = process.env.REACT_APP_BASE_URL;

有关更多详细信息，请参阅文档。

Answer 2

最简洁的答案是不。 浏览器无法访问本地或服务器环境变量，因此 dotenv 无需查找。 相反，您在 React 应用程序中指定普通变量，通常在设置模块中。

可以让 Webpack 从构建机器中获取环境变量并将它们烘焙到您的设置文件中。 但是，它实际上是在构建时而不是运行时替换字符串。 因此，您的应用程序的每个构建都会将值硬编码到其中。 然后可以通过process.env对象访问这些值。

var nodeEnv = process.env.NODE_ENV;

此外，您可以使用DefinePlugin的 DefinePlugin，它允许您根据构建目标（dev、prod 等）明确指定不同的值。 请注意，您必须JSON.stringify传递给它的所有值。

new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
}),

这适用于任何类型的公共细节，但绝不能用于任何类型的私钥、密码或 API 机密。 这是因为任何烘焙的值都是可公开访问的，如果它们包含敏感细节，则可能被恶意使用。 对于这些类型的事情，您需要编写一些服务器端代码并​​构建一个简单的 API，该 API 可以使用机密与 3rd 方 API 进行身份验证，然后将相关详细信息传递给您的客户端应用程序。 您的服务器端 API 充当中介，保护您的秘密，同时仍能获取您需要的数据。

Answer 3

实际上，您可以在带有 webpack 的 React 应用程序中使用 dotenv。 此外，有几种方法可以做到这一点。 但是，请记住，它仍然是构建时配置。

1. 与上面的答案类似的方法。 您在 webpack 配置中导入dotenv并使用 DefinePlugin 将变量传递给您的 React 应用程序。 可以在此博客中找到有关如何根据当前配置注入.env文件的更完整指南。

2. 使用dotenv-webpack插件。 个人觉得真的很方便。 假设您有环境： dev 、 staging和prod 。 您为每个环境（ .env.dev 、 .env.staging等）创建 .env 文件。 在你的 webpack 配置中，你需要为环境选择一个正确的文件：

    const Dotenv = require('dotenv-webpack'); module.exports = (env, argv) => { const envPath = env.ENVIRONMENT ? `.env.${env.ENVIRONMENT}` : '.env'; const config = { ... plugins: [ new Dotenv({ path: envPath }) ] }; return config; };

当您为特定环境构建应用程序时，只需将环境名称传递给 webpack：

webpack --config webpack.config.js --env.ENVIRONMENT=dev

Answer 4

1. 创建 .env 文件

   API_URL=http://localhost:8000

2. 安装 dotenv npm 包

   $ npm install --save-dev dotenv

3. 配置 webpack 添加环境变量

   const webpack = require('webpack'); const dotenv = require('dotenv'); module.exports = () => { // call dotenv and it will return an Object with a parsed key const env = dotenv.config().parsed; // reduce it to a nice object, the same as before const envKeys = Object.keys(env).reduce((prev, next) => { prev[`process.env.${next}`] = JSON.stringify(env[next]); return prev; }, {}); return { plugins: [ new webpack.DefinePlugin(envKeys) ] };

4. 做得好！ 享受 React 和 dotenv。

Answer 5

我刚刚在源文件夹中创建了一个 config.json：

{
    "api_url" : "http://localhost:8080/"
}

然后在我需要它的文件中要求它

const config = require('./config.json');

并使用了 config.api_url