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

【问题标题】：Including git commit hash and date in webpack build在 webpack 构建中包含 git commit hash 和 date
【发布时间】：2016-11-18 21:53:29
【问题描述】：

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

【问题讨论】：

标签： angular reactjs webpack ecmascript-6

【解决方案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 (stackoverflow.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