在webpack构建中包含git提交哈希值和日期

Question

我正在使用react/es6/webpack。我想在我的应用程序中的某个位置显示构建日期和git哈希值。最佳方法是什么？

- Matt

Answer 1

您可以使用webpack的DefinePlugin：

// get git info from command line
let commitHash = require('child_process')
  .execSync('git rev-parse --short HEAD')
  .toString()
  .trim();

...
plugins: [
    new webpack.DefinePlugin({
      __COMMIT_HASH__: JSON.stringify(commitHash)
    })
  ]
...

然后您可以在应用程序中使用__COMMIT_HASH__。

- azium

---

为了让 ESLint 不报错，我需要在我的 .eslintrc 文件中添加 globals: { __COMMIT_HASH__: true } （参考链接：https://dev59.com/11kT5IYBdhLWcg3wG74_#39053582）。 - Ben

我在commitHash方法链的末尾加上了.trim()，以去除换行符。 - Daniel Node.js

@echo 是因为在构建时将值直接插入到代码中，而 JSON.stringify 将这些值用引号包裹起来，生成一个字符串语法。希望有人能纠正我如果我说错了。 - MattH

我必须在使用__COMMIT_HASH__之前重新启动Webpack开发服务器。 - dev4life

要添加一个脏标记，请参见此处：https://remarkablemark.org/blog/2017/10/12/check-git-dirty/ - ADTC

Answer 2

另一种实现方式是（在ANGULAR + REACT中）：

只需安装这个包git-revision-webpack-plugin

这是一个简单的webpack插件，根据本地git仓库生成VERSION和COMMITHASH文件。

---

示例代码：

在您的webpack.config.js（或任何dev-prod文件）中：

const GitRevisionPlugin = require('git-revision-webpack-plugin');
const gitRevisionPlugin = new GitRevisionPlugin();

plugins: [
    new DefinePlugin({
      'VERSION': JSON.stringify(gitRevisionPlugin.version()),
      'COMMITHASH': JSON.stringify(gitRevisionPlugin.commithash()),
      'BRANCH': JSON.stringify(gitRevisionPlugin.branch()),
    }),
  ]

在你的组件中（React）：

export class Home extends Component{
    ....

    render() {
        return(
            <div>
                {VERSION} 
                {COMMITHASH}
                {BRANCH}
            </div>
        )
    }
}

在你的模板中（Angular）：

{{ VERSION }} 
{{ COMMITHASH }}
{{ BRANCH }}

- Vivek Doshi

---

如果 webpack 处于监视模式并持续运行，当进行新的 git 提交/拉取时如何更新此类 git 信息？ - raptoravis

“观察”模式是针对项目中的源文件，而不是 Git 仓库。我猜测“watch-poll”是与源文件无关的更改的唯一有效选项。 - Peter Krebs

抱歉晚了，@raptoravis，你寻找的答案可能在这里——https://github.com/webpack/webpack/issues/7717#issuecomment-460653171。 - ZuBB

我运行webpack构建，然后再提交。问题是GitRevisionPlugin的COMMITHASH将是上一个提交，而不是当前提交。如何解决这个问题？ - Abdull

Answer 3

我无法评论顶部帖子，所以在这里写:

Webpack.dev.js

import gitprocess from "child_process"
let LoadCommitDate = gitprocess
  .execSync('git log -1 --date=format:"%Y/%m/%d %T" --format="%ad"')
  .toString()
...
plugins: [
    new webpack.DefinePlugin({
       COMMITDATE: JSON.stringify(LoadCommitDate),
    })
  ]

此外，在.eslintrc中：

  "globals": {
    "COMMITDATE": "readonly",
  },

结果-您可以在代码中引用的最新提交日期！

console.log(COMMITDATE)
2020/05/04 21:02:03

- FloodGames

---

声明常量COMMITDATE：string，将其用于@types/global.d.ts。 - FloodGames

Answer 4

我想在我的index.html中添加哈希作为注释。通过html-webpack-plugin和templateParameters选项找到了一种方法。

在webpack配置文件的顶部：

// get git info from command line
const commitHash = require('child_process')
  .execSync('git rev-parse --short HEAD')
  .toString()
  .trim()

在你启动HtmlWebpackPlugin的更深处：

templateParameters: {
  __COMMIT_HASH__: JSON.stringify(commitHash),
}

最后，在您的index.html模板中：

<!-- <%= __COMMIT_HASH__ %> -->

- Markus Hedlund

Answer 5

2个步骤以简洁且有用的方式获取提交信息。

步骤1：添加软件包

npm install --save-dev react-git-info

步骤2：在组件文件中使用

// MyComponent.js
import GitInfo from 'react-git-info/macro';

function MyComponent() {
  
  const gitInfo = GitInfo();

  return (
    <div data-branch={gitInfo.branch}>
       {gitInfo.commit.hash}
    </div>
  );
}

- GMKHussain