在webpack build中包含git commit hash和date

时间:2016-07-15 15:50:09

标签: angular reactjs webpack ecmascript-6

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

3 个答案:

答案 0 :(得分:42)

您可以使用webpack的DefinePlugin https://webpack.github.io/docs/list-of-plugins.html#defineplugin

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

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

然后,您可以在__COMMIT_HASH__

的应用中使用它

答案 1 :(得分:13)

另一种方法是:

只需安装此软件包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 }}

答案 2 :(得分: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