上图是页面上展示的测试环境/开发环境版本信息。【相关教程推荐：《angular教程》】
后面有介绍
上图表示的是每次提交的git commit的信息，当然，这里我是每次提交都记录，你可以在每次构建的时候记录。
so，我们接下来用 angular 实现下效果，react 和 vue 同理。
搭建环境因为这里的重点不是搭建环境，我们直接用 angular-cli 脚手架直接生成一个项目就可以了。
step 1: 安装脚手架工具
npm install -g @angular/cli
step 2: 创建一个项目
# ng new project_nameng new ng-commit
step 3: 运行项目
npm run start
项目运行起来，默认监听4200端口，直接在浏览器打开http://localhost:4200/就行了。
4200 端口没被占用的前提下
此时，ng-commit 项目重点文件夹 src 的组成如下：
src├── app // 应用主体│ ├── app-routing.module.ts // 路由模块│ .│ └── app.module.ts // 应用模块├── assets // 静态资源├── main.ts // 入口文件.└── style.less // 全局样式
上面目录结构，我们后面会在 app 目录下增加 services 服务目录，和 assets 目录下的 version.json文件。
记录每次提交的信息在根目录创建一个文件version.txt，用于存储提交的信息；在根目录创建一个文件commit.js，用于操作提交信息。
重点在commit.js，我们直接进入主题：
const execsync = require('child_process').execsync;const fs = require('fs')const versionpath = 'version.txt'const buildpath = 'dist'const autopush = true;const commit = execsync('git show -s --format=%h').tostring().trim(); // 当前的版本号let versionstr = ''; // 版本字符串if(fs.existssync(versionpath)) { versionstr = fs.readfilesync(versionpath).tostring() + '\n';}if(versionstr.indexof(commit) != -1) { console.warn('\x1b[33m%s\x1b[0m', 'warming: 当前的git版本数据已经存在了!\n')} else { let name = execsync('git show -s --format=%cn').tostring().trim(); // 姓名 let email = execsync('git show -s --format=%ce').tostring().trim(); // 邮箱 let date = new date(execsync('git show -s --format=%cd').tostring()); // 日期 let message = execsync('git show -s --format=%s').tostring().trim(); // 说明 versionstr = `git:${commit}\n作者:${name}<${email}>\n日期:${date.getfullyear()+'-'+(date.getmonth()+1)+'-'+date.getdate()+' '+date.gethours()+':'+date.getminutes()}\n说明:${message}\n${new array(80).join('*')}\n${versionstr}`; fs.writefilesync(versionpath, versionstr); // 写入版本信息之后，自动将版本信息提交到当前分支的git上 if(autopush) { // 这一步可以按照实际的需求来编写 execsync(`git add ${ versionpath }`); execsync(`git commit ${ versionpath } -m 自动提交版本信息`); execsync(`git push origin ${ execsync('git rev-parse --abbrev-ref head').tostring().trim() }`) }}if(fs.existssync(buildpath)) { fs.writefilesync(`${ buildpath }/${ versionpath }`, fs.readfilesync(versionpath))}
上面的文件可以直接通过 node commit.js 进行。为了方便管理，我们在 package.json 上加上命令行：
"scripts": { "commit": "node commit.js"}
那样，使用 npm run commit 同等 node commit.js 的效果。
生成版本信息有了上面的铺垫，我们可以通过 commit 的信息，生成指定格式的版本信息version.json了。
在根目录中新建文件version.js用来生成版本的数据。
const execsync = require('child_process').execsync;const fs = require('fs')const targetfile = 'src/assets/version.json'; // 存储到的目标文件const commit = execsync('git show -s --format=%h').tostring().trim(); //当前提交的版本号，hash 值的前7位let date = new date(execsync('git show -s --format=%cd').tostring()); // 日期let message = execsync('git show -s --format=%s').tostring().trim(); // 说明let versionobj = { "commit": commit, "date": date, "message": message};const data = json.stringify(versionobj);fs.writefile(targetfile, data, (err) => { if(err) { throw err } console.log('stringify json data is saved.')})
我们在 package.json 上加上命令行方便管理：
"scripts": { "version": "node version.js"}
根据环境生成版本信息针对不同的环境生成不同的版本信息，假设我们这里有开发环境 development，生产环境 production 和车测试环境 test。
生产环境版本信息是 major.minor.patch，如：1.1.0开发环境版本信息是 major.minor.patch:beta，如：1.1.0:beta测试环境版本信息是 major.minor.path-data:hash，如：1.1.0-2022.01.01:4rtr5rg方便管理不同环境，我们在项目的根目录中新建文件如下：
config├── default.json // 项目调用的配置文件├── development.json // 开发环境配置文件├── production.json // 生产环境配置文件└── test.json // 测试环境配置文件
相关的文件内容如下：
// development.json{ "env": "development", "version": "1.3.0"}
// production.json{ "env": "production", "version": "1.3.0"}
// test.json{ "env": "test", "version": "1.3.0"}
default.json 根据命令行拷贝不同环境的配置信息，在 package.json 中配置下：
"scripts": { "copyconfigproduction": "cp ./config/production.json ./config/default.json", "copyconfigdevelopment": "cp ./config/development.json ./config/default.json", "copyconfigtest": "cp ./config/test.json ./config/default.json",}
is easy bro, right?
整合生成版本信息的内容，得到根据不同环境生成不同的版本信息，具体代码如下：
const execsync = require('child_process').execsync;const fs = require('fs')const targetfile = 'src/assets/version.json'; // 存储到的目标文件const config = require('./config/default.json');const commit = execsync('git show -s --format=%h').tostring().trim(); //当前提交的版本号let date = new date(execsync('git show -s --format=%cd').tostring()); // 日期let message = execsync('git show -s --format=%s').tostring().trim(); // 说明let versionobj = { "env": config.env, "version": "", "commit": commit, "date": date, "message": message};// 格式化日期const formatday = (date) => { let formatted_date = date.getfullyear() + "." + (date.getmonth()+1) + "." +date.getdate() return formatted_date;}if(config.env === 'production') { versionobj.version = config.version}if(config.env === 'development') { versionobj.version = `${ config.version }:beta`}if(config.env === 'test') { versionobj.version = `${ config.version }-${ formatday(date) }:${ commit }`}const data = json.stringify(versionobj);fs.writefile(targetfile, data, (err) => { if(err) { throw err } console.log('stringify json data is saved.')})
在 package.json 中添加不同环境的命令行：
"scripts": { "build:production": "npm run copyconfigproduction && npm run version", "build:development": "npm run copyconfigdevelopment && npm run version", "build:test": "npm run copyconfigtest && npm run version",}
生成的版本信息会直接存放在 assets 中，具体路径为 src/assets/version.json。
结合 angular 在页面中展示版本信息最后一步，在页面中展示版本信息，这里是跟 angular 结合。
使用 ng generate service version 在 app/services 目录中生成 version 服务。在生成的 version.service.ts 文件中添加请求信息，如下：
import { injectable } from '@angular/core';import { httpclient } from '@angular/common/http';import { observable } from 'rxjs';@injectable({ providedin: 'root'})export class versionservice { constructor( private http: httpclient ) { } public getversion():observable<any> { return this.http.get('assets/version.json') }}
要使用请求之前，要在 app.module.ts 文件挂载 httpclientmodule 模块：
import { httpclientmodule } from '@angular/common/http';// ...imports: [ httpclientmodule],
之后在组件中调用即可，这里是 app.component.ts 文件：
import { component } from '@angular/core';import { versionservice } from './services/version.service'; // 引入版本服务@component({ selector: 'app-root', templateurl: './app.component.html', styleurls: ['./app.component.less']})export class appcomponent { public version: string = '1.0.0' constructor( private readonly versionservice: versionservice ) {} ngoninit() { this.versionservice.getversion().subscribe({ next: (data: any) => { this.version = data.version // 更改版本信息 }, error: (error: any) => { console.error(error) } }) }}
至此，我们完成了版本信息。我们最后来调整下 package.json 的命令：
"scripts": { "start": "ng serve", "version": "node version.js", "commit": "node commit.js", "build": "ng build", "build:production": "npm run copyconfigproduction && npm run version && npm run build", "build:development": "npm run copyconfigdevelopment && npm run version && npm run build", "build:test": "npm run copyconfigtest && npm run version && npm run build", "copyconfigproduction": "cp ./config/production.json ./config/default.json", "copyconfigdevelopment": "cp ./config/development.json ./config/default.json", "copyconfigtest": "cp ./config/test.json ./config/default.json"}
使用 scripts 一是为了方便管理，而是方便 jenkins 构建方便调用。对于 jenkins 部分，感兴趣者可以自行尝试。
更多编程相关知识，请访问：编程入门！！
以上就是angular怎么结合git commit进行版本处理的详细内容。