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()?
    答:不转换会被识别为一个变量
相关推荐
gqkmiss11 分钟前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃17 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰21 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye27 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm30 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
乐闻x1 小时前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚1 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
Amd7941 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You1 小时前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生2 小时前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互