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

Question

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

Userpool.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 模块，也会出现相同的错误，如下所示。

Userpool.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 文件。

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

Can I access React Env Variables in Another File?

environment-variables

amazon-web-services

reactjs

amazon-cognito