首頁  >  文章  >  web前端  >  Angular怎麼結合Git Commit進行版本處理

Angular怎麼結合Git Commit進行版本處理

青灯夜游
青灯夜游轉載
2022-03-28 11:36:152038瀏覽

這篇文章帶大家繼續angular的學習,介紹一下Angular 結合 Git Commit 版本處理的方法,希望對大家有幫助!

Angular怎麼結合Git Commit進行版本處理

Angular怎麼結合Git Commit進行版本處理

上圖是頁面上展示的測試環境/開發環境版本資訊。 【相關教學推薦:《angular教學》】

後面有介紹

Angular怎麼結合Git Commit進行版本處理

##上圖表示的是每次提交的

Git Commit的信息,當然,這裡我是每次提交都記錄,你可以在每次構建的時候記錄。

So,我們接下來用

Angular 實作下效果,ReactVue 同理。

搭建環境

因為這裡的重點不是搭建環境,我們直接用

angular-cli 鷹架直接產生一個專案就可以了。

Step 1: 安裝鷹架工具

npm install -g @angular/cli

Step 2: 建立一個專案

# ng new PROJECT_NAME
ng 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()+&#39;-&#39;+(date.getMonth()+1)+&#39;-&#39;+date.getDate()+&#39; &#39;+date.getHours()+&#39;:&#39;+date.getMinutes()}\n说明:${message}\n${new Array(80).join(&#39;*&#39;)}\n${versionStr}`;
  fs.writeFileSync(versionPath, versionStr);
  // 写入版本信息之后,自动将版本信息提交到当前分支的git上
  if(autoPush) { // 这一步可以按照实际的需求来编写
    execSync(`git add ${ versionPath }`);
    execSync(`git commit ${ versionPath } -m 自动提交版本信息`);
    execSync(`git push origin ${ execSync(&#39;git rev-parse --abbrev-ref HEAD&#39;).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(&#39;child_process&#39;).execSync;
const fs = require(&#39;fs&#39;)
const targetFile = &#39;src/assets/version.json&#39;; // 存储到的目标文件

const commit = execSync(&#39;git show -s --format=%h&#39;).toString().trim(); //当前提交的版本号,hash 值的前7位
let date = new Date(execSync(&#39;git show -s --format=%cd&#39;).toString()); // 日期
let message = execSync(&#39;git show -s --format=%s&#39;).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(&#39;Stringify Json data is saved.&#39;)
})

我們在

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(&#39;child_process&#39;).execSync;
const fs = require(&#39;fs&#39;)
const targetFile = &#39;src/assets/version.json&#39;; // 存储到的目标文件
const config = require(&#39;./config/default.json&#39;);

const commit = execSync(&#39;git show -s --format=%h&#39;).toString().trim(); //当前提交的版本号
let date = new Date(execSync(&#39;git show -s --format=%cd&#39;).toString()); // 日期
let message = execSync(&#39;git show -s --format=%s&#39;).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 === &#39;production&#39;) {
  versionObj.version = config.version
}

if(config.env === &#39;development&#39;) {
  versionObj.version = `${ config.version }:beta`
}

if(config.env === &#39;test&#39;) {
  versionObj.version = `${ config.version }-${ formatDay(date) }:${ commit }`
}

const data = JSON.stringify(versionObj);

fs.writeFile(targetFile, data, (err) => {
  if(err) {
    throw err
  }
  console.log(&#39;Stringify Json data is saved.&#39;)
})

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 versionapp/services 目錄中產生 version 服務。在生成的version.service.ts 檔案中新增請求訊息,如下:

import { Injectable } from &#39;@angular/core&#39;;
import { HttpClient } from &#39;@angular/common/http&#39;;
import { Observable } from &#39;rxjs&#39;;

@Injectable({
  providedIn: &#39;root&#39;
})
export class VersionService {

  constructor(
    private http: HttpClient
  ) { }

  public getVersion():Observable<any> {
    return this.http.get(&#39;assets/version.json&#39;)
  }
}

要使用請求之前,要在

app.module.ts 檔案掛載HttpClientModule 模組:

import { HttpClientModule } from &#39;@angular/common/http&#39;;

// ...

imports: [
  HttpClientModule
],

之後在元件中呼叫即可,這裡是

app.component.ts 檔案:

import { Component } from &#39;@angular/core&#39;;
import { VersionService } from &#39;./services/version.service&#39;; // 引入版本服务

@Component({
  selector: &#39;app-root&#39;,
  templateUrl: &#39;./app.component.html&#39;,
  styleUrls: [&#39;./app.component.less&#39;]
})
export class AppComponent {

  public version: string = &#39;1.0.0&#39;

  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進行版本處理的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:juejin.cn。如有侵權,請聯絡admin@php.cn刪除