React - 在生产文件中隐藏环境变量答案

【问题标题】：React - Hiding Environment Variables in Production fileReact - 在生产文件中隐藏环境变量
【发布时间】：2019-10-21 09:13:27
【问题描述】：

我有一个要求，我需要隐藏环境变量而不是将它们提交到 git 存储库。

以 ASP.net core 为例，我们使用占位符：

{
   "api-key": [placeholder],
   "another-key": [placeholder]
}

在 React .env 文件中，我们可以使用类似于上面的占位符并通过运行 cmd 或 powershell 脚本来填充它们吗？

这真的可以在 Javascript 中工作吗？我假设在捆绑所有内容之前，所有键值都应该存在并且以后不会填充。

所以我期望在 .env 中的最终输出应该是这样的：

REACT_APP_API_KEY = [placeholder]
REACT_APP_ANOTHER_KEY = [placeholder]

然后在捆绑过程中使用 cmd 或 powershell 脚本将这些占位符替换为实际值。

这可能吗？

【问题讨论】：

标签： reactjs environment-variables

【解决方案1】：

您可以在构建过程中执行此操作..... 假设您正在使用 webpack 创建构建。我们可以使用 'dotenv' 作为环境变量。

在你的'webpack.config.js....'中

const webpack = require('webpack');
const dotenv = require('dotenv');

module.exports = () => {
    // call dotenv and it will return an Object with a parsed key 
    const env = dotenv.config().parsed;

    // reduce it to a nice object, the same as before
    const envKeys = Object.keys(env).reduce((prev, next) => {
        // replacing placeholder will be done here....
        if (env[next] === 'placeholder') {            
            prev[`process.env.${next}`] = JSON.stringify("test");
        }
        else {
            prev[`process.env.${next}`] = JSON.stringify(env[next]);
        }
        return prev;
    }, {});

    return {
        plugins: [
            new webpack.DefinePlugin(envKeys)
        ]
    };
}

【讨论】：

我正在使用 create-react-app，有没有办法扩展它的 webpack 设置来解决这个问题？
您可以使用github.com/timarney/react-app-rewired 更新 webpack 设置
非常感谢您的回答，我找到了一个更简单的解决方案并将其发布为答案:)

【解决方案2】：

找到答案了，这取决于操作系统实际上是可行的

按照link 的说明进行操作。

在 Windows 上设置它（cmd.exe）

set "REACT_APP_NOT_SECRET_CODE=abcdef" && npm start

在 Windows 上设置它（Powershell）

($env:REACT_APP_NOT_SECRET_CODE = "abcdef") -and (npm start)

最后在 Linux、macOS (Bash) 上

REACT_APP_NOT_SECRET_CODE=abcdef npm start

这就是我要找的。p>

【讨论】：

这些在.env 中的事实不一定隐藏它们。这些变量仍然存在于您的生产版本中，并且可以在浏览器中访问