So starten Sie schnell mit VUE3.0: Einstieg ins Lernen
Das Bild oben zeigt die auf der Seite angezeigten Versionsinformationen测试环境/开发环境. [Empfohlene verwandte Tutorials: „Angular Tutorial“]
Eine Einführung folgt später.
Das Bild oben zeigt die Git Commit -Informationen jeder Einreichung. Natürlich kann ich hier jede Einreichung aufzeichnen.
Verwenden wir also Angular um den nächsten Effekt zu erzielen. Das Gleiche gilt für React und Vue .
Da der Fokus hier nicht auf dem Erstellen der Umgebung liegt, können wir einfach angular-cli -Gerüst verwenden, um direkt ein Projekt zu generieren.
Schritt 1: Installieren Sie das Gerüsttool
npm install -g @angular/cli.
Schritt 2: Erstellen Sie ein Projekt
# ng new PROJECT_NAME ng new ng-commit
Schritt 3: Führen Sie das Projekt aus
.npm run start
Das Projekt läuft standardmäßig auf Port 4200 Öffnen Sie einfach http://localhost:4200/ .
Unter der Voraussetzung, dass Port 4200 zu diesem Zeitpunkt nicht belegt ist
, lautet die Zusammensetzung des Schlüsselordners src des ng-commit -Projekts wie folgt:
src ├── app // Anwendungskörper │ ├── app-routing.module.ts // Routing-Modul │ . │ └── app.module.ts // Anwendungsmodul ├── Assets // Statische Ressourcen ├── main.ts // Eintragsdatei. └── style.less // Die Verzeichnisstruktur über dem globalen Stil
. Wir werden später das services -Verzeichnis im app -Verzeichnis und die Datei version.json im assets -Verzeichnis hinzufügen.
und erstellen Sie eine Datei version.txt im Stammverzeichnis, um die übermittelten Informationen zu speichern. Erstellen Sie eine Datei commit.js im Stammverzeichnis, um die Übermittlungsinformationen zu verwalten.
Der Fokus liegt auf commit.js , gehen wir direkt zum Thema:
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(); // Aktuelle Versionsnummer let versionStr = ''; ) {
versionStr = fs.readFileSync(versionPath).toString() + 'n';
}
if(versionStr.indexOf(commit) != -1) {
console.warn('x1B[33m%sx1b[0m', 'warming: Die aktuellen Git-Versionsdaten sind bereits vorhanden!n')
} anders {
let name = execSync('git show -s --format=%cn').toString().trim(); // name let email = execSync('git show -s --format=%ce').toString ().trim(); // E-Mail let date = new Date('git show -s --format=%cd').toString() // Date let message = execSync('git show -s --format=%s').toString().trim(); // Beschreibung versionStr = `git:${commit}nAutor:${name}<${email}>nDatum:${date .getFullYear ()+'-'+(date.getMonth()+1)+'-'+date.getDate()+' '+date.getHours()+':'+date.getMinutes()}n Beschreibung: ${message}n${new Array(80).join('*')}n${versionStr}`;
fs.writeFileSync(versionPath, versionStr);
// Nach dem Schreiben der Versionsinformationen die Versionsinformationen automatisch an Git des aktuellen Zweigs senden if(autoPush) { // Dieser Schritt kann entsprechend den tatsächlichen Anforderungen geschrieben werden execSync(`git add ${ versionPath }`);
execSync(`git commit ${ versionPath } -m Versionsinformationen automatisch übermitteln`);
execSync(`git push origin ${ execSync('git rev-parse --abbrev-ref HEAD').toString().trim() }`)
}
}
if(fs.existsSync(buildPath)) {
fs.writeFileSync(`${ buildPath }/${ versionPath }`, fs.readFileSync(versionPath))
} Die oben genannten Dateien können direkt über node commit.js verarbeitet werden. Um die Verwaltung zu erleichtern, fügen wir die Befehlszeile zu package.json hinzu:
„scripts“: {
„commit“: „node commit.js“
} Auf diese Weise hat die Verwendung npm run commit den gleichen Effekt wie node commit.js .
Mit der obigen Vorbereitung können wir über die commit Informationen Versionsinformationen version.json im angegebenen Format generieren.
Erstellen Sie im Stammverzeichnis eine neue Datei version.js , um Versionsdaten zu generieren.
const execSync = require('child_process').execSync;
const fs = require('fs')
const targetFile = 'src/assets/version.json'; //Die in const commit = execSync('git show -s --format=%h').toString().trim(); Eingereichte Versionsnummer, die ersten 7 Ziffern des Hashwerts let date = new Date(execSync('git show -s --format=%cd').toString()); // Date let message = execSync('git show - s --format=%s').toString().trim(); // Beschreibung let versionObj = {
„commit“: verpflichten,
„Datum“: Datum,
„Nachricht“: Nachricht
};
const data = JSON.stringify(versionObj);
fs.writeFile(targetFile, data, (err) => {
if(err) {
werfen Fehler
}
console.log('Stringify Json-Daten werden gespeichert.')
}) Wir fügen package.json eine Befehlszeile hinzu, um die Verwaltung zu erleichtern:
„scripts“: {
„version“: „node version.js“
} Angenommen, wir haben eine development , production und eine test .
major.minor.patch “. Beispiel:major.minor.patch:beta . Beispiel:major.minor.path-data:hash . major.minor.path-data:hash , wie zum Beispiel: 1.1.0-2022.01.01:4rtr5rg,um die Verwaltung verschiedener Umgebungen zu erleichtern. Wir erstellen eine neue Datei im Stammverzeichnis des Projekts wie folgt:
config ├── default.json // Vom Projekt aufgerufene Konfigurationsdatei ├── development.json // Konfigurationsdatei für die Entwicklungsumgebung ├── Production.json // Konfigurationsdatei für die Produktionsumgebung └── test.json // Konfigurationsdatei für die Testumgebung
verwandt Der Dateiinhalt lautet wie folgt:
// development.json
{
„env“: „Entwicklung“,
„Version“: „1.3.0“
} // Produktion.json
{
„env“: „Produktion“,
„Version“: „1.3.0“
} //test.json
{
„env“: „test“,
„Version“: „1.3.0“
} default.json kopiert die Konfigurationsinformationen verschiedener Umgebungen basierend auf der Befehlszeile und konfiguriert sie in package.json :
„scripts“: {
„copyConfigProduction“: „cp ./config/produktion.json ./config/default.json“,
„copyConfigDevelopment“: „cp ./config/development.json ./config/default.json“,
„copyConfigTest“: „cp ./config/test.json ./config/default.json“,
} Ist es einfach, Bro, oder?
Integrieren Sie den Inhalt der generierten Versionsinformationen , um je nach Umgebung unterschiedliche Versionsinformationen zu generieren. Der spezifische Code lautet wie folgt:
const execSync = require('child_process').execSync;
const fs = require('fs')
const targetFile = 'src/assets/version.json'; // Die in const gespeicherte Zieldatei config = require('./config/default.json');
const commit = execSync('git show -s --format=%h').toString().trim(); //Die aktuell übermittelte Versionsnummer let date = new Date(execSync('git show -s --format =%cd').toString()); // Datum let message = execSync('git show -s --format=%s').toString().trim( // Beschreibung let versionObj = {
„env“: config.env,
„Version“: „“,
„commit“: verpflichten,
„Datum“: Datum,
„Nachricht“: Nachricht
};
//Datum formatieren const formatDay = (Datum) => {
let formatted_date = date.getFullYear() + "." + (date.getMonth()+1) + "."
return formatted_date;
}
if(config.env === 'Produktion') {
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) {
werfen Fehler
}
console.log('Stringify Json-Daten werden gespeichert.')
}) Befehlszeilen für verschiedene Umgebungen in package.json hinzufügen:
„scripts“: {
„build:produktion“: „npm run copyConfigProduction && npm run version“,
„build:development“: „npm run copyConfigDevelopment && npm run version“,
„build:test“: „npm run copyConfigTest && npm run version“,
} Die generierten Versionsinformationen werden direkt in assets gespeichert, und der spezifische Pfad ist src/assets/version.json .
angular letzte Schritt besteht darin, die Versionsinformationen auf der Seite anzuzeigen.
Verwenden Sie ng generate service version um version im Verzeichnis app/services zu generieren. Fügen Sie der generierten Datei version.service.ts wie folgt Anforderungsinformationen hinzu:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
bereitgestelltIn: 'root'
})
Exportklasse VersionService {
Konstruktor(
privater http: HttpClient
) { }
public getVersion():Observable<any> {
return this.http.get('assets/version.json')
}
} Bevor Sie die Anfrage verwenden, mounten Sie das HttpClientModule Modul in der Datei app.module.ts :
import { HttpClientModule } from '@angular/common/http';
// ...
Importe: [
HttpClientModule
], dann rufen Sie es einfach in der Komponente auf. Hier ist die Datei app.component.ts :
import { Component } from '@angular/core';
import { VersionService } from './services/version.service'; //Versionsdienst @Component({
Selektor: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.less']
})
Exportklasse AppComponent {
öffentliche Version: string = '1.0.0'
Konstruktor(
privater schreibgeschützter versionService: VersionService
) {}
ngOnInit() {
this.versionService.getVersion().subscribe({
weiter: (Daten: beliebig) => {
this.version = data.version //Versionsinformationen ändern},
Fehler: (Fehler: beliebig) => {
console.error(Fehler)
}
})
}
} Zu diesem Zeitpunkt haben wir die Versionsinformationen vervollständigt. Passen wir endlich den Befehl von package.json an:
„scripts“: {
„start“: „ng dienen“,
„version“: „node version.js“,
„commit“: „node commit.js“,
„build“: „ng build“,
„build:produktion“: „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/produktion.json ./config/default.json“,
„copyConfigDevelopment“: „cp ./config/development.json ./config/default.json“,
„copyConfigTest“: „cp ./config/test.json ./config/default.json“
} Der Zweck der Verwendung scripts besteht darin, die Verwaltung zu erleichtern, aber auch die Erstellung und den Aufruf jenkins zu erleichtern. Was den jenkins Teil betrifft, können Interessenten es selbst ausprobieren.