将 dotenv 与捆绑的客户端代码一起使用答案

【问题标题】：Using dotenv with bundled client side code将 dotenv 与捆绑的客户端代码一起使用
【发布时间】：2018-08-27 02:20:02
【问题描述】：

我正在创建一个节点 js 应用程序作为内容丰富的 UI 扩展。代码托管在这里：https://github.com/doodybrains/media-tagging-extension

很多 gulp 文件都是样板文件，但最终所有内容都捆绑到 index.html 文件中。我知道不应在客户端代码中调用或处理环境变量，但我不知道如何在项目构建之前将它们放入其中。当我在开发中运行存储库并从src/index.js 调用process.env.NAME_OF_TOKEN 时，它返回undefined。我尝试过导入 dotenv，创建 gulp env 管道等。

任何建议都会很有帮助。该应用程序正在部署到 Netlify，我已经在那里设置了环境变量。

谢谢

【问题讨论】：

我不认为你可以在你的 src/index.js 中使用 env 因为它是客户端，而且 gulp 也不能为你预编译它。也许您应该从 json 文件而不是 dotenv 文件中导入这些变量？
我喜欢这个想法，但是如何使用 json 文件而不将其提交到源代码？

标签： node.js gulp environment-variables contentful-management

【解决方案1】：

您可以创建另一个可以使用 NODE_ENV 设置正确变量的 js 文件。我更喜欢调用服务以在应用启动时获取我的所有属性并在某些地图中进行设置。我使用地图在代码中的不同位置设置值。

一些示例代码...

const env = process.env.NODE_ENV || 'local';
const sit = {
    URL: 'sit url',
    HOST: 'sit host',
    ENV: 'sit'
};
const uat = {
    URL: 'uat url',
    HOST: 'uat host',
    ENV: 'uat'
};

var property_service_url = config[env].URL;
var property_service_host = config[env].HOST;

在启动您的应用之前，您可以设置 NODE_ENV=环境。例如在 linux 中。

export NODE_ENV=uat

这将确保环境设置正确。现在在您的 app.js for 中，您可以调用该服务来加载您的属性。如果不想调用某个服务，可以按照设置URL和HOST的方式设置。

【讨论】：