添加git信息到create-react-app

Question

在开发中，我希望能够从网络上查看构建信息（git 提交哈希、作者、最后提交消息等）。 我努力了：

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

唯一要做的似乎是做npm run eject并应用https://www.npmjs.com/package/git-revision-webpack-plugin ，但我真的不想弹出 create-react-应用程序。 有人有什么想法吗？

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。

在反应组件中，这样做：

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

Answer 2

我创建了另一个选项，灵感来自 Yifei Xu 的响应，它使用带有 create-react-app 的 es6 模块。 此选项创建一个 javascript 文件并将其作为构建文件中的常量导入。 虽然将其作为文本文件使其易于更新，但此选项可确保它是打包到 javascript 包中的 js 文件。 这个文件的名字是 _git_commit.js

package.json 脚本：

"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",

使用此提交消息的示例组件：

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;

请注意，这会自动将您的提交消息放入 javascript 包中，因此请确保没有将安全信息输入到提交消息中。 我还将创建的 _git_commit.js 添加到 .gitignore 因此它不会被签入（并创建一个疯狂的 git commit 循环）。

Answer 3

在 Create React App 2.0（发行说明）之前，不可能在不eject情况下做到这一点，它带来了在编译时运行的 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有更多信息。 您还可以在此处查看该软件包的现场演示。

Answer 4

所以，事实证明没有弹出就无法实现这一点，所以我使用的解决方法是：

1) 在 package.json 中，定义一个脚本"git-info": "git log -1 --oneline > src/static/gitInfo.txt"

2) 为 start 和 build 添加npm run git-info

3）在配置js文件中（或者当你需要git信息时），我有

const data = require('static/gitInfo.txt')
fetch(data).then(result => {
    return result.text()
})

Answer 5

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

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

在下面的示例中，我将使用 typescript，但无论如何转换为 javascript 应该是微不足道的。

包.json

如果你使用 javascript，它是node scripts/start.js

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

脚本/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定义它们。

应用程序.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

Answer 6

如果您的package.json脚本始终在 unix 环境中执行，您可以通过从 shell 脚本初始化.env dotenv 文件来实现与@NearHuscarl 答案中相同的效果，但代码行数更少。 生成的.env然后在后续步骤中被 react-scripts 拾取。

"scripts": {
  "start": "sh ./env.sh && react-scripts start"
  "build": "sh ./env.sh && react-scripts build",
}

其中.env.sh放置在您的项目根目录中，并包含类似于以下代码的代码，用于在每次构建或启动时覆盖您的.env文件内容。

{
  echo BROWSER=none
  echo REACT_APP_FOO=bar
  echo REACT_APP_VERSION=$(git rev-parse --short HEAD)
  echo REACT_APP_APP_BUILD_DATE=$(date)
  # ...
} > .env

由于.env在每个构建中都会被覆盖，因此您可以考虑将其放在.gitignore列表中，以避免在您的提交差异中产生过多的噪音。

再次声明：此解决方案仅适用于存在 bourne shell 解释器或类似解释器的环境，即 unix。

Answer 7

您可以使用CRACO和craco-interpolate-html-plugin轻松地将您的 git 信息（如提交哈希）注入到您的 index.html 中。 这样您就不必使用yarn eject ，它也适用于开发服务器环境以及生产构建。

安装 CRACO 后，craco.config.js 中的以下配置对我craco.config.js ：

const interpolateHtml = require('craco-interpolate-html-plugin');

module.exports = {
  plugins: [
    {
      plugin: interpolateHtml,
      // Enter the variable to be interpolated in the html file
      options: {
        BUILD_VERSION: require('child_process')
          .execSync('git rev-parse HEAD', { cwd: __dirname })
          .toString().trim(),
      },
    },
  ],
};

并在您的index.html中： <meta name="build-version" content="%BUILD_VERSION%" />

以下是在package.json中添加的代码行，以使其全部工作：

"scripts": {
    "start": "craco start",
    "build": "craco build"
}