วิธีที่ Angular รวม Git Commit สำหรับการประมวลผลเวอร์ชัน

วิธีเริ่มต้นใช้งาน VUE3.0 อย่างรวดเร็ว: เข้าสู่การเรียนรู้

รูปภาพด้านบนแสดงข้อมูล测试环境/开发环境ที่แสดงบนเพจ [บทช่วยสอนที่เกี่ยวข้องที่แนะนำ: "บทช่วยสอนเชิงมุม"]

จะมีการแนะนำในภายหลัง

รูปภาพด้านบนแสดงข้อมูล Git Commit ของการส่งแต่ละครั้ง แน่นอนว่าฉันจะบันทึกการส่งทุกครั้งที่นี่

ดังนั้น ลองใช้ Angular เพื่อให้ได้เอฟเฟกต์ถัดไป เช่นเดียวกับ React และ Vue

การสร้างสภาพแวดล้อม

เนื่องจากจุดมุ่งเน้นที่นี่ไม่ใช่การสร้างสภาพแวดล้อม เราจึงสามารถใช้โครง angular-cli เพื่อสร้างโครงการโดยตรงได้

ขั้นตอนที่ 1: ติดตั้งเครื่องมือนั่งร้าน

npm install -g @angular/cli

ขั้นตอนที่ 2: สร้างโครงการ

# ng ใหม่ PROJECT_NAME
ng ใหม่ ng-commit

ขั้นตอนที่ 3: เรียกใช้โครงการ

npm run start

โครงการกำลังทำงานอยู่ โดยจะฟังพอร์ต 4200 โดยค่าเริ่มต้น เพียงเปิด http://localhost:4200/ ในเบราว์เซอร์

ภายใต้สมมติฐานที่ว่าพอร์ต 4200 ไม่ถูกครอบครอง

ในขณะนี้ องค์ประกอบของโฟลเดอร์คีย์ src ของโปรเจ็กต์ ng-commit จะเป็นดังนี้:

src
├── แอป // เนื้อหาแอปพลิเคชัน │ ├── app-routing.module.ts // โมดูลเส้นทาง │ .
│ └── app.module.ts // โมดูลแอปพลิเคชัน ├── สินทรัพย์ // ทรัพยากรคงที่ ├── main.ts // ไฟล์รายการ
└── style.less // โครงสร้างไดเร็กทอรีเหนือสไตล์โกลบอล

เราจะเพิ่มไดเร็กทอรี services ในไดเร็กทอรี app และไฟล์ version.json ในไดเร็กทอรี assets ในภายหลัง

บันทึกข้อมูลของการส่งแต่ละครั้ง

และสร้างไฟล์ version.txt ในไดเร็กทอรีรากเพื่อจัดเก็บข้อมูลที่ส่ง สร้างไฟล์ commit.js ในไดเร็กทอรีรากเพื่อดำเนินการข้อมูลการส่ง

โฟกัสอยู่ที่ commit.js มาดูหัวข้อโดยตรงกัน:

const execSync = need('child_process').execSync;
const fs = ต้องการ ('fs')
const versionPath = 'version.txt'
const buildPath = 'dist'
const autoPush = จริง;
const commit = execSync('git show -s --format=%H').toString().trim(); // หมายเลขเวอร์ชันปัจจุบัน ให้ versionStr = ''; // สตริงเวอร์ชัน if(fs.existsSync( versionPath) ) {
  versionStr = fs.readFileSync(versionPath).toString() + 'n';
-

ถ้า (versionStr.indexOf (กระทำ) ! = -1) {
  console.warn('x1B[33m%sx1b[0m', 'warming: มีข้อมูลเวอร์ชัน git ปัจจุบันอยู่แล้ว!n')
} อื่น {
  ให้ชื่อ = execSync('git show -s --format=%cn').toString().trim(); // ชื่อ ให้อีเมล = execSync('git show -s --format=%ce').toString ().trim(); // ส่งอีเมลวันที่ = new Date(execSync('git show -s --format=%cd').toString()); // วันที่ให้ข้อความ = execSync('git show -s --format=%s').toString().trim(); // คำอธิบาย versionStr = `git:${commit}nAuthor:${name}<${email}>nDate:${date .getFullYear ()+'-'+(date.getMonth()+1)+'-'+date.getDate()+' '+date.getHours()+':'+date.getMinutes()}n ${message}n${อาร์เรย์ใหม่(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() }`)
  -
-

ถ้า (fs.existsSync (buildPath)) {
  fs.writeFileSync(`${ buildPath }/${ versionPath }`, fs.readFileSync(versionPath))
}

ไฟล์ข้างต้นสามารถประมวลผลได้โดยตรงผ่าน node commit.js เพื่ออำนวยความสะดวกในการจัดการ เราได้เพิ่มบรรทัดคำสั่งใน package.json :

"scripts": {
  "กระทำ": "โหนด commit.js"
}

ด้วยวิธีนี้ การใช้ npm run commit จะมีผลเหมือนกับ node commit.js

การสร้างข้อมูลเวอร์ชัน

ด้วยการเตรียมการข้างต้น เราสามารถสร้างข้อมูลเวอร์ชัน version.json ในรูปแบบที่ระบุผ่านข้อมูล commit

สร้างไฟล์ version.js ใหม่ในไดเร็กทอรีรากเพื่อสร้างข้อมูลเวอร์ชัน

const execSync = ต้องการ ('child_process').execSync;
const fs = ต้องการ ('fs')
const targetFile = 'src/assets/version.json'; // ไฟล์เป้าหมายที่เก็บไว้ใน const commit = execSync('git show -s --format=%h').toString().trim(); หมายเลขเวอร์ชันที่ส่ง 7 หลักแรกของค่าแฮช la date = new Date(execSync('git show -s --format=%cd').toString()); // Date Let message = execSync('git show - s --format=%s').toString().trim(); // คำอธิบาย ให้ versionObj = {
  "กระทำ": กระทำ,
  "วันที่": วันที่
  "ข้อความ": ข้อความ
-

ข้อมูล const = JSON.stringify (versionObj);

fs.writeFile(targetFile, data, (err) => {
  ถ้า (ผิดพลาด) {
    โยนผิดพลาด
  -
  console.log('บันทึกข้อมูล Stringify Json แล้ว')
})

เราเพิ่มบรรทัดคำสั่งใน package.json เพื่ออำนวยความสะดวกในการจัดการ:

"scripts": {
  "version": "โหนด 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": "การพัฒนา",
  "เวอร์ชัน": "1.3.0"
}

// การผลิต json
-
  "env": "การผลิต",
  "เวอร์ชัน": "1.3.0"
}

//test.json
-
  "env": "ทดสอบ",
  "เวอร์ชัน": "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",
}

เป็นเรื่องง่ายใช่ไหม

รวมเนื้อหาของ ข้อมูลเวอร์ชันที่สร้างขึ้น เพื่อสร้างข้อมูลเวอร์ชันที่แตกต่างกันตามสภาพแวดล้อมที่แตกต่างกัน รหัสเฉพาะมีดังนี้:

const execSync = need('child_process').execSync;
const fs = ต้องการ ('fs')
const targetFile = 'src/assets/version.json'; // ไฟล์เป้าหมายที่เก็บไว้ใน const config = need('./config/default.json');

const commit = execSync('git show -s --format=%h').toString().trim(); //วันที่ให้หมายเลขเวอร์ชันที่ส่งมาในปัจจุบัน = new Date(execSync('git show -s --format =%cd').toString()); // วันที่ให้ข้อความ = execSync('git show -s --format=%s').toString().trim(); // คำอธิบาย ให้ versionObj = {
  "env": config.env,
  "รุ่น": "",
  "กระทำ": กระทำ,
  "วันที่": วันที่
  "ข้อความ": ข้อความ
-

//จัดรูปแบบวันที่ const formatDay = (date) => {
  ให้ formatted_date = date.getFullYear() + "." + (date.getMonth()+1) + "." +date.getDate()
    กลับ formatted_date;
-

ถ้า (config.env === 'การผลิต') {
  versionObj.version = config.version
-

ถ้า (config.env === 'การพัฒนา') {
  versionObj.version = `${ config.version }:เบต้า`
-

ถ้า (config.env === 'ทดสอบ') {
  versionObj.version = `${ config.version }-${ formatDay(date) }:${ กระทำ }`
-

ข้อมูล const = JSON.stringify (versionObj);

fs.writeFile(targetFile, data, (err) => {
  ถ้า (ผิดพลาด) {
    โยนผิดพลาด
  -
  console.log('บันทึกข้อมูล Stringify Json แล้ว')
})

เพิ่มบรรทัดคำสั่งสำหรับสภาพแวดล้อมที่แตกต่างกันใน package.json :

"scripts": {
  "build:production": "npm รัน copyConfigProduction && เวอร์ชันรัน npm",
  "build:development": "npm รัน copyConfigDevelopment && เวอร์ชันรัน npm",
  "build:test": "npm รัน copyConfigTest && เวอร์ชันรัน npm",
}

ข้อมูลเวอร์ชันที่สร้างขึ้นจะถูกจัดเก็บไว้ใน assets โดยตรง และเส้นทางเฉพาะคือ src/assets/version.json

รวมกับ Angular เพื่อแสดงข้อมูลเวอร์ชันบนเพจ

ขั้นตอนสุดท้ายคือการแสดงข้อมูลเวอร์ชันบนเพจ โดยจะรวมกับ angular

ใช้ ng generate service version เพื่อสร้างบริการ version ในไดเร็กทอรี app/services เพิ่มข้อมูลคำขอไปยังไฟล์ version.service.ts ที่สร้างขึ้นดังนี้:

import { Injectable } from '@ Angular/core';
นำเข้า { HttpClient } จาก '@ เชิงมุม/common/http';
นำเข้า { สังเกตได้ } จาก 'rxjs';

@ฉีด({
  ให้ไว้ใน: 'ราก'
-
ส่งออกคลาส VersionService {

  ตัวสร้าง (
    http ส่วนตัว: HttpClient
  -

  getVersion สาธารณะ (): สังเกตได้ <ใด ๆ> {
    ส่งคืน this.http.get('assets/version.json')
  -
}

ก่อนที่จะใช้คำขอ ให้เมานต์โมดูล HttpClientModule ในไฟล์ app.module.ts :

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

-

นำเข้า: [
  HttpClientModule
]

จากนั้นเพียงเรียกมันในส่วนประกอบ นี่คือไฟล์ app.component.ts :

import { Component } from '@angular/core';
นำเข้า { VersionService } จาก './services/version.service' // แนะนำบริการเวอร์ชัน @Component ({
  ตัวเลือก: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
-
ส่งออกคลาส AppComponent {

  รุ่นสาธารณะ: string = '1.0.0'

  ตัวสร้าง (
    บริการเวอร์ชันอ่านอย่างเดียวส่วนตัว: VersionService
  -

  ngOnInit() {
    this.versionService.getVersion().สมัครสมาชิก({
      ถัดไป: (ข้อมูล: ใด ๆ ) => {
        this.version = data.version // เปลี่ยนข้อมูลเวอร์ชัน},
      ข้อผิดพลาด: (ข้อผิดพลาด: ใด ๆ ) => {
        คอนโซลข้อผิดพลาด (ข้อผิดพลาด)
      -
    -
  -
}

ณ จุดนี้ เราได้กรอกข้อมูลเวอร์ชันเรียบร้อยแล้ว ในที่สุดเรามาปรับคำสั่งของ package.json :

"scripts": {
  "start": "ng เสิร์ฟ",
  "version": "โหนด version.js",
  "commit": "โหนด commit.js",
  "build": "ng สร้าง",
  "build:production": "npm รัน copyConfigProduction && เวอร์ชันการรัน npm && npm รันบิลด์",
  "build:development": "npm run copyConfigDevelopment && npm run version && npm run build",
  "build:test": "npm รัน copyConfigTest && เวอร์ชันรัน npm && npm รันบิลด์",
  "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 ส์ ผู้สนใจสามารถทดลองได้ด้วยตนเอง