git项目中加入版本号git-revision-webpack-plugin

如何在git项目中加入版本号和代码提交等信息，其实安装一个插件（ git-revision-webpack-plugin）再加一些配置就搞定，具体操作如下：

安装本地开发依赖项

Webpack 4及以上版本：

cnpm install --save-dev git-revision-webpack-plugin

Webpack 4以下版本：

cnpm install --save-dev git-revision-webpack-plugin@2.5.1

插件API

VERSION，COMMITHASH并且BRANCH也通过一个公共的API暴露。使用DefinePlugin的示例：

（这里以react项目为例：打开本地环境：build/webpack.config.dev.js 或 开发环境：build/webpack.config.prod.js）

const BuildInfo = require('./version.js');　　// 定制一些其他信息，如不需要可不引入

const GitRevisionPlugin = require('git-revision-webpack-plugin');
 
const gitRevision = new GitRevisionPlugin();
plugins: [   
 gitRevision,

    new webpack.DefinePlugin({

        'process.env': {
               'VERSION': JSON.stringify(gitRevision.version()),

               'COMMITHASH': JSON.stringify(gitRevision.commithash()),

               'BRANCH': JSON.stringify(gitRevision.branch()),

               'BuildDate': JSON.stringify(BuildInfo.buildDate)　　// 后面这些可以根据自己的实际需求进行添加
                .
                .
                .

           }

    })
],            

version.js 配置文件

const child_process = require('child_process');

// git 最后一次提交的 Head
const commit = child_process
    .execSync('git show -s --format=%H')
    .toString()
    .trim();
const commitUserName = child_process
    .execSync('git show -s --format=%cn')
    .toString()
    .trim();
const commitUserMail = child_process
    .execSync('git show -s --format=%ce')
    .toString()
    .trim();
const commitDateObj = new Date(child_process.execSync(`git show -s --format=%cd`).toString());
const commitDate = `${commitDateObj.getFullYear() +
    '-' +
    (commitDateObj.getMonth() + 1) +
    '-' +
    commitDateObj.getDate() +
    ' ' +
    commitDateObj.getHours() +
    ':' +
    commitDateObj.getMinutes()}`;
const buildUserName = child_process
    .execSync('git config user.name')
    .toString()
    .trim();
const buildUserMail = child_process
    .execSync('git config user.email')
    .toString()
    .trim();
const nowDate = new Date();
const buildDate = `${nowDate.getFullYear() +
    '-' +
    (nowDate.getMonth() + 1) +
    '-' +
    nowDate.getDate() +
    ' ' +
    nowDate.getHours() +
    ':' +
    nowDate.getMinutes()}`;

module.exports = { commit, commitUserName, commitUserMail, commitDate, buildUserName, buildUserMail, buildDate };

使用

在页面中可以直接使用process.env.xxx方法显示，如下：

<div >
      <p>COMMITHASH：{process.env.VERSION}</p>
      <p>BRANCH：{process.env.BRANCH}</p>
      <p>VERSION：{process.env.VERSION}</p>
      <p>Build Date：{process.env.BUILDDATE}</p>
</div>   

COMMITHASH： e3caffa36e4062cebe657c35b70ef198fa77d90a
BRANCH： release
VERSION： e3caffa
Build Date： 2020-10-26 8:47