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()?
    答:不转换会被识别为一个变量
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/779027.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SMBV100A罗德与施瓦茨SMBV100A信号源

181/2461/8938产品概述&#xff1a; 罗德与施瓦茨 SMBV100A 提供卓越的射频性能以及非常高的输出电平和较短的设置时间。同时&#xff0c;SMBV100A可配备内部基带发生器&#xff0c;以生成多种数字标准&#xff08;例如LTE、LTE-Advanced、IEEE802.11ac、GNSS&#xff09;。9 …

SpringBoot 优雅的发送邮件(附源码)

文章目录 前言一、简介1. 什么是 SMTP?2. 什么是 IMAP?3. 什么是 POP3?4. IMAP 和 POP3 协议有什么不同呢?5. 什么是 JavaMailSender 和 JavaMailSenderImpl?6. 如何通过 JavaMailSenderImpl 发送邮件?二、获取邮箱配置三、简单实例1. 引入依赖2. 配置邮箱信息3. 功能实现…

【C++杂货铺】内管管理

目录 &#x1f308;前言&#x1f308; &#x1f4c1; C/C中内存分布 &#x1f4c1; new 和 delete的使用 &#x1f4c1; new 和 delete的优点 &#x1f4c1; new 和 delete的原理 &#x1f4c2; operator new 和 operator delete函数 &#x1f4c2; 内置类型 &#x1f4c2…

Java中读取html文件转成String,展示在浏览器

这里写目录标题 第一章1.1&#xff09;pom中引入依赖和html文件示例1.2&#xff09;使用hutool工具包读取html文件转为string1.3&#xff09;页面显示 第一章 1.1&#xff09;pom中引入依赖和html文件示例 引入hutool工具包依赖 <dependency><groupId>cn.hutool&…

Vue 3与其他框架对比

Vue 3与其他框架对比 Vue.js自2014年发布以来,凭借轻量级、高性能和渐进式等特点,已成为了前端开发中最流行的框架之一。近期,Vue团队正式发布了Vue 3的稳定版本,带来了诸多改进和创新,进一步提升了Vue的开发体验和性能表现。本文将结合Vue 3的新特性,对比其与React、Angular等…

【C++程序员的自我修炼】基础语法篇(一)

心中若有桃花源 何处不是水云间 目录 命名空间 &#x1f49e;命名空间的定义 &#x1f49e; 命名空间的使用 输入输出流 缺省参数 函数的引用 引用的定义&#x1f49e; 引用的表示&#x1f49e; 引用的特性&#x1f49e; 常量引用&#x1f49e; 引用的使用场景 做参数 做返回值…

关于云墙的一些功能

功能介绍 产品功能功能解释应用识别在进行分析报文头的基础上&#xff0c;结合不同的应用协议特征库综合判断所属的应用监控统计对设备数据进行统计&#xff0c;并以柱状图、折线图、表格、报表、日志等方式呈现出来&#xff0c;帮助用户通过统计数据掌握设备状况&#xff0c;…

Docker进阶:Docker Swarm(集群搭建) —实现容器编排的利器

Docker进阶&#xff1a;Docker Swarm&#xff08;集群搭建&#xff09; —实现容器编排的利器 1、什么是Docker Swarm&#xff1f;2、Docker Swarm 与 Docker Compose的区别3、创建一个Swarm集群&#xff08;1-Manager&#xff0c;2-Worker&#xff09;1、资源准备2、初始化Swa…

使用Windows编辑工具直接编辑Linux上的代码

windows直接编辑Linux上代码 步骤如下&#xff1a; 1、按照samba 2、vim /etc/samba/smb.conf 3、输入以下内容 4 、重启下samba 输入以下内容 pkill smbd smbd 查看采用 ps -ef|grep smbd 给予文件权限&#xff1a; chmod 777 /code 5、winr 修改全选才能进入并且编写。…

如何使用python链表

在Python中&#xff0c;可以使用类来实现链表的数据结构。链表是一种数据结构&#xff0c;它由一系列节点组成&#xff0c;每个节点包含一个数据元素和一个指向下一个节点的引用。 下面是一个简单的链表类的示例&#xff1a; class Node:def __init__(self, data):self.data …

【力扣hot100】25 K个一组反转链表(c++)解析

这是一题比较简单的hard 思路和模拟方法相同&#xff0c;首先判断链表是否有K个数&#xff0c;不足则直接返回head。否则对前K个数进行反转&#xff0c;然后进行递归处理。 class Solution { public:ListNode* reverseKGroup(ListNode* head, int k) {ListNode *p head;for(i…

laravel(源码阅读):kernel过程和console调度artisan命令

http kernel 使用相关&#xff1a;通过artisan命令、计划任务、队列启动框架进行处理的 创建应用实例绑定内核到容器解析http内核实例处理http请求发送响应终止应用程序&#xff0c;中间件 terminable 善后。session写入存储器中。 Console artisan工具&#xff1a;执行计划…

快速上手Spring Cloud 六:容器化与微服务化

快速上手Spring Cloud 一&#xff1a;Spring Cloud 简介 快速上手Spring Cloud 二&#xff1a;核心组件解析 快速上手Spring Cloud 三&#xff1a;API网关深入探索与实战应用 快速上手Spring Cloud 四&#xff1a;微服务治理与安全 快速上手Spring Cloud 五&#xff1a;Spring …

移动视频-智能安全帽-5G/4G记录仪-布控球-无人机5G/4G回传产品及平台常用技术支持资料汇总

视频融合通信平台相关文档 基于webRTC构建的新一代视频融合可视指挥调度平台smarteye server WEB SDK restful接口文档&#xff0c;https://smarteye.besovideo.com/doc/ 新一代smarteye配套的WEB融合可视指挥调度平台软件常用功能&#xff0c;https://www.besovideo.com/d…

国密SM2前端加密解密

<template><div><el-button type"primary" click"getphone()">sm2加密按钮</el-button><el-button type"primary" click"returnphone()">sm2解密按钮</el-button></div> </template>…

前端 JS 压缩图片的思路(附源码)

前言 相信大家都做过图片上传相关的功能,在图片上传的过程中,不知道大家有没有考虑过文件体积的问题,如果我们直接将原图片上传,可以图片体积比较大,一是上传速度较慢,二是前端进行渲染时速度也比较慢,比较影响客户的体验感。所以在不影响清晰度的情况下,前端可以在上…

vue3+ts白屏问题解决

文章目录 打开白屏解决方法可能出现问题使用base导致的使用baseUrl导致的 注意点vue3ts白屏问题知识分享 打开白屏 解决方法 在vue.config.js页面 添加publicPath:./, const { defineConfig } require(vue/cli-service)module.exports defineConfig({ transpileDependenci…

AcWing 4609:火柴棍数字 ← 贪心算法

【题目来源】 https://www.acwing.com/problem/content/4612/【题目描述】 给定 n 个火柴棍&#xff0c;你可以用它们摆出数字 0∼9。 摆出每个数字所需要的具体火柴棍数量如下图所示&#xff1a; 请你用这些火柴棍摆成若干个数字&#xff0c;并把这些数字排成一排组成一个整数…

Git版本管理使用手册 - 8 - 合并分支、解决冲突

合并整个开发分支 切换到本地test分支&#xff0c;选择右下角远程开发分支&#xff0c;选择Merge into Current。然后提交到远程test仓库。 合并某次提交的代码 当前工作区切换成test分支&#xff0c;选择远程仓库中的dev开发分支&#xff0c;选择需要合并的提交版本右击&a…

SQL Server 实验二:数据库视图的创建和使用

目录 第一关 相关知识 什么是表 操作数据表 创建数据表 插入数据 修改表结构 删除数据表 编程要求 第一关实验代码&#xff1a; 第二关 相关知识 视图是什么 视图的优缺点 视图的优点 视图的缺点 操作视图 创建视图 通过视图向基本表中插入数据 通过视图修改基本表的…