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

Question

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

例如，在ASP.net核心中，我们使用占位符：

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

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

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

因此，我期望在.env中得到的最终输出应该如下所示：

REACT_APP_API_KEY = [placeholder]
REACT_APP_ANOTHER_KEY = [placeholder]

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

这个是可能的吗？

Answer 1

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

按照此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

这就是我要找的。

Answer 2

您可以在构建过程中执行此操作.....假设您正在使用webpack创建build。我们可以为环境变量使用'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)
        ]
    };
}