在 webpack 构建中包含 git commit hash 和 date

Posted 2023-02-22

【中文标题】在 webpack 构建中包含 git commit hash 和 date

【英文标题】：Including git commit hash and date in webpack build

【发布时间】：2016-11-18 21:53:29

【问题描述】：

我正在使用 react/es6/webpack。我想在我的应用程序的某处显示构建日期和 git hash。最好的方法是什么？

【参考方案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__

【讨论】：

为了让 ESLint 开心，我必须将 globals: __COMMIT_HASH__: true 添加到我的 .eslintrc (***.com/a/39053582/1054633)

不得不玩.eslintrc： "globals": "__COMMIT_HASH__": true , "parser": "babel-eslint", "parserOptions": "sourceType": "module", "allowImportExportEverywhere": true

我在commitHash 的方法链末尾放了一个.trim() 来删除一个换行符。

为什么需要 JSON.stringify？

@echo 因为这些值在构建时直接插入到代码中，而 JSON.stringify 将这些值包装在引号中，从而产生字符串语法。如果我错了，希望有人能纠正我。

【参考方案2】：

我无法对置顶帖子发表评论，所以这里是：

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

【参考方案3】：

另一种方法是（在 ANGULAR + REACT 中）：

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

生成 VERSION 和 COMMITHASH 文件的简单 webpack 插件 在基于本地 git 存储库的构建期间。

---

示例代码：

在您的 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 

【讨论】：

如果 webpack 处于 watch 模式并保持运行，当一个新的 git commit/pull 时如何更新这些 git 信息？

watch 模式适用于项目中的源文件，而不是 git 存储库。我猜watch-poll 是与源文件无关的更改的唯一有效选项。

抱歉聚会迟到了。 @raptoravis 可能你正在寻找的答案在这里——github.com/webpack/webpack/issues/7717#issuecomment-460653171