Angular如何結(jié)合Git Commit進(jìn)行版本處理

這篇文章主要介紹Angular如何結(jié)合Git Commit進(jìn)行版本處理，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

上圖是頁(yè)面上展示的測(cè)試環(huán)境/開發(fā)環(huán)境版本信息。

后面有介紹

上圖表示的是每次提交的Git Commit的信息，當(dāng)然，這里我是每次提交都記錄，你可以在每次構(gòu)建的時(shí)候記錄。

So，我們接下來用 Angular 實(shí)現(xiàn)下效果，React 和 Vue 同理。

搭建環(huán)境

因?yàn)檫@里的重點(diǎn)不是搭建環(huán)境，我們直接用 angular-cli 腳手架直接生成一個(gè)項(xiàng)目就可以了。

Step 1: 安裝腳手架工具

npm install -g @angular/cli

Step 2: 創(chuàng)建一個(gè)項(xiàng)目

# ng new PROJECT_NAME
ng new ng-commit

Step 3: 運(yùn)行項(xiàng)目

npm run start

項(xiàng)目運(yùn)行起來，默認(rèn)監(jiān)聽4200端口，直接在瀏覽器打開http://localhost:4200/就行了。

4200 端口沒被占用的前提下

此時(shí)，ng-commit 項(xiàng)目重點(diǎn)文件夾 src 的組成如下：

src
├── app                                               // 應(yīng)用主體
│   ├── app-routing.module.ts                         // 路由模塊
│   .
│   └── app.module.ts                                 // 應(yīng)用模塊
├── assets                                            // 靜態(tài)資源
├── main.ts                                           // 入口文件
.
└── style.less                                        // 全局樣式

上面目錄結(jié)構(gòu)，我們后面會(huì)在 app 目錄下增加 services 服務(wù)目錄，和 assets 目錄下的 version.json文件。

記錄每次提交的信息

在根目錄創(chuàng)建一個(gè)文件version.txt，用于存儲(chǔ)提交的信息；在根目錄創(chuàng)建一個(gè)文件commit.js，用于操作提交信息。

重點(diǎn)在commit.js，我們直接進(jìn)入主題：

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(); // 當(dāng)前的版本號(hào)

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: 當(dāng)前的git版本數(shù)據(jù)已經(jīng)存在了!\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);
  // 寫入版本信息之后，自動(dòng)將版本信息提交到當(dāng)前分支的git上
  if(autoPush) { // 這一步可以按照實(shí)際的需求來編寫
    execSync(`git add ${ versionPath }`);
    execSync(`git commit ${ versionPath } -m 自動(dòng)提交版本信息`);
    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 進(jìn)行。為了方便管理，我們?cè)?package.json 上加上命令行：

"scripts": {
  "commit": "node commit.js"
}

那樣，使用 npm run commit 同等 node commit.js 的效果。

生成版本信息

有了上面的鋪墊，我們可以通過 commit 的信息，生成指定格式的版本信息version.json了。

在根目錄中新建文件version.js用來生成版本的數(shù)據(jù)。

const execSync = require('child_process').execSync;
const fs = require('fs')
const targetFile = 'src/assets/version.json'; // 存儲(chǔ)到的目標(biāo)文件

const commit = execSync('git show -s --format=%h').toString().trim(); //當(dāng)前提交的版本號(hào)，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.')
})

我們?cè)?package.json 上加上命令行方便管理：

"scripts": {
  "version": "node version.js"
}

根據(jù)環(huán)境生成版本信息

針對(duì)不同的環(huán)境生成不同的版本信息，假設(shè)我們這里有開發(fā)環(huán)境 development，生產(chǎn)環(huán)境 production 和車測(cè)試環(huán)境 test。

• 生產(chǎn)環(huán)境版本信息是 major.minor.patch，如：1.1.0

• 開發(fā)環(huán)境版本信息是 major.minor.patch:beta，如：1.1.0:beta

• 測(cè)試環(huán)境版本信息是 major.minor.path-data:hash，如：1.1.0-2022.01.01:4rtr5rg

方便管理不同環(huán)境，我們?cè)陧?xiàng)目的根目錄中新建文件如下：

config
├── default.json          // 項(xiàng)目調(diào)用的配置文件
├── development.json      // 開發(fā)環(huán)境配置文件
├── production.json       // 生產(chǎn)環(huán)境配置文件
└── test.json             // 測(cè)試環(huán)境配置文件

相關(guān)的文件內(nèi)容如下：

// 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 根據(jù)命令行拷貝不同環(huán)境的配置信息，在 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?

整合生成版本信息的內(nèi)容，得到根據(jù)不同環(huán)境生成不同的版本信息，具體代碼如下：

const execSync = require('child_process').execSync;
const fs = require('fs')
const targetFile = 'src/assets/version.json'; // 存儲(chǔ)到的目標(biāo)文件
const config = require('./config/default.json');

const commit = execSync('git show -s --format=%h').toString().trim(); //當(dāng)前提交的版本號(hào)
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 中添加不同環(huán)境的命令行：

"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",
}

生成的版本信息會(huì)直接存放在 assets 中，具體路徑為 src/assets/version.json。

結(jié)合 Angular 在頁(yè)面中展示版本信息

最后一步，在頁(yè)面中展示版本信息，這里是跟 angular 結(jié)合。

使用 ng generate service version 在 app/services 目錄中生成 version 服務(wù)。在生成的 version.service.ts 文件中添加請(qǐng)求信息，如下：

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')
  }
}

要使用請(qǐng)求之前，要在 app.module.ts 文件掛載 HttpClientModule 模塊：

import { HttpClientModule } from '@angular/common/http';

// ...

imports: [
  HttpClientModule
],

之后在組件中調(diào)用即可，這里是 app.component.ts 文件：

import { Component } from '@angular/core';
import { VersionService } from './services/version.service'; // 引入版本服務(wù)

@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)
      }
    })
  }
}

至此，我們完成了版本信息。我們最后來調(diào)整下 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 構(gòu)建方便調(diào)用。對(duì)于 jenkins 部分，感興趣者可以自行嘗試。

以上是“Angular如何結(jié)合Git Commit進(jìn)行版本處理”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！