Javascript 在gatsby react应用程序中插入环境变量客户端

我使用Gatsby作为静态站点生成器，并使用Netlify进行部署

Netlify允许您在其UI后端中设置环境变量

我在Netlify后端设置了一些环境变量，以便能够将订阅者发布到邮件列表中

DATA_NO = 'XXXX'
LIST_ID = '123456'
API_KEY = 'XXXXXXXXXXXXXXXXXXXXXXXXXX'

在我的src文件中，有一个组件响应

onSubmit

事件，并构造一个URL来发布新订阅者

（

axios

用作发送HTTP请求等的包）

我已经在

src/config/config.js

中设置了一个单独的

config.js

文件来组织和验证我的

env-vars

（谢谢@Baboo）。它看起来像：

export const MC\u API\u KEY=process.env.GATSBY\u MC\u API\u KEY；
export const MC_DATA_NO=process.env.GATSBY_MC_DATA_NO；
export const MC_academy_ID=process.env.GATSBY_MC_academy_ID；
常量环境变量=[
{name:“MC_API_KEY”，值：MC_API_KEY}，
{name:“MC_DATA_NO”，值：MC_DATA_NO}，
{name:“MC_观众ID”，值：MC_观众ID}
]
导出常量checkenvArs=（）=>{
const envVarsNotLoaded=envVars.filter（（envVar）=>envVar.value！==未定义）；
如果（envVarsNotLoaded.length>0）{
抛出新错误（`无法加载环境变量${envVarsNotLoaded.join（“，”）}`）；
}
}
checkEnvVars（）

---

但是，当我运行

gatsby develope

时，抛出了“无法加载环境变量”错误。

您这样做是正确的

你需要做的就是在你的环境变量前面加上

GATSBY\uuu

，GATSBY会自动加载它们。然后在代码中调用它们：

const creds = 'anystring:'+ process.env.GATSBY_API_KEY
let URL = 'https://'+ process.env.GATSBY_DATA_NO +'.api.example.com/3.0'
tURL += '/lists/'+ process.env.GATSBY_LIST_ID +'/members'

确保使用整个字符串

process.env.GATSBY\u LIST\u ID

而不是

process.env[GATSBY\u LIST\u ID]

，因为对象

process.env

是

未定义的

局部
确保创建到
.env
文件、
.env.development
和
.env.production
。前者在运行
gatsby develope
时使用，后者在运行
gatsby build
时使用

您可能已经知道不应该提交这些文件

Netlify
在Netlify上的部署管道中添加相同的环境变量。这是你的电话号码。这样，Netlify可以在部署时构建您的webiste

改进
不要直接引用环境变量，而是创建一个加载环境变量的文件，如果其中一个无法检索，则抛出一个错误。这样，当加载失败时，您将被注意到，并节省调试时间

例如：

// config.js
export const API_KEY = process.env.GATSBY_API_KEY;
export const DATA_NO = process.env.GATSBY_DATA_NO ;

const envVars = [
    {name: "API_KEY", value: API_KEY},
    {name: "DATA_NO", value: DATA_NO},
]

const checkEnvVars = () => {
    const envVarsNotLoaded = envVars.filter(isUndefined);
    if (envVarsNotLoaded.length > 0) {
        throw new Error(`Could not load env vars ${envVarsNotLoaded.join(",")}`);
    }
}

const isUndefined = (envVar) => typeof envVar.value === "undefined";

// component.js
import React, { useState } from "react"
import axios from 'axios'
// Import environment variables
import { API_KEY, DATA_NO } from "./config"

const Form = () => {
    // ...

    const [userEmail, setState] = useState({'email_address': ''})

    const creds = 'anystring:'+ API_KEY
    let URL = 'https://'+ DATA_NO +'.api.example.com/3.0'

非常好的答案，谢谢你的改进建议-我总是喜欢学习更好的编码方法！我创建了两个
.env
文件，并在其中放置了相同的全局变量，所有变量都以
GATSBY\uu
前缀开头（例如：
GATSBY\u API\u KEY=xxxxxxxxxxxxx
然后在
src/config/config.js
中创建了一个
config.js
文件（这是否需要在项目路线中？）。我按照您的建议导出变量，例如：
export const API_KEY=process.env.GATSBY_API_KEY
。我像您的示例中那样构建了对象，并且正在使用您的调试函数-它正在工作！我仍然无法加载变量？很高兴听到这个消息！当您说您仍然无法加载变量时，您的意思是在Netlify上的构建期间吗？我没有得到past
gatsby develop
在我的本地环境中。在我的
config.js
文件中，我最后调用了
checkenvars
函数，它一直抛出一个错误。你是否尝试过清理gatsby在根文件夹中创建的
.cache
文件夹？我在代码中犯了一个错误，检查环境变量是否未定义。我更新了我的你可以用更新后的代码进行测试
const creds = 'anystring:'+ process.env.GATSBY_API_KEY
let URL = 'https://'+ process.env.GATSBY_DATA_NO +'.api.example.com/3.0'
tURL += '/lists/'+ process.env.GATSBY_LIST_ID +'/members'

// config.js
export const API_KEY = process.env.GATSBY_API_KEY;
export const DATA_NO = process.env.GATSBY_DATA_NO ;

const envVars = [
    {name: "API_KEY", value: API_KEY},
    {name: "DATA_NO", value: DATA_NO},
]

const checkEnvVars = () => {
    const envVarsNotLoaded = envVars.filter(isUndefined);
    if (envVarsNotLoaded.length > 0) {
        throw new Error(`Could not load env vars ${envVarsNotLoaded.join(",")}`);
    }
}

const isUndefined = (envVar) => typeof envVar.value === "undefined";

// component.js
import React, { useState } from "react"
import axios from 'axios'
// Import environment variables
import { API_KEY, DATA_NO } from "./config"

const Form = () => {
    // ...

    const [userEmail, setState] = useState({'email_address': ''})

    const creds = 'anystring:'+ API_KEY
    let URL = 'https://'+ DATA_NO +'.api.example.com/3.0'