如何在 JavaScript 中使用 Netlify 的环境变量？答案

【问题标题】：How do I use Netlify's environment variables in JavaScript?如何在 JavaScript 中使用 Netlify 的环境变量？
【发布时间】：2018-12-15 09:21:37
【问题描述】：

我想使用环境变量来存储项目的 Google Analytics（分析）跟踪 ID。我在 Netlify 上创建了一个名为“GOOGLE_ANALYTICS_ID”的环境变量。我想在我的 JavaScript 文件中使用这个变量来替换实际的跟踪 ID。

现在，我所做的只是使用“GOOGLE_ANALYTICS_ID”来调用变量。它在我的控制台中显示参考错误。

这样做的正确方法是什么？我只想将 JS 文件中的跟踪 ID 号替换为环境变量名称，以便它从 Netlify 获取值，而不是将其硬编码到文件中。

【问题讨论】：

您在构建过程中使用了哪些构建工具？在部署站点时，您是否对 javascript 进行了任何预处理？你在工作流程中使用的是 webpack 还是 babel？

标签： javascript google-analytics environment-variables netlify

【解决方案1】：

您应该使用process.env.GOOGLE_ANALYTICS_ID 引用环境变量。

【讨论】：

如果我们不使用 Node 或 React，它还能工作吗？只是普通的 JavaScript？
在构建期间，您可以使用 sed 将 Javascript 文件中的某些占位符替换为 ENV VAR 的值，例如：sed -i s/API_KEY_PLACEHOLDER/$API_KEY/g somefile.js
我正在尝试为 github 令牌做，但它说进程未定义

【解决方案2】：

在 Netlify 中

登录netlify：https://app.netlify.com/teams/USERNAME/sites
选择您的网站：https://app.netlify.com/sites/SITENAME/overview
转到站点设置：https://app.netlify.com/sites/SITENAME/settings/general
转到“构建和部署”>“环境变量”：https://app.netlify.com/sites/SITENAME/settings/deploys#environment
编辑变量：
- 密钥：GOOGLE_ANALYTICS_ID
- 值：UA-XXXXXXX-X
保存

让分析在 GatsbyJS 中工作时遇到了一些问题。有一些注意事项：

如果您使用的是 Gatsby：在 `gatsby-config.js`

  plugins: [
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: GOOGLE_ANALYTICS_ID,
        head: true,
        anonymize: true,
      },
    },
  ]

注意：gatsby-plugin-google-analytics 只能通过`gatsby build` 命令启用

这意味着您无法在本地开发期间使用 gatsby develop 测试跟踪。

来自plugin docs：

请注意，此插件在运行 gatsby develop 时被禁用。这样，在您仍在开发项目时不会跟踪操作。一旦你运行gatsby build，插件就会被启用。使用gatsby serve 进行测试。

【讨论】：

在 Netlify 中

如果您使用的是 Gatsby：在 gatsby-config.js

注意：gatsby-plugin-google-analytics 只能通过gatsby build 命令启用

如果您使用的是 Gatsby：在 `gatsby-config.js`

注意：gatsby-plugin-google-analytics 只能通过`gatsby build` 命令启用