vue项目打包获取git commit信息并输出到打包后的指定文件夹中

需求背景:

前端项目经常打包,发包部署,为了方便测试及运维发现问题时与正确commit信息对比
实现方式:

使用Node.js的child_process模块来执行git命令
实现步骤:

1.在package.json的同级目录下新建一个version.js文件。内容可根据自己的实际需求来定,

javascript 复制代码
const execSync = require('child_process').execSync
const fs = require('fs')

// 读取package.json文件
const data = fs.readFileSync('./package.json');
const packageData = JSON.parse(data);

// 获取git信息的相关命令
const COMMITHASH_COMMAND = 'rev-parse HEAD'
const VERSION_COMMAND = 'describe --always'
const BRANCH_COMMAND = 'rev-parse --abbrev-ref HEAD'
const NEW_COMMIT_MESSAGE = 'log -1 --pretty=%B'
const COMMIT_TIME = 'show -s --format=%cd'
try {
  const d = new Date()
  const versionStr = `
        COMMIT_ID: ${execSync(`git ${COMMITHASH_COMMAND}`)}
        Branch: ${execSync(`git ${BRANCH_COMMAND}`)}
        Release: ${execSync(`git ${VERSION_COMMAND}`)}
        CommitMessage: ${execSync(`git ${NEW_COMMIT_MESSAGE}`)}
        Version: ${packageData.version}
        CommitTime:${execSync(`git ${COMMIT_TIME}`)}
        PackingTime: ${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()} ${d.getHours()}:${d.getMinutes()}
        `
  fs.writeFileSync(`dist/version.txt`, versionStr)
} catch (e) {
  throw new Error(e)
}

2.修改package.json的打包脚本:

3.使用npm run build:prod进行打包会输出version.txt文件在dist目录下

详情如下:

ps:

在浏览器环境下直接执行 Node.js 的 child_process 模块是不可行的,因为浏览器环境无法直接访问操作系统的命令行

相关推荐
gnip1 分钟前
项目开发流程之技术调用流程
前端·javascript
转转技术团队15 分钟前
多代理混战?用 PAC(Proxy Auto-Config) 优雅切换代理场景
前端·后端·面试
南囝coding16 分钟前
这几个 Vibe Coding 经验,真的建议学!
前端·后端
gnip30 分钟前
SSE技术介绍
前端·javascript
yinke小琪44 分钟前
JavaScript DOM节点操作(增删改)常用方法
前端·javascript
枣把儿1 小时前
Vercel 收购 NuxtLabs!Nuxt UI Pro 即将免费!
前端·vue.js·nuxt.js
望获linux1 小时前
【Linux基础知识系列】第四十三篇 - 基础正则表达式与 grep/sed
linux·运维·服务器·开发语言·前端·操作系统·嵌入式软件
爱编程的喵1 小时前
从XMLHttpRequest到Fetch:前端异步请求的演进之路
前端·javascript
喜欢吃豆1 小时前
深入企业内部的MCP知识(三):FastMCP工具转换(Tool Transformation)全解析:从适配到增强的工具进化指南
java·前端·人工智能·大模型·github·mcp
豆苗学前端1 小时前
手把手实现支持百万级数据量、高可用和可扩展性的穿梭框组件
前端·javascript·面试