在反应项目中可以使用 dotenv 吗？

我正在尝试设置一些环境变量(用于对 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
])

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

159840 次浏览
小开
最佳答案

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

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

var nodeEnv = process.env.NODE_ENV;

此外，您可以使用 Webpack 的 DefinePlugin，它允许您根据构建目标(dev、 prod 等)显式地指定不同的值。请注意，您必须将所有传递给它的值都设置为 JSON.stringify。

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

这是罚款的任何类型的公开细节，但应 永远不要使用任何种类的私人密钥、密码或 API 秘密。这是因为嵌入的任何值都是可公开访问的，如果它们包含敏感细节，就可能被恶意使用。对于这类事情，您需要编写一些服务器端代码并构建一个简单的 API，该 API 可以使用秘密与第三方 API 进行身份验证，然后将相关细节传递给客户端应用程序。您的服务器端 API 充当中介，在获得所需数据的同时保护您的机密。

小开

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

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

  2. 使用 dotenv-webpack插件。我个人觉得很方便。假设有以下环境: dev、 staging和 prod。你创造。每个环境的 env 文件(.env.dev、 .env.staging等)。在 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;
};

When you build the app for a particular environment, just pass the environment name to webpack:

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

不好意思，我又问了一个老问题
Response-script 实际上在底层使用了 Dotenv库。

使用 response-script@0.2.3或更高版本，您可以这样处理环境变量:

  1. 在项目的根目录中创建 。 env文件
  2. 设置从 REACT_APP_开始的环境变量
  3. 通过 REACT _ APP _...在组件中访问它

。 env

REACT_APP_BASE_URL=http://localhost:3000

App.js

const BASE_URL = process.env.REACT_APP_BASE_URL;

有关详细信息，请参阅 医生。

小开
  1. 创建. env 文件 
    API_URL=http://localhost:8000
  2. 安装 dotenv npm 包 
    $ npm install --save-dev dotenv
  3. 配置 webpack 以添加 env 变量 
    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. 干得好! 享受反应和 Dotenv。
小开

我只是在源文件夹中创建了一个 config.json:

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

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

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

并使用 config.api _ url


提交答案