前端项目构建打包生成Git信息文件

请添加图片描述

系列文章目录

TypeScript 从入门到进阶专栏

文章目录

  • 系列文章目录
  • 前言
  • 一、前端项目构建打包生成Git信息文件作用
  • 二、步骤
    • 1.引入相关的npm包
      • 1.1. **fs** 包
      • 1.2. **child_process** 包
      • 1.3. **os** 包 (非必须 如果你想生成的文件信息中包含当前电脑信息则可用)
      • 1.4. **path** 包 (非必须 如果你想生成的文件信息中包含当前项目版本信息则可用)
    • 2.创建脚本文件
    • 2.设置项目打包脚本
    • 3.运行项目打包命令
  • 我的脚本文件

前言

前端项目构建打包生成Git信息文件的作用是将当前代码所属的Git仓库的相关信息（例如commit hash、branch name、commit message等）保存在项目中的一个文件中。这样做的目的是为了方便在程序中获取和展示当前代码的版本信息，以及方便对项目进行版本管理和追踪。

一、前端项目构建打包生成Git信息文件作用

  1. 便于查看当前代码所属的Git分支和最近的commit hash，方便开发人员进行调试和追踪问题。
  2. 方便在应用程序界面或其他需要展示版本信息的地方展示当前代码的版本号，以便用户了解当前使用的是哪个版本的代码。
  3. 在持续集成和部署流程中，可以将生成的Git信息文件上传到服务器，方便在服务器端查看和追踪部署到服务器的代码版本。
  4. 可以结合自动化工具或脚本，在每次构建打包过程中自动更新Git信息文件，以保证该文件中的版本信息与当前代码一致，方便后续的版本管理和追踪。
  5. 方便开发人员在使用第三方工具或库时，能够快速确定所使用的版本，以解决可能出现的兼容性或功能问题。

二、步骤

1.引入相关的npm包

首先我们需要在项目中安装四个需要的npm包

1.1. fs 包

作用：提供了文件系统相关的功能，允许你在Node.js环境中对文件进行读取、写入、修改、删除等操作。。 用于生成最后的信息文件

安装方式如下

npm install fs --save-dev
或
pnpm add --save-dev
或
yran install fs --save-dev

1.2. child_process 包

是一个用于创建子进程的模块。它提供了一些方法来执行外部命令、创建子进程，并与其进行通信。

安装方式如下

npm install child_process --save-dev
或
pnpm child_process --save-dev
或
yran install child_process --save-dev

1.3. os 包 (非必须 如果你想生成的文件信息中包含当前电脑信息则可用)

os包可以让开发者在Node.js环境中访问操作系统相关的功能。

安装方式如下

npm install os --save-dev
或
pnpm os --save-dev
或
yran install os --save-dev

os包的方法

  1. os.platform()：获取当前操作系统的平台名称，例如’win32’、'linux’等。
  2. os.arch()：获取当前操作系统的CPU架构，例如’x64’、'arm’等。
  3. os.hostname()：获取当前计算机的主机名。
  4. os.type()：获取当前操作系统的类型，例如’Windows_NT’、'Linux’等。
  5. os.release()：获取当前操作系统的版本号。
  6. os.totalmem()：获取当前系统的总内存大小。
  7. os.freemem()：获取当前系统的可用内存大小。
  8. os.cpus()：获取当前计算机的CPU信息。
  9. os.networkInterfaces()：获取当前计算机的网络接口信息。

1.4. path 包 (非必须 如果你想生成的文件信息中包含当前项目版本信息则可用)

npm install path --save-dev
或
pnpm path --save-dev
或
yran install path --save-dev

2.创建脚本文件

在项目的根目录文件下创建 automated_scripts 文件夹 在此文件夹下创建 build.js 文件 如下图所示。也可以放在别的位置 根据自己的项目来 。

请添加图片描述

build.js 文件 整体代码如下：

import fs from 'fs'; // 引入文件系统
import { execSync } from 'child_process'; // 开启一个子进程
import path from 'path';
import os from 'os';// 获取当前命令行上下文路径
const currentDirectory = process.cwd();// 日期格式转换函数  格式： 2024-1-10 16:57:40
const transferTime = (date) => {const currentDate = date ? new Date(date) : new Date();const year = currentDate.getFullYear();const month = currentDate.getMonth() + 1; // getMonth() 返回的是 0-11，需要加 1const dates = currentDate.getDate();const hours = currentDate.getHours();const minutes = currentDate.getMinutes();const seconds = currentDate.getSeconds();return `${hours}:${minutes}:${seconds} ${year}-${month}-${dates}`;
};//主体函数
async function start() {console.log('\x1B[32m', '开始打包项目', '\x1B[0m');// 执行npm打包命令 这里根据 你自己项目打包时运行的命令进行修改 一般是vite build execSync('vite build --mode production', {stdio: 'inherit',});// 获取当前git分支名称const branchName = execSync('git rev-parse --abbrev-ref HEAD').toString().trim();	//打包时间const date = new Date().toLocaleString();// 打印console.log('\x1B[33m','------------------------------------------','\x1B[0m');console.log('\x1B[32m','\t项目信息：\n' +`\t版本号：${currentVersion}\n` +`\t打包时间：${date}\n` +`\tgit分支名称：${branchName}\n`,'\x1B[0m');console.log('\x1B[33m','------------------------------------------','\x1B[0m');const branch = execSync('git rev-parse --abbrev-ref HEAD').toString().trim();//此处添加git命令const gitDataMap ={'git.branch': 'git rev-parse --abbrev-ref HEAD','git.commit.id': `git rev-parse --verify ${branch ? 'origin/' + branch : 'HEAD'}`,'git.commit.id.abbrev': `git rev-parse --short ${branch ? 'origin/' + branch : 'HEAD'}`,'git.commit.message.full': `git log -1 ${branch ? 'origin/' + branch : ''} --format="%B"`,'git.commit.message.short': `git log -1 ${branch ? 'origin/' + branch : ''} --format="%s"`,'git.commit.time': `git log -1 ${branch ? 'origin/' + branch : ''} --format="%cd"`,'git.commit.user.email': `git log -1 ${branch ? 'origin/' + branch : ''} --format="%ae"`,'git.commit.user.name': `git log -1 ${branch ? 'origin/' + branch : ''} --format="%an"`,'git.dirty': 'git status --porcelain','git.remote.origin.url': 'git remote get-url origin','git.total.commit.count': 'git rev-list --count HEAD',}Object.keys(gitDataMap).forEach((value) => {newStr[value] = execSync(gitDataMap[value]).toString().trim();});//将日志写入dist文件夹下的 web.jsonfs.writeFile('dist/web.json', JSON.stringify(newStr), 'utf-8', (err) => {if (err != null) {console.log('ERROR:', err);} else {console.log('打包完成');}});}

2.设置项目打包脚本

我这里是用vue项目为例子 React、Angular 项目也是差不多的做法

打开项目根目录下的 package.json文件 将scripts下的build 改成

node  automated_scripts/build.js

如下图
请添加图片描述

3.运行项目打包命令

pnpm run build

最终就能在项目打包的dist文件夹下生成一个 web.json文件

我的脚本文件

我这里实现了 获取项目信息 获取当前打包的电脑信息 获取get信息 及打包之前进行校验等功能

import fs from 'fs'; // 引入文件系统
import { execSync } from 'child_process'; // 开启一个子进程
import path from 'path';
import os from 'os';
//import packages from './package.json'
// 获取当前命令行上下文路径
const currentDirectory = process.cwd();const transferTime = (date) => {const currentDate = date ? new Date(date) : new Date();const year = currentDate.getFullYear();const month = currentDate.getMonth() + 1; // getMonth() 返回的是 0-11，需要加 1const dates = currentDate.getDate();const hours = currentDate.getHours();const minutes = currentDate.getMinutes();const seconds = currentDate.getSeconds();return `${hours}:${minutes}:${seconds} ${year}-${month}-${dates}`;
};/*** 检查本地是否有未提交的更改*/
const checkChanges = async () => {try {//本地分支名称const branch = execSync('git rev-parse --abbrev-ref HEAD').toString().trim();//本地分支 commit hashconst hash = execSync('git rev-parse HEAD').toString().trim();//远程分支 commit hashconst remoteHash = execSync(`git rev-parse ${branch ? 'origin/' + branch : 'HEAD'}`).toString().trim();const data = execSync('git status').toString().trim();if ((data.includes('Changes to be committed') ||data.includes('Untracked files') ||data.includes('Changes not staged for commit') ||data.includes('use "git push" to publish your local commits')) &&hash !== remoteHash) {if (data.includes('Changes not staged for commit')) {console.log('\x1B[33m','本地项目有数据有文件未add或未commit，请先保存、提交远程 再进行打包','\x1B[0m');}if (data.includes('Untracked files')) {console.log('\x1B[33m','本地项目有数据有文件add了 但未进行commit，请先保存、提交远程 再进行打包','\x1B[0m');}if (data.includes('Changes to be committed')) {console.log('\x1B[33m','本地项目有数据有文件未add或未commit，请先保存、提交远程 再进行打包','\x1B[0m');}if (data.includes('use "git push" to publish your local commits')) {console.log('\x1B[33m','本地项目有数据有文件未push，请先提交远程 再进行打包','\x1B[0m');}if (hash !== remoteHash) {console.log('\x1B[33m','本地项目与远程分支不一致，请先同步再进行打包','\x1B[0m');}return 0;}return 1;} catch (error) {return 1;}
};async function start() {console.log('\x1B[32m', '开始打包项目', '\x1B[0m');//版本号获取const packageJsonPath = path.join(currentDirectory, 'package.json');const packageJsonContent = fs.readFileSync(packageJsonPath, 'utf8');const packageJson = JSON.parse(packageJsonContent);const currentVersion = packageJson.version;console.log('\x1B[32m', `版本号：${currentVersion}\n`, '\x1B[0m');if (await checkChanges()) {// 执行npm打包命令execSync('vite build --mode production', {stdio: 'inherit',});// 获取当前git分支名称const branchName = execSync('git rev-parse --abbrev-ref HEAD').toString().trim();//打包时间const date = new Date().toLocaleString();// 打印console.log('\x1B[33m','------------------------------------------','\x1B[0m');console.log('\x1B[32m','\t项目信息：\n' +`\t版本号：${currentVersion}\n` +`\t打包时间：${date}\n` +`\tgit分支名称：${branchName}\n`,'\x1B[0m');console.log('\x1B[33m','------------------------------------------','\x1B[0m');const newStr = {'git.build.host': '','git.build.architecture': '','git.build.os': '','git.build.release': '','git.build.time': '','git.build.user.email': '','git.build.user.name': '','git.build.version': '',};//此处添加打包信息newStr['git.build.version'] = currentVersion;newStr['git.build.host'] = os.hostname();newStr['git.build.architecture'] = os.arch();newStr['git.build.os'] = os.type();newStr['git.build.release'] = os.release();newStr['git.build.time'] = transferTime();const branch = execSync('git rev-parse --abbrev-ref HEAD').toString().trim();//此处添加git命令const gitDataMap = {'git.branch': 'git rev-parse --abbrev-ref HEAD','git.commit.id': `git rev-parse --verify ${branch ? 'origin/' + branch : 'HEAD'}`,'git.commit.id.abbrev': `git rev-parse --short ${branch ? 'origin/' + branch : 'HEAD'}`,'git.commit.message.full': `git log -1 ${branch ? 'origin/' + branch : ''} --format="%B"`,'git.commit.message.short': `git log -1 ${branch ? 'origin/' + branch : ''} --format="%s"`,'git.commit.time': `git log -1 ${branch ? 'origin/' + branch : ''} --format="%cd"`,'git.commit.user.email': `git log -1 ${branch ? 'origin/' + branch : ''} --format="%ae"`,'git.commit.user.name': `git log -1 ${branch ? 'origin/' + branch : ''} --format="%an"`,'git.dirty': 'git status --porcelain','git.remote.origin.url': 'git remote get-url origin','git.total.commit.count': 'git rev-list --count HEAD',};Object.keys(gitDataMap).forEach((value) => {newStr[value] = execSync(gitDataMap[value]).toString().trim();if (value === 'git.commit.time') {newStr[value] = transferTime(newStr[value]);}});newStr['git.build.user.email'] = newStr['git.commit.user.email'];newStr['git.build.user.name'] = newStr['git.commit.user.name'];//将日志写入log.txtfs.writeFile('dist/web.version', JSON.stringify(newStr), 'utf-8', (err) => {if (err != null) {console.log('ERROR:', err);} else {console.log('打包完成');}});}// } else {//   console.log(//     '\x1B[31m',//     '本地有未提交的更改，请先提交 再进行打包',//     '\x1B[0m',//   )// }
}start();

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

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

相关文章

【38 Pandas+Pyecharts | 奥迪汽车销量数据分析可视化】

【38 Pandas+Pyecharts | 奥迪汽车销量数据分析可视化】

文章目录 🏳️‍🌈 1. 导入模块🏳️‍🌈 2. Pandas数据处理2.1 读取数据2.2 查看数据信息2.3 数据处理 🏳️‍🌈 3. Pyecharts数据可视化3.1 奥迪用户购车时间分布3.2 奥迪各系销量占比饼图3.3 奥迪各系销量…
阅读更多...
Web APIs知识点讲解

Web APIs知识点讲解

学习目标: 能获取DOM元素并修改元素属性具备利用定时器间歇函数制作焦点图切换的能力 一.Web API 基本认知 1.作用和分类 作用: 就是使用 JS 去操作 html 和浏览器分类：DOM (文档对象模型)、BOM（浏览器对象模型） 2.DOM DOM(Document Ob…
阅读更多...
vbs读取数据库值前端FlexGrid前导0出不来的原因

vbs读取数据库值前端FlexGrid前导0出不来的原因

vbs读取数据库值前端FlexGrid前导0出不来的原因 原因 系统设置问题 解决 修改系统默认数值显示： 1）控制面板找到“区域”，点击“更改日期、时间和数字模式”，在弹出窗口点击“其他设置” 2）在数字一栏中的“显示前…
阅读更多...
ZGC垃圾收集器介绍

ZGC垃圾收集器介绍

ZGC（The Z Garbage Collector）是JDK 11中推出的一款低延迟垃圾回收器，它的设计目标包括： 停顿时间不超过10ms；停顿时间不会随着堆的大小，或者活跃对象的大小而增加；支持8MB~4TB级别的堆&#x…
阅读更多...
计算机毕业设计 基于Java的流浪动物救助平台的设计与实现 Java实战项目 附源码+文档+视频讲解

计算机毕业设计 基于Java的流浪动物救助平台的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍：✌从事软件开发10年之余，专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ 🍅文末获取源码联系🍅 👇🏻 精…
阅读更多...
chatglm3的api调用

chatglm3的api调用

conda activate chatglm3 cd openai_api_demo python openai_api.py 启动ok，然后内网映射后 anaconda启动jupyter !pip install openai1.6.1 -i https://pypi.tuna.tsinghua.edu.cn/simple/ """ This script is an example of using the OpenAI …
阅读更多...
vue+springboot+mybatis实现项目管理系统

vue+springboot+mybatis实现项目管理系统

项目前端：https://gitee.com/anxin-personal-project/project-management-front 项目后端：https://gitee.com/anxin-personal-project/project-management-behind 项目均可运行！！！有问题留言，如果看到了会…
阅读更多...
怎么投稿各大媒体网站？

怎么投稿各大媒体网站？

怎么投稿各大媒体网站？这是很多写作者及自媒体从业者经常面临的问题。在信息爆炸的时代，如何将自己的文章推送到广大读者面前，成为了一个不可避免的挑战。本文将为大家介绍一种简单有效的投稿方法——媒介库发稿平台发稿，帮助大家…
阅读更多...
网络协议与攻击模拟_03实施ARP欺骗和攻击

网络协议与攻击模拟_03实施ARP欺骗和攻击

一、ARP攻击 1、实验环境 kali Linux （安装arpspoof工具）被攻击主机 2、kali配置 kali Linux系统是基于debian Linux系统，采用deb包管理方式，可以使用apt源的方式进行直接从源的安装。 配置kali网络源 vim /etc/apt/sources…
阅读更多...
电脑USB接口不同颜色的含义

电脑USB接口不同颜色的含义

当你看到笔记本电脑或台式机的USB端口时，你会发现USB端口的颜色很多；这些颜色可不只是为了好看，实际上不同颜色代表着不同的性能，那么这些带颜色的USB端口都是什么含义呢，下面就具体介绍下不同颜色代表的含义。-----吴…
阅读更多...
寒武纪bang的基础向量除法和规约编程

寒武纪bang的基础向量除法和规约编程

前言：寒武纪显卡是国产GPU公司开发的显卡，相比于英伟达(nvidia)公司的A100,V100，Geforce RTX显卡来说，不仅性能上有大量的不同，使用过程也有非常大的差异，本文尝试解读一些寒武纪显卡的基本使用情况。寒武纪…
阅读更多...
Python GIL 一文全知道！

Python GIL 一文全知道！

GIL 作为 Python 开发者心中永远的痛，在最近即将到来的更新中，终于要彻底解决了，整个 Python 社群都沸腾了 什么是GIL？ GIL是英文学名global interpreter lock的缩写，中文翻译成全局解释器锁。GIL需要解决的是线程竞…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023