Angular怎么结合Git Commit进行版本处理( 二 ) _生活百科

我们在 package.json 上加上命令行方便管理：
"scripts": { "version": "node version.js"}根据环境生成版本信息针对不同的环境生成不同的版本信息，假设我们这里有开发环境 development ，生产环境 production 和车测试环境 test 。

major.minor.patch

major.minor.patch:beta

major.minor.path-data:hash

方便管理不同环境，我们在项目的根目录中新建文件如下：
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 = https://www.52zixue.com/zhanzhang/webqd/js/03/28/68749/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) } }) }}