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

我想设置一些环境变量（用于API调用dev/prod端点，键取决于dev/prod等），我想知道如果使用dotenv将工作。是否可以在反应项目中使用dotenv？

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

我的WebPack项main.js，所以在这个文件我已经把require('dotenv').config()

然后，在我的WebPack的配置，我已经把这个：

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

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

来源

2017-02-11 user1354934

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

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

var nodeEnv = process.env.NODE_ENV;

此外，您可以使用DefinePlugin为的WebPack它可以让你明确指定不同的值取决于您的构建目标（DEV，督促等）。请注意，您必须将JSON.stringify所有值传递给它。

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

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

来源

2017-02-11 23:53:28 Soviut

谢谢。我怎样才能做到这一点API密钥的东西？例如，Google地图API密钥。我的意思是，我认为只有一个域名被列入白名单是可以的。但无论如何只是好奇。 TY！ – user1354934

我已经添加了解释如何在我的答案中做到这一点。简短的答案是编写一个服务器端应用程序，您的客户端应用程序可以与之通话，并在其中执行所有私密/秘密内容。 – Soviut

谢谢。对不起，如果这听起来很愚蠢，但你的意思是像我现在所做的一样 - 我的后端（快速应用程序）有一个/ api-auth端点，它通过JWT发送，然后存储在LS中。我使用它，如果它的有效（否则刷新它），以便客户端需要担心获取一个有效的令牌来访问任何API响应/数据。 – user1354934

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

回答

相关问题