如何在JavaScript（React）项目中使用Azure管道变量？

如何在React项目中使用为管道定义的变量

目前，我在.yml文件中定义了这样的构建变量

variables:
  src: "virtual-furnace-app"
  dest: "$(src)/build"
  REACT_APP_VERSION: $(Build.BuildNumber)

在前端代码中，我试图这样访问它，但它没有定义

export const REACT_APP_VERSION = process.env.NODE_ENV === "development" ? `v${pjson.version} (Development build)` : `v${pjson.version} (${process.env.REACT_APP_VERSION})` ;

如何在JavaScript（React）项目中使用Azure管道变量

您可以尝试使用

.env

文件存储变量，然后在React本机应用程序中使用它们

有关详细信息，请参阅此博客：

还可以在中找到一些类似的线程，以便您可以参考它们，并检查这是否有帮助：

---

此外，您还可以尝试在脚本的开头设置

REACT\u APP\u VERSION

，例如

“scripts”：{“start”：“cross-env REACT\u APP\u VERSION=$REACT\u APP\u VERSION REACT scripts start”}

之后，我自己找到了解决方案

所以在代码中，我检查我们是否在localhost

NODE\u ENV==development

上，如果不是，我将读取注入React脚本

process.ENV.React\u APP\u VERSION的变量

import pjson from "../../package.json"
export const REACT_APP_VERSION = process.env.NODE_ENV === "development" ? `v${pjson.version} (Development build)` : `v${pjson.version} (${process.env.REACT_APP_VERSION})` ;

Azure管道yml代码

REACT_APP_VERSION=$(BuildID) yarn build

在前端永远无法访问这些。除非您指定发送它，否则是否有其他方法可以获取前端显示的Azure版本中的版本号？我假设您是服务器端渲染。为什么不将版本号与HTMLE一起发送，可以考虑从构建管道中在.Env文件中设置变量（例如AppIn版本）。然后使用
dotenv
包在应用程序内加载代码。