Logo

菜单

发布于 2026-01-06 0 阅读
0

如何在不重新构建的情况下动态更改 React 环境变量

如何在不重新构建的情况下动态更改 React 环境变量

输出

你是否曾经需要将 React 应用程序部署到多个环境中？

如果您曾经执行过上述操作，那么以下场景对您来说可能并不陌生：您已经有一个现有的构建文件，您希望更改一些环境变量，然后将其重新部署到新环境中。

不幸的是，您很快就会发现环境变量已被硬编码到构建文件中。这意味着您无法在不重新构建的情况下更改环境变量。

还有其他方法可以修改环境变量吗？

我们四处询问其他项目是否有更好的处理方法。结果发现，不同的团队都有自己的一套方法：

  • 有些团队干脆为每个环境重新构建了它。
  • 一些团队从外部数据源异步获取环境变量。
  • 其中一个团队将所有环境变量存储在应用程序中，然后根据 URL 选择环境。
  • 其中一个团队存储了一个占位符环境变量，然后在提供文件之前将其替换。

理想的流程是什么样的？

以上所有方案都存在一些我们不愿接受的取舍。我们希望打造的产品能够满足以下条件：

  1. 无需重建
  2. 只需进行最少的代码更改
  3. 允许同步访问环境变量
  4. 易于与您当前的工作流程集成
  5. 简单明了

react-inject-env：一个允许你在静态文件构建完成后修改环境变量的工具。

简而言之，它会env.js在/public文件夹中创建一个文件。然后，该文件会在启动时执行，并将变量加载到window对象中。

以下是使用方法

  1. 安装 react-inject-env


npm install react-inject-env --save-dev
yarn add react-inject-env --dev
Enter fullscreen mode Exit fullscreen mode


2. 将以下内容添加到index.html



<script src='/env.js'></script>
Enter fullscreen mode Exit fullscreen mode


3. 创建一个名为 `.txt` 的新文件env.js，并将以下代码复制到该文件中：



export const env = { ...process.env, ...window['env'] }
Enter fullscreen mode Exit fullscreen mode


4. 将所有实例替换process.env为新创建的env变量



import { env } from './env'

export const App = () => {
return (
  <div style={{backgroundColor: env.REACT_APP_COLOR}}>
    <span>{env.REACT_APP_MAIN_TEXT}</span>
  </div>
  )
}
Enter fullscreen mode Exit fullscreen mode


5. 使用你的构建脚本npm run build构建 静态文件。react-scripts build


6. 使用以下命令设置环境变量：



[env variables] npx react-inject-env set

# with a black background
REACT_APP_COLOR=black REACT_APP_MAIN_TEXT="Black Background" npx react-inject-env set

# with a blue background
REACT_APP_COLOR=blue REACT_APP_MAIN_TEXT="Blue Background" npx react-inject-env set

# for windows
set REACT_APP_COLOR=navy&& set REACT_APP_MAIN_TEXT=Navy Background&& npx react-inject-env set
Enter fullscreen mode Exit fullscreen mode


7. 打开build/env.js以验证您的变量是否存在。

这些变量将在运行时由您的应用程序读取。

build/env.js 截图示例

好了，大功告成！

如果您需要再次修改环境变量，您可以（a）重复步骤 6，或者（b）直接修改build/env.js。

那么<插入工具>呢？

该工具的设计宗旨是尽可能简单易用，因此应该能够与大多数其他工具很好地集成和配合使用。

.env / dotenv

react-inject-env.env会自动检测根文件夹中文件中的环境变量。

注意：通过命令行传递的环境变量将优先于.env变量。

TypeScript

在步骤 2中，创建一个名为“env.ts而不是”的文件env.js



declare global {
  interface Window {
    env: any
  }
}

// change with your own variables
type EnvType = {
  REACT_APP_COLOR: string,
  REACT_APP_MAIN_TEXT: string,
  REACT_APP_LINK_URL: string,
  REACT_APP_LOGO_URL: string
}
export const env: EnvType = { ...process.env, ...window.env }
Enter fullscreen mode Exit fullscreen mode

Docker

react-inject-env 也可以与 Docker 完美集成。



FROM node:16.10-slim
COPY . /app
WORKDIR /app

RUN npm install
RUN npm run build

EXPOSE 8080

ENTRYPOINT npx react-inject-env set && npx http-server build
Enter fullscreen mode Exit fullscreen mode 


docker build . -t react-inject-env-sample-v2
Enter fullscreen mode Exit fullscreen mode 


docker run -p 8080:8080 \                   
-e REACT_APP_COLOR=yellow \
-e REACT_APP_LOGO_URL=./logo512.png \
-e REACT_APP_MAIN_TEXT="docker text" \
-e REACT_APP_LINK_URL=https://docker.link \
react-inject-env-sample-v2
Enter fullscreen mode Exit fullscreen mode

概括

这个软件包极大地优化了我们的工作流程，构建和部署时间缩短了 10 多分钟。以前，我们需要构建 4 次——每个环境一次——但现在只需要构建一次。部署速度飞快！

它的设计理念是简单易用，因此无论您使用哪种工具，都应该能够将其集成到您的工作流程中！

链接

如需了解更多详细信息、获得支持和示例，您可以查看以下链接：

文章来源：https://dev.to/eslynn/how-to-dynamically-change-your-react-environment-variables-without-re-building-55el
React DEV 全球展示挑战赛...
Welcome Thread - ...