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

小编典典

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

reactjs

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

但是，它仍未定义。如何正确执行此操作？

阅读 1219

2020-07-22

共1个答案

小编典典

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

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

var nodeEnv = process.env.NODE_ENV;

另外，您可以使用DefinePluginfor
webpack，它使您可以根据构建目标（开发，生产等）显式指定不同的值。请注意，您必须将JSON.stringify所有值传递给它。

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

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

2020-07-22