溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹Angular如何結合Git Commit進行版本處理，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
上圖是頁面上展示的測試環境/開發環境版本信息。
后面有介紹
上圖表示的是每次提交的Git Commit的信息，當然，這里我是每次提交都記錄，你可以在每次構建的時候記錄。
So，我們接下來用 Angular 實現下效果，React 和 Vue 同理。
因為這里的重點不是搭建環境，我們直接用 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()+'-'+(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 結合。
使用 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進行版本處理”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
