是否可以在 React 项目中使用 dotenv? [英] Is it possible to use dotenv in a react project?

问题描述

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

I am trying to set some environment variables (for making API calls to dev/prod endpoints, keys depending on dev/prod, etc.) and I'm wondering if using dotenv will work.

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

I've installed dotenv, and I am using webpack.

我的 webpack 入口是 main.js，所以在这个文件中我放了 require('dotenv').config()

My webpack entry is main.js, so in this file I've put require('dotenv').config()

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

Then, in my webpack config, I've put this:

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

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

However, it is still undefined. How can I do this correctly?

推荐答案

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

The short answer is no. A browser cannot access local or server environment variables so dotenv has nothing to look for. Instead, you specify ordinary variables in your React application, usually in a settings module.

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

Webpack can be made to take environment variables from the build machine and bake them into your settings files. However, it works be actually replacing strings at build-time, not run-time. So each build of your application will have the values hard-coded into it. These values would then be accessible through the process.env object.

var nodeEnv = process.env.NODE_ENV;

此外，您可以将 DefinePlugin 用于 webpack，它允许您根据构建目标(dev、prod 等)明确指定不同的值.请注意，您必须JSON.stringify 传入它的所有值.

Additionally, you could use the DefinePlugin for webpack which lets you explicitly specify different values depending on your build target (dev, prod, etc.). Note that you have to JSON.stringify all values passed into it.

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

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

This is fine for any sort of public details but should never be used for any sort of private keys, passwords or API secrets. This is because any values baked in are publicly accessible and could be used maliciously if they contain sensitive details. For those sorts of things, you need to write some server-side code and build a simple API which can authenticate with the 3rd party API using the secrets, then pass the relevant details along to your client-side application. Your server-side API acts as an intermediary, protecting your secrets while still getting the data you need.

这篇关于是否可以在 React 项目中使用 dotenv?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！