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

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

在“ webpack.config.js ....”内部

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/main_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:tag="space">

<Space
    android:layout_width="match_parent"
    android:layout_height="387dp"
    android:tag="space_top" />

<TextView
    android:id="@+id/txt01"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:fontFamily="cursive"
    android:tag="line1"
    android:text="This is line one ONE ONE ONE"
    android:textAlignment="center"
    android:textSize="33dp">

</TextView>

<Space
    android:layout_width="match_parent"
    android:layout_height="35dp" />

<TextView
    android:id="@+id/txt02"

    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:tag="line2"
    android:text="This is line TWO TWO NOT Line 1"
    android:textAlignment="center"
    android:textSize="18dp">
</TextView>

<Space
    android:layout_width="match_parent"
    android:layout_height="35dp" />

<TextView
    android:id="@+id/txtV03"

    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:tag="line2"
    android:text="This is line THREE THREE Leave me"
    android:textAlignment="center"
    android:textSize="18dp">
   </TextView>
</LinearLayout>

Answer 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

这就是我想要的。

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

2 个答案: