Home > Article > Web Front-end > How Angular combines Git Commit for version processing
This article will take you to continue learning angular and introduce the method of Angular combined with Git Commit version processing. I hope it will be helpful to everyone!
The picture above is the Test environment/development environment version information displayed on the page. [Recommended related tutorials: "angular tutorial"]
will be introduced later
as shown in the picture above It is the Git Commit information of each commit. Of course, here I record every commit. You can record it every time you build.
So, let’s use Angular to achieve the next effect. The same is true for React and Vue.
Because the focus here is not to build the environment, we can directly use the angular-cli scaffolding to directly generate a project.
Step 1: Install scaffolding tools
npm install -g @angular/cli
Step 2: Create a project
# ng new PROJECT_NAME ng new ng-commit
Step 3: Run the project
npm run start
When the project is running, it will listen to the 4200 port by default. Just open http://localhost:4200/ directly in the browser.
On the premise that port 4200 is not occupied
At this time, ng-commit the key folder of the project src The composition is as follows:
src ├── app // 应用主体 │ ├── app-routing.module.ts // 路由模块 │ . │ └── app.module.ts // 应用模块 ├── assets // 静态资源 ├── main.ts // 入口文件 . └── style.less // 全局样式
The above directory structure, we will add services service directory under the app directory later, and # under the assets directory ##version.json file.
version.txt in the root directory to store the submitted information; in the root directory Create a file commit.js for manipulating submission information.
commit.js, we go directly to the topic:
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))
}The above files can be processed directly through node commit.js. In order to facilitate management, we add the command line to package.json:
"scripts": {
"commit": "node commit.js"
} Like this, use npm run commit which is equivalent to node commit.js Effect.
commit informationversion .json is gone.
version.js to generate version data.
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.')
})We add a command line to package.json to facilitate management:
"scripts": {
"version": "node version.js"
}
development, production environment production and car test environment test.
, such as: 1.1.0
, such as: 1.1.0:beta
, such as: 1.1.0-2022.01.01: 4rtr5rg
config ├── default.json // 项目调用的配置文件 ├── development.json // 开发环境配置文件 ├── production.json // 生产环境配置文件 └── test.json // 测试环境配置文件The relevant file contents are as follows:
// 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 Copy the configuration information of different environments based on the command line, and configure it in 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?
Integrate the contents ofGenerate version information to generate different version information according to different environments. The specific code is as follows:
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.')
})Add in package.json Command lines in different environments: The version information generated by
"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",
} will be directly stored in assets, and the specific path is src/assets/version.json.
angular.
ng generate service version to generate the version service in the app/services directory. Add the request information in the generated version.service.ts file, as follows:
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')
}
} Before using the request, you must mount the app.module.ts file HttpClientModule Module:
import { HttpClientModule } from '@angular/common/http';
// ...
imports: [
HttpClientModule
], Then just call it in the component. Here is app.component.ts File:
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)
}
})
}
} At this point, we are done version information. Let’s finally adjust the commands of 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 部分，感兴趣者可以自行尝试。
更多编程相关知识，请访问：编程入门！！
The above is the detailed content of How Angular combines Git Commit for version processing. For more information, please follow other related articles on the PHP Chinese website!