如何在自行创建的JavaScript文件中使用环境变量或操作系统变量

问题描述

我在<project_root>/static文件夹下创建了一个helpers.js

在此JS文件中，我有需要访问环境/ OS变量的方法。

async function saveRegistration(pushSubscriptionObject) {

  let url = "";

  try {

    url = `${process.env.GATSBY_FUNCTION_URL_BASE}${process.env.GATSBY_FUNCTION_UPDATE_SUBSCRIPTION}`;

    console.log("using netlify config: ",url);

    console.log("--------updateSub() url--------",url);

  } catch (ex) {

    console.log("saveReg() catch block:",JSON.stringify(ex));

    return false;

  }

}

这是我的.env和.env.development（是的，它们是相同的，因为我正在测试什么可以使env变量起作用）：

GATSBY_FUNCTION_URL_BASE =http://localhost:34567/
GATSBY_FUNCTION_UPDATE_SUBSCRIPTION =updateSubscription

NETLIFY_FUNCTION_URL_BASE =http://localhost:34567/
NETLIFY_FUNCTION_ADD_SUBSCRIPTION =addSubscription
NETLIFY_FUNCTION_UPDATE_SUBSCRIPTION =updateSubscription

这是我的gatsby-config.js：

module.exports = {

  siteMetadata: {

    title: `Winston Fan's Blog`,description:

      ".....",},plugins: [

    "gatsby-plugin-react-helmet","gatsby-plugin-sass",{

      // keep as first gatsby-source-filesystem plugin for gatsby image support

      resolve: "gatsby-source-filesystem",options: {

        path: `${__dirname}/static/img`,name: "uploads",{

      resolve: "gatsby-source-filesystem",options: {

        path: `${__dirname}/src/pages`,name: "pages",options: {

        path: `${__dirname}/src/img`,name: "images",{

      resolve: `gatsby-plugin-env-variables`,options: {

        allowList: ["NETLIFY_FUNCTION_URL_BASE","NETLIFY_FUNCTION_ADD_SUBSCRIPTION","NETLIFY_FUNCTION_UPDATE_SUBSCRIPTION"]

      },"gatsby-plugin-sharp","gatsby-transformer-sharp",{

      resolve: "gatsby-transformer-remark",options: {

        plugins: [

          {

            resolve: "gatsby-remark-relative-images",options: {

              name: "uploads",plugins: [

                {

                  resolve: "gatsby-remark-images",options: {

                    // It's important to specify the maxWidth (in pixels) of

                    // the content container as this plugin uses this as the

                    // base for generating different widths of each image.

                    maxWidth: 2048,}

              ]

            },{

            resolve: "gatsby-remark-copy-linked-files",options: {

              destinationDir: "static",],{

      resolve: "gatsby-plugin-purgecss",// purges all unused/unreferenced css rules

      options: {

        develop: true,// Activates purging in npm run develop

        purgeOnly: ["/all.sass"],// applies purging only on the bulma css file

      },// must be after other CSS plugins

    {

      resolve: `gatsby-plugin-manifest`,options: {

        name: `AskWinston`,short_name: `heyWinston`,start_url: `/`,background_color: `#FFF`,theme_color: `#FAE042`,display: `standalone`,icon: `src/img/wf-logo512.png`,{

      resolve: `gatsby-plugin-offline`,options: {

        appendScript: `src/sw.js`,{

      resolve: "gatsby-plugin-netlify-cms",options: {

        modulePath: `${__dirname}/src/cms/cms.js`,"gatsby-plugin-netlify" // make sure to keep it last in the array

  ],};

但是，无论我如何使用helpers.js中的环境变量或OS变量，都无法访问它们的值。

更新

我忘了提到我可以从客户端使用gatsby-browser.js的环境变量。所以这让我想知道为什么我不能对helpers.js做同样的事情。

解决方法

您不需要插件即可访问客户端或服务器端环境变量。首先，我将尝试删除gatsby-plugin-env-variables。

尽管它们是客户端变量，但是将它们放在/src文件夹之外可能会导致一些问题。我将尝试在您的gatsby-config.js中添加以下代码段（在模块导出上方）：

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

根据文档：

您在.env.*文件中定义的项目环境变量在您的Node.js脚本中不会立即可用。使用这些变量，请使用npm软件包dotenv检查活动的.env.* 文件并附加这些值。 dotenv已经是盖茨比，因此您可以在gatsby-config.js或 gatsby-node.js这样。

gatsby netlify netlify-cms