添加 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-app。有人有什么想法吗？

Answer 1

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

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

2) 为启动和构建添加 npm run git-info

3) 在配置 js 文件中（或任何你需要 git 信息的时候），我有

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

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 提交循环）。

Answer 3

稍微切线（无需弹出并在开发中工作），这可能有助于其他希望通过添加以下内容将他们当前的 git 提交 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%">

进入 public 文件夹中的 index.html。

在反应组件中，这样做：

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

Answer 4

在 Create React App 2.0 (Release Notes) which brought with it automatic configuration of Babel Plugin Macros which run at compile time. To make the job simpler for everyone, I wrote one of those macros and published an NPM package that you can import to get git information into your React pages: https://www.npmjs.com/package/react-git-info

之前，没有 ejecting 是不可能做到这一点的

有了它，你可以这样做：

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

const gitInfo = GitInfo();

...

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

项目README has some more information. You can also see a live demo of the package working here。

Answer 5

我的方法与@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
// 
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

Answer 6

如果您的 package.json 脚本始终在 unix 环境中执行，您可以获得与@NearHuscarl 回答中相同的效果，但通过从 .env dotenv 文件初始化您的代码行数更少=30=] 脚本。生成的.env则在后续步骤中为picked up by the 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 and craco-interpolate-html-plugin 轻松地将您的 git 信息（如提交哈希）注入您的 index.html。这样您就不必使用 yarn eject，它也适用于开发服务器环境以及生产构建。

安装 CRACO 后，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"
}

添加 git 信息到 create-react-app

Add git information to create-react-app

git

node.js

reactjs

create-react-app

package.json

scripts/start.ts

App.tsx

结果