【发布时间】：2020-08-27 07:21:22
【问题描述】：
我在<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",
},
},
{
resolve: "gatsby-source-filesystem",
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 中，我都无法访问它们的值。
更新
我忘了提到我可以使用来自客户端的环境变量，即 gatsby-browser.js。所以这让我想知道为什么我不能对 helpers.js 做同样的事情。
【问题讨论】：
-
静态文件保持不变，所以没有什么会取代你的环境变量。您需要将文件移回 src 并找到一种不同的方式来使用它，或者以某种方式处理它
-
@DerekNguyen 谢谢。是的，我确实将 helpers.js 放在了 src 文件夹下，但仍然无法使用环境变量。我正在考虑 Webpackage 配置，但 Gatsby 或 Netlify CMS 会为像我这样的用户这样做。所以我想一定有一些东西或插件已经为我们做了这件事。我们需要做的只是找出如何使用插件来实现目标。
-
为什么要投反对票？我提供了如此详细的信息以及我所能做的一切，以使这个问题变得有效和翔实。在不发表评论的情况下投票是没有用的，并且会损害该平台的可用性。
标签： gatsby netlify netlify-cms