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

相关链接

[MDN toLocaleString](#MDN toLocaleString)

[child_process Node.js](#child_process Node.js)

[strftime 格式](#strftime 格式)

代码

buildinfo.js

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') -> object
    return this.cleanEmpty(`${execSync("git rev-parse --abbrev-ref HEAD")}`)
  }

  // 本地最新 git 提交 hash
  hash() {
    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

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

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()?
    答:不转换会被识别为一个变量
相关推荐
吕彬-前端43 分钟前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱1 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai1 小时前
uniapp
前端·javascript·vue.js·uni-app
研究是为了理解2 小时前
Git Bash 常用命令
git·elasticsearch·bash
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
DKPT2 小时前
Git 的基本概念和使用方式
git
王哲晓2 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4112 小时前
无网络安装ionic和运行
前端·npm
理想不理想v2 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云2 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js