Question

在开发中，我希望能够从Web上看到构建信息（git commit hash，author，last commit message等）。我试过了：

使用child_process执行git命令行，并读取结果（因为浏览器环境不起作用）
在npm build期间生成buildInfo.txt文件并从文件中读取（不起作用，因为fs在浏览器环境中也不可用）
使用外部库，例如“git-rev”

唯一要做的事情似乎是做npm run eject并应用https://www.npmjs.com/package/git-revision-webpack-plugin，但我真的不想退出create-react-app。有人有任何想法吗？

Answer 1

稍微切线（无需弹出并在显影中工作），这可能对其他希望通过添加以下命令将其当前git commit SHA作为元标记添加到他们的index.html中的人有所帮助：

REACT_APP_GIT_SHA=`git rev-parse --short HEAD`

添加到package.json中的构建脚本，然后添加（请注意，它必须以REACT_APP开头...否则它将被忽略）：

<meta name="ui-version" content="%REACT_APP_GIT_SHA%">

进入公用文件夹中的index.html。

在react组件内，请按以下步骤操作：

<Component>{process.env.REACT_APP_GIT_SHA}</Component>

Answer 2

I created another option inspired by Yifei Xu's response that utilizes es6 modules with create-react-app. This option creates a javascript file and imports it as a constant inside of the build files. While having it as a text file makes it easy to update, this option ensures it is a js file packaged into the javascript bundle. The name of this file is _git_commit.js

package.json scripts:

"git-info": "echo export default \"{\\\"logMessage\\\": \\\"$(git log -1 --oneline)\\\"}\"  > src/_git_commit.js",
"precommit": "lint-staged",
"start": "yarn git-info; react-scripts start",
"build": "yarn git-info; react-scripts build",

A sample component that consumes this commit message:

import React from 'react';

/**
 * This is the commit message of the last commit before building or running this project
 * @see ./package.json git-info for how to generate this commit
 */
import GitCommit from './_git_commit';

const VersionComponent = () => (
  <div>
    <h1>Git Log: {GitCommit.logMessage}</h1>
  </div>
);

export default VersionComponent;

Note that this will automatically put your commit message in the javascript bundle, so do ensure no secure information is ever entered into the commit message. I also add the created _git_commit.js to .gitignore so it's not checked in (and creates a crazy git commit loop).

Answer 3

不创建eject就不可能做到这一点，直到Create React App 2.0（Release Notes）带来了自动配置的Babel插件宏，该宏在编译时运行。为了使每个人的工作变得简单，我编写了其中的一个宏并发布了一个NPM包，您可以导入该包以将git信息导入到React页面中：https://www.npmjs.com/package/react-git-info

有了它，您可以这样做：

import GitInfo from 'react-git-info/macro';

const gitInfo = GitInfo();

...

render() {
  return (
    <p>{gitInfo.commit.hash}</p>
  );
}

项目README具有更多信息。您还可以观看工作在here的软件包的实时演示。

Answer 4

我的方法与@uidevthing的答案略有不同。我不想使用环境变量设置来污染package.json文件。

您只需要运行另一个脚本，即可将这些环境变量保存到项目根目录下的.env文件中。就是这样。

在下面的示例中，我将使用打字稿，但是无论如何要转换为javascript应该很简单。

package.json

如果您使用JavaScript，则为node scripts/start.js

  ...
  "start": "ts-node scripts/start.ts && react-scripts start",

scripts / start.ts

创建一个新的脚本文件scripts/start.ts

const childProcess = require("child_process");
const fs = require("fs");

function writeToEnv(key: string = "", value: string = "") {
  const empty = key === "" && value === "";

  if (empty) {
    fs.writeFile(".env", "", () => {});
  } else {
    fs.appendFile(".env", `${key}='${value.trim()}'\n`, (err) => {
      if (err) console.log(err);
    });
  }
}

// reset .env file
writeToEnv();

childProcess.exec("git rev-parse --abbrev-ref HEAD", (err, stdout) => {
  writeToEnv("REACT_APP_GIT_BRANCH", stdout);
});
childProcess.exec("git rev-parse --short HEAD", (err, stdout) => {
  writeToEnv("REACT_APP_GIT_SHA", stdout);
});

// trick typescript to think it's a module
// https://stackoverflow.com/a/56577324/9449426
export {};

上面的代码将设置环境变量并将其保存到根文件夹中的.env文件中。它们必须以REACT_APP_开头。然后，React脚本会在构建时自动读取.env，然后在process.env中对其进行定义。

App.tsx

...
console.log('REACT_APP_GIT_BRANCH', process.env.REACT_APP_GIT_BRANCH)
console.log('REACT_APP_GIT_SHA', process.env.REACT_APP_GIT_SHA)

结果

REACT_APP_GIT_BRANCH master
REACT_APP_GIT_SHA 042bbc6

更多参考文献：

https://create-react-app.dev/docs/adding-custom-environment-variables/#adding-development-environment-variables-in-env

将git信息添加到create-react-app

4 个答案:

package.json

scripts / start.ts

App.tsx

结果