【问题标题】：How to use Gatsby env variables in a mdx file?如何在 mdx 文件中使用 Gatsby 环境变量？
【发布时间】：2020-10-06 01:33:53
【问题描述】：

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

ex（在我的 mdx 文件中）：<div>{process.env.MyVariable.map(el=>(<div>{el}</div>))}</div>

错误：ReferenceError: process is not defined

我开始在这个tutorial 上添加盖茨比plugin env variables。我仔细检查了如何使用这个sandbox。我可以访问我的.js 文件中的变量，但不能访问我的.mdx 文件中的变量。

我错过了什么？这样做是不是最好的选择？

感谢您的帮助，

【问题讨论】：

您能提供您的代码或沙箱吗？不是你基于的那个。
我创建了一个github repository。我的 .env.development 是 .sample

标签： gatsby

【解决方案1】：

.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_VAR 或process.env.MY_OTHER_VAR。

但是，这些变量没有定义任何值，无论如何您都需要在.env.development 文件中设置它们。这是因为 Gatsby 默认只公开所有以GATSBY_ 为前缀的变量。请查看Gatsby documentation about .env files 了解更多信息。

回答你问题的另一部分，一旦你设置（在你的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"]
      },
    },
  ],
}

【讨论】：

感谢您的回答，我明白了。但是，正如您在我的github repository 上看到的那样，我的 mdx 文件中仍然不允许使用变量...
您需要将其命名为.env.development。您可以更改命名，但默认情况下，它连接 .env.ENV_NAME。如果要命名为.env.sample，则需要更改package.json 中的运行脚本。默认环境为.env.developemt 和.env.production。
当然。这是因为 .env* 在我的 .gitignore 中。所以我称之为 .sample 来推动它。我会更新它以防止混淆
你的.env.development里面有一个叫ENDPOINTS的变量吗？
感谢您的帮助。现在，我让问题开放以获得其他想法。

【解决方案2】：

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

1。创建 JS 配置包装器：

// site-config.js

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

2。在 MDX 文件中使用此中间配置

// 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>.

【讨论】：