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

Question

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

但是,它仍然未定义.我该怎么做才能正确？

Answer 1

很抱歉收到旧问题，但
react-scripts实际上在后台使用了dotenv库。

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

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

.env

REACT_APP_BASE_URL=http://localhost:3000

App.js

const BASE_URL = process.env.REACT_APP_BASE_URL;

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

Answer 2

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

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

var nodeEnv = process.env.NODE_ENV;

此外,您可以使用DefinePluginfor webpack,它允许您根据构建目标(dev,prod等)显式指定不同的值.请注意,您必须将JSON.stringify所有值传递给它.

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

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

Answer 3

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

1. 与上面的答案类似的方法。您导入dotenv您的 webpack 配置并使用 DefinePlugin 将变量传递给您的 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;
   };
   

当您为特定环境构建应用程序时，只需将环境名称传递给 webpack：

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

Answer 4

1. 创建 .env 文件

   API_URL=http://localhost:8000
   

2. 安装 dotenv npm 包

   $ npm install --save-dev dotenv
   

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

4. 很好！享受 React 和 dotenv。