Cara Angular menggabungkan Git Commit untuk pemprosesan versi

Artikel ini akan membawa anda untuk terus belajar angular dan memperkenalkan kaedah Angular digabungkan dengan pemprosesan versi Git Commit saya harap ia akan membantu semua orang.

Gambar di atas ialah maklumat versi 测试环境/开发环境 yang dipaparkan pada halaman. [Tutorial berkaitan disyorkan: "tutorial sudut"]

akan diperkenalkan kemudian

seperti yang ditunjukkan dalam gambar di atas Ia adalah maklumat Git Commit untuk setiap penyerahan Sudah tentu, di sini saya merekodkan setiap penyerahan Anda boleh merekodkannya setiap kali anda membina.

Jadi, mari gunakan Angular untuk mencapai kesan seterusnya. Perkara yang sama berlaku untuk React dan Vue.

Membina alam sekitar

Oleh kerana tumpuan di sini bukan untuk membina persekitaran, kita hanya boleh menggunakan angular-cli perancah untuk menjana projek secara langsung.

Langkah 1: Pasang alatan perancah

npm install -g @angular/cli

Langkah 2: Buat projek

# ng new PROJECT_NAME
ng new ng-commit

Langkah 3: Jalankan projek

npm run start

Apabila projek sedang berjalan, ia akan mendengar port 4200 secara lalai Hanya buka http://localhost:4200/ terus dalam penyemak imbas.

Dengan mengandaikan bahawa port 4200 tidak diduduki

Pada masa ini, komposisi ng-commit folder kunci projeksrc adalah seperti berikut:

src
├── app                                               // 应用主体
│   ├── app-routing.module.ts                         // 路由模块
│   .
│   └── app.module.ts                                 // 应用模块
├── assets                                            // 静态资源
├── main.ts                                           // 入口文件
.
└── style.less                                        // 全局样式

Dalam struktur direktori di atas, kami akan menambah direktori perkhidmatan app di bawah direktori services dan fail assets di bawah direktori version.json kemudian.

Rekodkan maklumat setiap penyerahan

Buat fail dalam direktori akar version.txt untuk menyimpan maklumat yang diserahkan, buat fail dalam direktori akar commit.js , digunakan untuk mengendalikan maklumat penyerahan.

Fokus adalah pada commit.js, mari terus ke topik:

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

Fail di atas boleh diproses terus melalui node commit.js. Untuk memudahkan pengurusan, kami menambah baris arahan pada package.json:

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

Dengan cara ini, menggunakan npm run commit mempunyai kesan yang sama seperti node commit.js.

Jana maklumat versi

Dengan asas di atas, kami boleh menggunakan maklumat commit untuk menjana maklumat versi dalam format yang ditetapkan version.json.

Buat fail baharu version.js dalam direktori akar untuk menjana data versi.

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

Kami menambah baris arahan pada package.json untuk memudahkan pengurusan:

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

Jana maklumat versi mengikut persekitaran

Untuk berbeza Persekitaran menjana maklumat versi berbeza Katakan kita mempunyai persekitaran pembangunan development, persekitaran pengeluaran production dan persekitaran ujian kereta test.

• Maklumat versi persekitaran pengeluaran ialah major.minor.patch, seperti: 1.1.0
• Maklumat versi persekitaran pembangunan ialah major.minor.patch:beta, seperti: 1.1.0:beta
• Maklumat versi persekitaran ujian ialah major.minor.path-data:hash, seperti: 1.1.0-2022.01.01:4rtr5rg

Untuk memudahkan pengurusan persekitaran yang berbeza, kami mencipta fail baharu dalam direktori akar projek seperti berikut:

config
├── default.json          // 项目调用的配置文件
├── development.json      // 开发环境配置文件
├── production.json       // 生产环境配置文件
└── test.json             // 测试环境配置文件

Kandungan fail yang berkaitan adalah seperti berikut:

// 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 Salin maklumat konfigurasi yang berbeza persekitaran mengikut baris arahan, dan konfigurasikannya dalam 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",
}

Mudah Bro, kan?

Sepadukan kandungan ke jana maklumat versi untuk menjana maklumat versi berbeza mengikut persekitaran berbeza Kod khusus adalah seperti berikut :

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

Tambah baris arahan untuk persekitaran berbeza dalam 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",
}

<. 🎜>Maklumat versi yang dijana akan disimpan terus dalam

, laluan khusus ialah assets . src/assets/version.json

Digabungkan dengan Sudut untuk memaparkan maklumat versi pada halaman

Langkah terakhir ialah untuk memaparkan maklumat versi pada halaman, di sini ia digabungkan dengan

. angular

Gunakan

untuk menjana perkhidmatan ng generate service version dalam direktori app/services. Tambahkan maklumat permintaan dalam fail version yang dijana, seperti berikut: 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(&#39;assets/version.json&#39;)
  }
}

Sebelum menggunakan permintaan, lekapkan modul

dalam fail app.module.ts: HttpClientModule

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

// ...

imports: [
  HttpClientModule
],

Kemudian panggil sahaja dalam komponen Berikut ialah fail

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

Pada ketika ini, kami telah melengkapkan maklumat versi. Akhirnya mari kita laraskan perintah

: 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 部分，感兴趣者可以自行尝试。

更多编程相关知识，请访问：编程入门！！

Atas ialah kandungan terperinci Cara Angular menggabungkan Git Commit untuk pemprosesan versi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!