时间戳

首页 > 解决方案 > 在帮助文件中使用环境变量（盖茨比）

javascript - 在帮助文件中使用环境变量（盖茨比）

问题描述

我有一个 Gatsby 项目，看起来有点像这样：

文件结构

- src
  - pages
    - Homepage.js
  - helpers
    - customFetch.js

主页.js

import React, { useEffect } from 'react'
import customFetch from '../helpers/customFetch'

export default function Homepage() {
  useEffect(()=>{
    setInterval(() => {
      customFetch('/my-endpoint').then((result)=> {
        // Do something...
      })
    }, 5000);
  }, [])

  return (
    <div>
      Homepage content here
    </div>
  )
}

customFetch.js

export default function customFetch(path) {
  const apiURL = 'https://api.mysite.com'

  // Do something fancy here...

  return fetch(`${apiURL}${path}`)
}

我想做的是apiURL从.env.*文件中获取而不是对其进行硬编码。我怎么能像盖茨比那样做呢？谢谢！

PS .：我知道在页面内执行此操作很简单（https://www.gatsbyjs.org/docs/environment-variables/），但这与我想要做的有点不同。

标签： javascriptreactjsgatsby

解决方案

首先，您需要在您的build和develop命令中设置您的环境，如下所示（在您的 中package.json）：

"build": "GATSBY_ACTIVE_ENV=yourEnvironment gatsby build",
"develop": "GATSBY_ACTIVE_ENV=yourEnvironment gatsby develop",

上面的代码片段将从.env.yourEnvironment文件中获取配置。然后，您需要创建环境文件并定义所需的变量，例如 ( .env.yourEnvironment)：

API_URL=https://api.mysite.com

然后，在您的gatsby-config.js（外部module.exports）中，您需要需要该环境文件：

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

根据Gatsby 文档，这是因为：

您在 .env.* 文件中定义的项目环境变量不会立即在您的 Node.js 脚本中可用。要使用这些变量，请使用 NPM 包 dotenv 检查活动的 .env.* 文件并附加这些值。dotenv 已经是 Gatsby 的依赖项，因此您可以在 gatsby-config.js 或 gatsby-node.js 中像这样要求它：

最后一步是使用以下方法在组件中获取变量：

  const apiURL = process.env.API_URL

在你的情况下：

export default function customFetch(path) {
  const apiURL = process.env.API_URL

  // Do something fancy here...

  return fetch(`${apiURL}${path}`)
}

例如，这允许您分离逻辑、令牌和环境变量以实现多站点（多域）项目。

推荐阅读