كيف يجمع Angular بين Git Commit لمعالجة الإصدار

كيف تبدأ بسرعة مع VUE3.0: أدخل التعلم

توضح الصورة أعلاه معلومات إصدار测试环境/开发环境المعروضة على الصفحة. [الدروس التعليمية ذات الصلة الموصى بها: "Angular Tutorial"]

ستكون هناك مقدمة لاحقًا.

توضح الصورة أعلاه معلومات Git Commit الخاصة بكل إرسال. بالطبع، هنا أقوم بتسجيل كل إرسال، ويمكنك تسجيله في كل مرة تقوم فيها بالإنشاء.

لذلك، دعونا نستخدم Angular لتحقيق التأثير التالي. الأمر نفسه ينطبق على React و Vue .

بناء البيئة

نظرًا لأن التركيز هنا لا ينصب على بناء البيئة، فيمكننا فقط استخدام سقالات angular-cli لإنشاء مشروع مباشرة.

الخطوة 1: تثبيت أداة السقالات

npm install -g @angular/cli

الخطوة 2: إنشاء مشروع

# ng new PROJECT_NAME
ng new 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 .js في الدليل الجذر لتشغيل معلومات الإرسال.

ينصب التركيز على commit.js .js، فلننتقل مباشرة إلى الموضوع:

const execSync = require('child_process').execSync;
const خ = يتطلب ('fs')
كونست 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';
}

إذا (versionStr.indexOf(commit) != -1) {
  console.warn('x1B[33m%sx1b[0m', 'warming: بيانات إصدار git الحالية موجودة بالفعل!n')
} آخر {
  Let name = execSync('git show -s --format=%cn').toString().trim(); // name Let email = execSync('git show -s --format=%ce').toString ().trim(); // البريد الإلكتروني Let date = new Date(execSync('git show -s --format=%cd').toString()); // Date Let message = 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${new Array(80).join('*')}n${versionStr}`;
  fs.writeFileSync(versionPath, versionStr);
  // بعد كتابة معلومات الإصدار، أرسل معلومات الإصدار تلقائيًا إلى بوابة الفرع الحالي if(autoPush) { // يمكن كتابة هذه الخطوة وفقًا للاحتياجات الفعلية execSync(`git add ${ versionPath }`);
    execSync(`git الالتزام ${ 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 .js. لتسهيل الإدارة، أضفنا سطر الأوامر إلى package.json :

"scripts": {
  "الالتزام": "عقدة الالتزام.js"
}

بهذه الطريقة، استخدام npm run commit له نفس تأثير node commit.js .

إنشاء معلومات الإصدار

من خلال الإعداد أعلاه، يمكننا إنشاء معلومات الإصدار version.json بالتنسيق المحدد من خلال معلومات commit .

قم بإنشاء ملف version.js جديد في الدليل الجذر لإنشاء بيانات الإصدار.

const execSync = require('child_process').execSync;
const خ = يتطلب ('fs')
const targetFile = 'src/assets/version.json'; // الملف الهدف المخزن في const Comm = execSync('git show -s --format=%h').toString().trim(); رقم الإصدار المقدم، أول 7 أرقام من قيمة التجزئة Let date = new Date(execSync('git show -s --format=%cd').toString()); // Date Let message = execSync('git show - s --format=%s').toString().trim(); // الوصف Let versionObj = {
  "ارتكب": التزم،
  "التاريخ": تاريخ،
  "رسالة": رسالة
};

بيانات ثابتة = JSON.stringify(versionObj);

fs.writeFile(targetFile, data, (err) => {
  إذا (خطأ) {
    رمي خطأ
  }
  console.log("تم حفظ بيانات Stringify Json.")
})

نضيف سطر أوامر إلى package.json لتسهيل الإدارة:

"scripts": {
  "الإصدار": "العقدة version.js"
}

إنشاء معلومات الإصدار بناءً على البيئة.

development test إصدار مختلفة production مختلفة.

• معلومات إصدار بيئة الإنتاج هي major.minor.patch على سبيل المثال: 1.1.0
• معلومات إصدار بيئة التطوير هي major.minor.patch:beta على سبيل المثال: 1.1.0:
• معلومات إصدار بيئة الاختبار التجريبي هي major.minor.path-data:hash . 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"
}

// production.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 = require('child_process').execSync;
const خ = يتطلب ('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()); // السماح بالتاريخ = execSync('git show -s --format=%s').toString().trim(); // الوصف Let versionObj = {
  "env": التكوين.env،
  "إصدار": ""،
  "ارتكب": التزم،
  "التاريخ": تاريخ،
  "رسالة": رسالة
};

// تنسيق التاريخ const formatDay = (date) => {
  دع formatted_date = date.getFullYear() + "." + (date.getMonth()+1) + "."
    إرجاع formatted_date؛
}

إذا (config.env === 'الإنتاج') {
  versionObj.version = config.version
}

إذا (config.env === 'تطوير') {
  versionObj.version = `${ config.version }:beta`
}

إذا (config.env === 'اختبار') {
  versionObj.version = `${ config.version }-${ formatDay(date) }:${ الالتزام }`
}

بيانات ثابتة = JSON.stringify(versionObj);

fs.writeFile(targetFile, data, (err) => {
  إذا (خطأ) {
    رمي خطأ
  }
  console.log("تم حفظ بيانات Stringify Json.")
})

أضف أسطر أوامر لبيئات مختلفة في package.json :

"scripts": {
  "build:production": "npm run CopyConfigProduction && npm run version",
  "build:development": "تشغيل نسخة npm CopyConfigDevelopment && npm run",
  "build:test": "npm run CopyConfigTest && npm run version",
}

سيتم تخزين معلومات الإصدار التي تم إنشاؤها مباشرة في assets ، والمسار المحدد هو src/assets/version.json .

مع Angular لعرض معلومات الإصدار على الصفحة،

angular الأخيرة هي عرض معلومات الإصدار على الصفحة.

استخدم ng generate service version لإنشاء خدمة version في دليل app/services . أضف معلومات الطلب إلى ملف version.service.ts الذي تم إنشاؤه كما يلي:

import { Injectable } from '@angular/core';
استيراد {HttpClient} من '@angular/common/http'؛
استيراد { يمكن ملاحظته } من 'rxjs'؛

@الحقن({
  المقدمة في: 'الجذر'
})
تصدير فئة VersionService {

  منشئ(
    http الخاص: HttpClient
  ) { }

  getVersion العامة (): يمكن ملاحظتها <any> {
    قم بإرجاع هذا.http.get('assets/version.json')
  }
}

قبل استخدام الطلب، قم بتحميل وحدة HttpClientModule في ملف app.module.ts :

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

// ...

الواردات: [
  HttpClientModule
]،

ثم فقط قم باستدعائه في المكون، إليك ملف app.component.ts :

import { Component } from '@angular/core';
import { VersionService } from './services/version.service'; // تقديم خدمة الإصدار @Component({
  المحدد: "جذر التطبيق"،
  templateUrl: './app.component.html'،
  styleUrls: ['./app.component.less']
})
فئة التصدير AppComponent {

  الإصدار العام: السلسلة = '1.0.0'

  منشئ(
    خدمة الإصدار الخاص للقراءة فقط: VersionService
  ) {}

  نجونينيت () {
    this.versionService.getVersion().subscribe({
      التالي: (البيانات: أي) => {
        this.version = data.version //تغيير معلومات الإصدار},
      خطأ: (خطأ: أي) => {
        وحدة التحكم.خطأ(خطأ)
      }
    })
  }
}

عند هذه النقطة، أكملنا معلومات الإصدار. دعونا أخيرًا نضبط أمر package.json :

"scripts": {
  "البدء": "خدمة ng"،
  "الإصدار": "العقدة version.js"،
  "الالتزام": "عقدة الالتزام.js"،
  "بناء": "بناء نانوغرام",
  "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 ، يمكن للأطراف المهتمة أن تجرب ذلك بنفسها.