如何在mdx文件中使用Gatsby env变量？

我试图在md文件中显示Gatsby环境变量。我在网上查了一下最好的方法是什么，在md文件中使用JSX（借助mdx插件）似乎是最好的选择。例如，我想映射一个来自env变量的数组，以便显示所有值。但是，不可能访问任何变量

ex（在我的mdx文件中）：

{process.env.MyVariable.map（el=>（{el}））}

错误：

ReferenceError:未定义流程

我开始在这上面加上盖茨比。我仔细检查了怎么用这个。我可以访问

.js

文件中的变量，但不能访问

.mdx

文件中的变量

我错过了什么？这是最好的选择吗

---

感谢您的帮助，

.env

变量是字符串，因此，您不能循环它们并像数组一样显示每个位置中的内容。您可以在

.env.development

中设置如下内容：

MESSAGES="message1, messages2, messages"

但是，这将是一个字符串。您需要通过

let dotEnvArray=process.env.MESSAGES.split（'，'）

将它们拆分为一个3位数组

如果您使用try:

MESSAGES=[“message1”、“messages2”、“messages3”]

它将被视为

MESSAGES=“['message1'、'message2'、'message3']”

你在这里看到的是：

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-env-variables`,
      options: {
        whitelist: ["MY_VAR", "MY_OTHER_VAR"]
      },
    },
  ],
}

是一个隔离的.env变量数组。根据该插件的文档：

这将使

MY_VAR

和

MY_OTHER_VAR

在应用程序运行时可用 通过访问

process.env.MY\u VAR

或

process.env.MY\u OTHER\u VAR

但是，这些变量没有定义任何值，您仍然需要在

.env.development

文件中设置它们。这是因为Gatsby默认情况下只公开所有前缀为

Gatsby\uuu

的变量。有关更多信息，请参阅

回答问题的另一部分，一旦设置（在

gatsby config.js

中）：

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

默认情况下，运行

gatsby develop

gatsby将获取

.env.development

变量，并将它们暴露在

process.env.VAR_NAME

下，始终将它们隔离并视为单个字符串，就像CodeSandbox显示的那样

要在存储库中实现所需的功能，只需在白名单中添加环境变量

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-env-variables`,
      options: {
        whitelist: ["ENDPOINTS"]
      },
    },
  ],
}

---

目前，我只能通过中间的JS配置来实现它

1.创建JS配置包装器： 2.在MDX文件中使用此中间配置

//pages/index.mdx
---
标题：入门
描述：如何开始？
---
从“盖茨比”导入{Link}；
从“../../../site config”导入{siteConfig}；
这是我们的。

你能提供你的代码或沙盒吗？不是你所基于的。我创建了一个.My.env.development is.sample谢谢你的回答，我明白了你的意思。但是，正如你在My上看到的，变量仍然不允许出现在我的mdx文件中…你需要将它命名为

.env.development

。你可以更改命名，但默认情况下，它是连接的

.env.env_NAME

。如果您想将其命名为

.env.sample

，您将需要更改

package.json

中正在运行的脚本。默认环境是

.env.developemt

和

.env.production

。当然，这是因为.env*在我的.gitignore中。所以我将其命名为.sample来推动它。我将其更新为pre消除困惑您的

.env.development

中是否有一个名为

ENDPOINTS

的变量？谢谢您的帮助。现在，我打开这个问题来了解其他想法。

// site-config.js

export const siteConfig = {
  siteUrl: process.env.GATSBY_SITE_URL,
  dashboardUrl: process.env.GATSBY_DASHBOARD_URL,
};

// pages/index.mdx
 
---
title: Getting started
description: How to get started?
---
import { Link } from 'gatsby';
import { siteConfig } from '../../../site-config';


This is our <a href={siteConfig.dashboardUrl}>proxyly.io Dashboard</a>.