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

Question

在开发中,我希望能够从Web上看到构建信息(git commit hash,author,last commit message等).我试过了:

• 使用child_process执行git命令行,并读取结果(因为浏览器环境不起作用)
• 在文件期间生成buildInfo.txt文件npm build并从文件中读取(不起作用,因为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中的构建脚本,然后添加:

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

进入公共文件夹中的index.html

Answer 2

我创建了另一个选择，该选择的灵感来自徐逸飞的响应，该方法将es6模块与create-react-app结合使用。此选项创建一个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

eject在 Create React App 2.0（发行说明）之前，没有ing是不可能做到这一点的，它带来了在编译时运行的 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）添加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
// /sf/answers/3960412711/
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