我可以访问另一个文件中的 React 环境变量吗？

Question

我正在处理一个项目，并且我使用了 Amazon Cognito 服务进行身份验证。现在，我有一个文件，其中定义了用户池，并且对于那些用户池配置，我使用了环境变量（带有前缀 REACT_APP_）但是当我将这个包含用户池的文件导入另一个文件时，它给了我一个错误，它不能获取那些环境变量。我提供了下面的代码以便更好地理解。

用户池.js

import { CognitoUserPool } from 'amazon-cognito-identity-js'

// This line below is Printing the Env Variable Correctly
// console.log(process.env.REACT_APP_USERPOOL_ID_USER)

const poolData_user = {
    UserPoolId: process.env.REACT_APP_USERPOOL_ID_USER,
    ClientId: process.env.REACT_APP_CLIENT_ID_USER
}

const poolData_admin = {
    UserPoolId: process.env.REACT_APP_USERPOOL_ID_ADMIN,
    ClientId: process.env.REACT_APP_CLIENT_ID_ADMIN
}

export const userPool = CognitoUserPool(poolData_user)
export const adminPool = CognitoUserPool(poolData_admin)

SignUpPage.js

import { userPool, adminPool } from './Userpool'

const SignUpPage = () => {

    // This method below will be invoked when user clicks on a Button
    const handleButtonClick = () => {
          userPool.singUp('someEmail','somePassword',[],null,(err,result)=>{
                if(err) 
                    console.error(err)
                else 
                    console.log(result)

          })
    }

    return ({/* some JSX which has a button*/})

}

但是当我在SignUpPage.js 中使用该按钮时，它给了我如下所示的错误。

即使我在文件中使用dotenv 模块，也会出现相同的错误，如下所示。

用户池.js

此文件将保持如上所示。

SignUpPage.js

import dotenv from 'dotenv'
import { userPool, adminPool } from './Userpool'

dotenv.config()

const SignUpPage = () => {

    // This method below will be invoked when user clicks on a Button
    const handleButtonClick = () => {
          userPool.singUp('someEmail','somePassword',[],null,(err,result)=>{
                if(err) 
                    console.error(err)
                else 
                    console.log(result)

          })
    }

    return ({/* some JSX which has a button*/})

}

Answer 1

运行项目时可能需要使用这样的环境变量（例如 Bash）：

REACT_APP_USERPOOL_ID_USER=userId REACT_APP_CLIENT_ID_USER=clientId command_to_start

但是，我想向您推荐一些东西，它几乎在我参与的每个项目中都使用过 - dotenv。这样，您可以避免遇到的问题，并且可以更轻松地使用环境变量。

此包允许您拥有一个名为.env 的文件，您可以在其中定义可以通过process.env 访问的环境变量。这有助于其他开发人员通过将所有环境变量放在一个位置来了解您的项目需要哪些环境变量。

它适用于所有环境，例如开发、登台和生产，因为您可以为每个环境使用一个版本的 .env 文件。