Comment démarrer rapidement avec VUE3.0 : entrez dans l'apprentissage
L'image ci-dessus montre les informations sur la version de测试环境/开发环境affichées sur la page. [Tutoriels associés recommandés : "Tutoriel Angular"]
Il y aura une introduction plus tard.
L'image ci-dessus montre les informations Git Commit de chaque soumission. Bien sûr, j'enregistre ici chaque soumission. Vous pouvez l'enregistrer à chaque fois que vous construisez.
Utilisons donc Angular pour obtenir l'effet suivant. La même chose s'applique à React et Vue .
Parce que l'objectif ici n'est pas de créer l'environnement, nous pouvons simplement utiliser angular-cli pour générer directement un projet.
Étape 1 : Installez l'outil d'échafaudage
npm install -g @angular/cli
Étape 2 : Créez un projet
# ng new PROJECT_NAME ng new ng-commit
Étape 3 : Exécutez le projet
npm run start
Le projet est en cours d'exécution. Il écoute le port 4200 par défaut. Ouvrez simplement http://localhost:4200/ dans le navigateur.
En partant du principe que le port 4200 n'est pas occupé
pour le moment, la composition du dossier clé src du projet ng-commit est la suivante :
src ├── app // Corps de l'application │ ├── app-routing.module.ts // Module de routage │ . │ └── app.module.ts // Module d'application ├── actifs // Ressources statiques ├── main.ts // Fichier d'entrée. └── style.less // Structure du répertoire au - dessus du style global
.Nous ajouterons ultérieurement le Répertoire de services services dans le Répertoire app et le fichier version.json dans le Répertoire assets .
et créez un fichier version.txt dans le répertoire racine pour stocker les informations soumises ; créez un fichier commit.js dans le répertoire racine pour exploiter les informations de soumission.
L'accent est mis sur commit.js , passons directement au sujet :
const execSync = require('child_process').execSync;
const fs = exiger('fs')
const versionPath = 'version.txt'
const buildPath = 'dist'
const autoPush = vrai ;
const commit = execSync('git show -s --format=%H').toString().trim(); // Numéro de version actuel let versionStr = ''; // Chaîne de version if(fs.existsSync( versionPath) ) {
versionStr = fs.readFileSync(versionPath).toString() + 'n';
}
if(versionStr.indexOf(commit) != -1) {
console.warn('x1B[33m%sx1b[0m', 'warming : Les données de la version actuelle de git existent déjà !n')
} autre {
let nom = execSync('git show -s --format=%cn').toString().trim(); // nom let email = execSync('git show -s --format=%ce').toString ().trim(); // Email let date = new Date(execSync('git show -s --format=%cd').toString()); // Date let message = execSync('git show -s); --format=%s').toString().trim(); // Description versionStr = `git:${commit}nAuteur :${name}<${email}>nDate :${date .getFullYear ()+'-'+(date.getMonth()+1)+'-'+date.getDate()+' '+date.getHours()+':'+date.getMinutes()}n Description : ${message}n${new Array(80).join('*')}n${versionStr}`;
fs.writeFileSync(versionPath, versionStr);
// Après avoir écrit les informations de version, soumettez automatiquement les informations de version au git de la branche actuelle if(autoPush) { // Cette étape peut être écrite en fonction des besoins réels execSync(`git add ${ versionPath }`);
execSync(`git commit ${ versionPath } -m soumet automatiquement les informations de version`);
execSync(`git push origin ${ execSync('git rev-parse --abbrev-ref HEAD').toString().trim() }`)
}
}
if(fs.existsSync(buildPath)) {
fs.writeFileSync(`${ buildPath }/${ versionPath }`, fs.readFileSync(versionPath))
} Les fichiers ci-dessus peuvent être traités directement via node commit.js . Afin de faciliter la gestion, nous ajoutons la ligne de commande à package.json :
"scripts": {
"commit": "nœud commit.js"
} De cette façon, l'utilisation de npm run commit a le même effet que node commit.js .
Avec la préparation ci-dessus, nous pouvons générer des informations de version version.json dans le format spécifié via les informations commit .
Créez un nouveau fichier version.js dans le répertoire racine pour générer les données de version.
const execSync = require('child_process').execSync;
const fs = exiger('fs')
const targetFile = 'src/assets/version.json'; //Le fichier cible stocké dans const commit = execSync('git show -s --format=%h').toString().trim( //Current); Numéro de version soumis, les 7 premiers chiffres de la valeur de hachage let date = new Date(execSync('git show -s --format=%cd').toString()); - s --format=%s').toString().trim(); // Description let versionObj = {
"commit": valider,
"date" : date,
"message": message
} ;
const data = JSON.stringify(versionObj);
fs.writeFile(targetFile, data, (err) => {
si (erreur) {
jeter une erreur
}
console.log('Stringify Les données Json sont enregistrées.')
}) Nous ajoutons une ligne de commande à package.json pour faciliter la gestion :
"scripts": {
"version": "version du nœud.js"
} Générez différentes informations de version pour différents environnements Supposons que nous ayons un environnement development , production et un environnement test .
major.minor.patch . Par exemple :major.minor.patch:beta . Par exemple : 1.1.0 :major.minor.path-data:hash tel que : 1.1.0-2022.01.01:4rtr5rgpour faciliter la gestion des différents environnements Nous créons un nouveau fichier dans le répertoire racine du projet comme suit :
config. ├── default.json // Fichier de configuration appelé par le projet ├── development.json // Fichier de configuration de l'environnement de développement ├── production.json // Fichier de configuration de l'environnement de production └── test.json // Fichier de configuration de l'environnement de test
connexe Le contenu du fichier est le suivant :
// development.json
{
"env": "développement",
"version": "1.3.0"
} // production.json
{
"env": "production",
"version": "1.3.0"
} //test.json
{
"env": "tester",
"version": "1.3.0"
} default.json copie les informations de configuration des différents environnements en fonction de la ligne de commande et les configure dans 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",
} C'est facile Bro, n'est-ce pas ?
Intégrer le contenu des informations de version générées pour générer différentes informations de version selon différents environnements. Le code spécifique est le suivant :
const execSync = require('child_process').execSync;
const fs = exiger('fs')
const targetFile = 'src/assets/version.json'; // Le fichier cible stocké dans const config = require('./config/default.json');
const commit = execSync('git show -s --format=%h').toString().trim(); //Le numéro de version actuellement soumis let date = new Date(execSync('git show -s --format); =%cd').toString()); // Date let message = execSync('git show -s --format=%s').toString().trim(); // Description let versionObj = {
"env": config.env,
"version": "",
"commit": valider,
"date" : date,
"message": message
} ;
//Format date const formatDay = (date) => {
laissez formatted_date = date.getFullYear() + "." + (date.getMonth()+1) + "+date.getDate()
renvoie formatted_date ;
}
if(config.env === 'production') {
versionObj.version = config.version
}
if(config.env === 'développement') {
versionObj.version = `${ config.version }:bêta`
}
if(config.env === 'test') {
versionObj.version = `${ config.version }-${ formatDay(date) }:${ commit }`
}
const data = JSON.stringify(versionObj);
fs.writeFile(targetFile, data, (err) => {
si (erreur) {
jeter une erreur
}
console.log('Stringify Les données Json sont enregistrées.')
}) Ajoutez des lignes de commande pour différents environnements dans 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",
} Les informations de version générées seront stockées directement dans assets , et le chemin spécifique est src/assets/version.json .
La dernière étape consiste à afficher les informations de version sur la page. Ceci est combiné avec angular .
Utilisez ng generate service version pour générer version dans le répertoire app/services . Ajoutez les informations de demande au fichier version.service.ts généré comme suit :
import { Injectable } from '@angular/core' ;
importer { HttpClient } depuis '@angular/common/http' ;
importer {Observable} depuis 'rxjs' ;
@Injectable({
fourni dans : 'root'
})
classe d'exportation VersionService {
constructeur(
http privé : HttpClient
) { }
public getVersion():Observable<any> {
renvoyer this.http.get('assets/version.json')
}
} Avant d'utiliser la requête, montez le module HttpClientModule dans le fichier app.module.ts :
import { HttpClientModule } from '@angular/common/http';
//...
importations : [
HttpClientModule
], puis appelez-le simplement dans le composant. Voici le fichier app.component.ts :
import { Component } from '@angular/core';
import { VersionService } from './services/version.service'; //Introduire le service de version @Component({
sélecteur : 'app-root',
URL du modèle : './app.component.html',
styleUrls : ['./app.component.less']
})
classe d'exportation AppComponent {
version publique : chaîne = '1.0.0'
constructeur(
versionService privée en lecture seule : VersionService
) {}
ngOnInit() {
this.versionService.getVersion().subscribe({
suivant : (données : toutes) => {
this.version = data.version //Modifier les informations de version},
erreur : (erreur : toute) => {
console.erreur(erreur)
}
})
}
} À ce stade, nous avons complété les informations de version. Ajustons enfin la commande de package.json :
"scripts": {
"start": "ng servir",
"version": "version du nœud.js",
"commit": "noeud 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"
} Le but de l'utilisation scripts est de faciliter la gestion, mais aussi de faciliter la construction et l'appel jenkins . Pour la partie jenkins , les parties intéressées peuvent l'essayer par elles-mêmes.