Vue 项目打包时提取代码 git commit 信息

业精于勤 荒于嬉

需求描述

前端项目经常打包，发包部署，有可能存在不确定发包的版本是哪一个，于是想要将代码打包时的代码信息也就是commit 信息 提取出来作为参考。

具体实现

1、获取git commit 信息

git 信息的获取指令 参考 官方文档是一切

https://git-scm.com/docs/git

https://git-scm.com/docs/git-show

git show format选项：

• %H 提交对象（commit）的完整哈希字串
• %h 提交对象的简短哈希字串
• %cd 提交日期, RFC2822格式

const child_process = require("child_process")

// git 提交记录信息 https://git-scm.com/docs/git-show    https://git-scm.com/docs/git
const commitHash = child_process.execSync('git show -s --format=%H').toString().trim()
const localBranchName = child_process.execSync('git rev-parse --abbrev-ref HEAD').toString().trim()
const branchName = child_process.execSync(`git rev-parse --abbrev-ref ${localBranchName}@{upstream}`).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 nowDate = new Date()
const buildDate = `${nowDate.getFullYear()+'-'+(nowDate.getMonth()+1)+'-'+nowDate.getDate()+'  '+nowDate.getHours()+':'+nowDate.getMinutes()}`
module.exports = {
  commitHash,
  branchName,
  commitDate,
  buildDate
}

2、在打包时封装在全局中

在 vue.config.js 中，配置打包时的信息

const ProjectVersion = require('./version.js')
console.log('ProjectVersion', ProjectVersion)
module.exports = {
  lintOnSave: false,
  chainWebpack: config => {
    config.plugin('define').tap(args => {
      args[0].ProjectVersion = JSON.stringify(ProjectVersion)
      return args
    })
  }
}

3、在需要的地方 引入封装的全局信息

测试在mian.js中 将打包信息打印 或者 挂载到window 对象上，这样项目部署后 ，便可以看到对应的信息

注意：信息在打包时设置，因此获取也要分环境，本地运行直接获取会有问题。

if (process.env.NODE_ENV == "production") {
  console.log("ProjctVersion", ProjectVersion)
  window.ProjectVersion = Object.freeze(ProjectVersion)
}