webpack项目打包console git分支、打包时间等信息 exec

相关链接

MDN toLocaleString

child_process Node.js

strftime 格式

代码

buildinfo.js

const { execSync, exec } = require("child_process");
// exec: 在 Windows 执行 bat 和 cmd 脚本// execSync 同步
// exec 异步// exec 使用方法
// exec('git show -s', function(error, stdout, stderr) {
//     if (error) {
//         // ...
//         return
//     }
//     console.log(stdout)
// })class BuildInfo {constructor() {}// 当前 git 分支branch() {// 为什么要使用 `${}`?// execSync 返回一个 <Buffer> 数据// typeof execSync('ls') -> objectreturn this.cleanEmpty(`${execSync("git rev-parse --abbrev-ref HEAD")}`)}// 本地最新 git 提交 hashhash() {return this.cleanEmpty(`${execSync("git show -s --format=%H")}`)}// 本地最新 git 提交记录// strftime 格式; 时间格式化参考/**yyyy: "%Y",YYYY: "%Y",MM: "%m",dd: "%d",HH: "%H",H: "%I",mm: "%M",ss: "%S",w: "%a",W: "%A",*/date() {return this.cleanEmpty(`${execute("git log -1 --format=%cd --date=format:%Y-%m-%d %H:%M:%S")}`)}// 打包时间/本地时间; （仅作参考：本机时间可以被修改）// 默认时间格式：2024/3/29 下午4:42:22// hour12: 是否使用12小时制格式buildtime() {return new Date().toLocaleString('zh-cn', { hour12: false })}// git 输出结果会有换行或空格等字符cleanEmpty(s) {return s.replace(/[\n\r\s]+$/, '')}
}module.exports = BuildInfo

vue.config.js

const BuildInfoTools = require('./buildinfo')
const webpack = require('webpack')const B = new BuildInfoTools()const plugins = [new webpack.DefinePlugin({BRANCH: JSON.stringify(B.branch()),HASH: JSON.stringify(B.hash()),BUILD_TIME: JSON.stringify(B.buildtime())})
]module.exports = {lintOnSave: false,configureWebpack: {plugins}
}

入口文件 main.js

import Vue from 'vue'new Vue({created() {console.log(`XXX Branch: ${BRANCH}; last.hash: ${HASH}; Build time: ${BUILD_TIME}`)},router,store,render: h => h(App)
}).$mount('#app')

一些问题

1. 为什么要使用 JSON.stringify()?
   答：不转换会被识别为一个变量
   

2. 使用 cleanEmpty 方法为什么要 使用 `${}``？
   exec 方法返回的数据类型是 buffer，需要转换为需要转换为字符串之后才能转换为正常数据，再使用 String.replace 方法替换字符。
   也可以使用 '' + buffer 或者 buffer.toString() 的方式来转换为 string 格式
   

如果还有什么问题，欢迎评论交流