一种了解 React App 构建版本的方法

Gab*_*alo 4 reactjs create-react-app

我们正在使用create-react-app来创建我们的客户端 React 应用程序。我们每周多次部署该应用程序。我们希望对每个构建版本进行版本控制,以便我们可以检查哪个版本在线。

我正在考虑将带有版本的元标记添加到 index.html 文件中。所以目前标题有:

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  <link rel="apple-touch-icon" href="logo192.png" />
  <link rel="manifest" href="/manifest.json" />
  <title>React App</title>
  <link href="/static/css/main.b100e6da.chunk.css" rel="stylesheet">
</head>
Run Code Online (Sandbox Code Playgroud)

您如何看待添加这样的元数据:

<meta name="build-version" content="2019-10-08-15-42" />
Run Code Online (Sandbox Code Playgroud)

内容使用格式:YYYY-MM-DD-HH-MM

你怎么看这个想法?或者是否有另一种方法来对每个构建版本进行版本控制。

如果这是一个好主意,你能帮我提供一些关于如何去做的想法吗?

Bho*_*yar 5

我遵循以下方法(将在版本中添加 git 分支名称):

# First add '<!-- version: %VERSION% -->' to your public/index.html file
$ yarn run build # npm run build (if using npm)
$ VERSION=`git rev-parse --abbrev-ref HEAD`
$ sed -i -- "s/%VERSION%/$VERSION/g" build/index.html
Run Code Online (Sandbox Code Playgroud)

现在你build/index.html应该包含<!-- version: name-of-the-current-branch -->.

来源


为了方便起见,您可以在 package.json 中添加 version 命令:

"build": "VERSION=`git rev-parse --abbrev-ref HEAD` && 
         react-scripts build && 
         sed -i -- 's/%VERSION%/$VERSION/g' build/index.html"
Run Code Online (Sandbox Code Playgroud)

现在,您只需运行:

yarn build # or, npm run build
Run Code Online (Sandbox Code Playgroud)


Gab*_*alo 5

感谢@Bhojendra Rauniyar 的帮助,我得到了这个解决方案:

  1. 将此行添加到public/index.html

<meta build-version="%REACTBUILDVERSION%"/>

  1. 运行这 3 个命令:
REACTBUILDVERSION=$(date +%Y-%m-%d)-$(date +%T)
sed -i -- 's/%REACTBUILDVERSION%/'$REACTBUILDVERSION'/g' build/index.html
echo React Build Version = $REACTBUILDVERSION
Run Code Online (Sandbox Code Playgroud)

为了使它舒适,可以将这 3 个命令添加到构建中package.json

原始构建package.json

"build": "react-scripts build",

新构建package.json

"build":
     "react-scripts build &&
      REACTBUILDVERSION=$(date +%Y-%m-%d)-$(date +%T) &&
      sed -i -- 's/%REACTBUILDVERSION%/'$REACTBUILDVERSION'/g' build/index.html &&
      echo React Build Version = $REACTBUILDVERSION",
Run Code Online (Sandbox Code Playgroud)

构建后,您可以在以下位置看到此元标记build/index.html

<meta build-version="2019-10-16-16:31:43"/>
Run Code Online (Sandbox Code Playgroud)

  • 在 Windows 上,我得到“‘REACTBUILDVERSION’不被识别为内部或外部命令、可操作程序或批处理文件。” (3认同)