Question

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

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

我的网络包条目为main.js，因此在此文件中我已require('dotenv').config()

然后，在我的webpack配置中，我已经说出了这个：

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

但是，它仍未定义。我该怎么做才能正确？

Answer 1

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

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

var nodeEnv = process.env.NODE_ENV;

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

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

这适用于任何类型的公共详细信息，但永远不会用于任何类型的私钥，密码或API机密。这是因为烘焙的任何值都是公开可访问的，并且如果它们包含敏感细节，则可能被恶意使用。对于那些类型的东西，你需要编写一些服务器端代码并构建一个简单的API，它可以使用秘密通过第三方API进行身份验证，然后将相关详细信息传递给客户端应用程序。您的服务器端API充当中间人，保护您的秘密，同时仍然获得所需的数据。

Answer 2

很抱歉收到旧问题，但是
反应脚本实际上是在后台使用 dotenv 库。

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

创建 .env 文件
从 REACT_APP _ 开始设置环境变量

process.env.REACT_APP _...

进行访问

.env

REACT_APP_BASE_URL=http://localhost:3000

App.js

const BASE_URL = process.env.REACT_APP_BASE_URL;

有关更多详细信息，请参见docs。

Answer 3

创建.env文件
```
API_URL=http://localhost:8000
```
安装dotenv npm软件包
```
$ npm install --save-dev dotenv
```

配置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)
  ]
};

干得好！享受React和dotenv。

Answer 4

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

与以上答案类似的方法。您在Webpack配置中导入dotenv并使用DefinePlugin将变量传递到React应用。 in this blog可以找到关于如何根据当前配置注入.env文件的更完整指南。

使用dotenv-webpack plugin。我个人觉得很方便。假设您有以下环境：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 5

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

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

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

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

并使用了 config.api_url

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

5 个答案: