当我在 Webpack 中使用它们时，我仍然可以看到我的 ENV 变量

Question

我正在玩 Webpack 并使用 ENV 变量。

到目前为止，我担心的一个问题是我仍然可以在我的存储库或代码本身中看到变量。这是我尝试过的：

使用 dotenv-webpack 我可以使用 .env 文件，我可以将它们从版本控制中隐藏（这很好），但缺点是如果我查看 bundle.js 文件我可以搜索它们并且仍然可以看到它们。即使我将 webpack 设置为生产，这让我觉得有什么意义？

使用 webpack.EnvironmentPlugin 我可以将 ENV 存储在 webpack.config.js 文件中，而我没有在我的 bundle.js 文件中看到它们，但是 webpack .config.js 文件是我的版本控制 - 唯一的方法是创建私有存储库。

我知道，如果某些东西很敏感，使用私有存储库总是更好，但我想看看我是否错过了当前配置的步骤。

在我的脑海中，我想我可以创建一个 .env 文件并且不会让它出现在我的生产代码中，无论我的 repo 是否是私有的。我这样想错了吗？

我错过了什么？

额外 我确实看到了this post on Github，但对我来说它仍然提出了能够在版本控制方面看到 ENV 变量的问题？？

Answer 1

（修订）

假设您不想在存储库中公开配置值。 （在这种情况下，不是版本控制的 env 文件就是答案）。可能是：

• 一些你不想暴露给任何人的秘密，例如私有 API 密钥；
• 需要根据每个特定环境添加的配置 - 例如，用于类似 google 服务的 public API 密钥，例如谷歌地图，您希望获得您的存储库的每个用户自己设置。

env 文件对于任何一种配置都是不错的选择。

您需要在捆绑的 Web 应用程序中包含其中一些信息；客户端 Web 应用程序需要一个实际的 Google Maps API 密钥才能使地图工作（因此，使用您的 Web 应用程序的任何人都可以在您的捆绑包中找到它）。这就是dotenv-webpack 帮助您将 env 文件中的信息放在 JS 包中的地方。如果用户没有看到值是什么，您就无法在 Web 应用程序中使用 env 属性的值。

其他信息不应该暴露给您的网络应用程序的用户——数据库连接的用户名/密码就是一个例子；您仍然可以将它们保存在您的 env 文件中，但不要将它们捆绑在您的网络应用程序中。如果需要，您仍然可以在使用 Webpack 构建您的应用程序时使用它们，但不要将它们注入到包中 - 对于 dotenv-webpack，这意味着不使用 @ 引用它们987654323@ 在您的代码中。