Как использовать переменные env Gatsby в файле MDX?

Question

Я пытаюсь отобразить переменные env Gatsby в md файле. Я проверил в Интернете, как лучше всего это сделать, и использование JSX в файле md (с помощью плагина mdx) кажется лучшим вариантом. Например, я хочу отобразить массив, полученный из переменных env, чтобы отобразить все значения. Однако получить доступ к каким-либо переменным невозможно.

ex (в моем mdx файле): <div>{process.env.MyVariable.map(el=>(<div>{el}</div>))}</div>

ошибка: ReferenceError: process is not defined

Я начал добавлять Gatsby переменные env плагина в этом учебнике . Я дважды проверил, как это сделать с помощью этой песочницы . Я могу получить доступ к своим переменным внутри моих файлов .js, но не к моим файлам .mdx.

Что мне не хватает? Это лучший вариант сделать это правильно?

Спасибо за вашу помощь,

Answer 1

.env переменные - это строки, поэтому вы не можете oop их и отображать то, что находится внутри каждой позиции, как массив. Вы можете установить что-то подобное в вашем .env.development:

MESSAGES="message1, messages2, messages"

Однако это будет одна единственная строка. Вам нужно будет разбить их на 3-позиционный массив с помощью let dotEnvArray = process.env.MESSAGES.split(',').

Если вы используете 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 о .env файлах для получения дополнительной информации.

Отвечая на другую часть вашего вопроса, как только вы зададите (в вашем 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"]
      },
    },
  ],
}