Cómo comenzar rápidamente con VUE3.0: ingrese al aprendizaje
La imagen de arriba muestra la información de la versión测试环境/开发环境que se muestra en la página. [Tutoriales relacionados recomendados: "Tutorial angular"]
Habrá una introducción más adelante.
La imagen de arriba muestra la información Git Commit de cada envío. Por supuesto, aquí registro cada envío. Puedes registrarlo cada vez que construyas.
Entonces, usemos Angular para lograr el siguiente efecto. Lo mismo se aplica a React y Vue .
Debido a que el enfoque aquí no es construir el entorno, podemos simplemente usar angular-cli para generar directamente un proyecto.
Paso 1: Instale la herramienta de scaffolding
npm install -g @angular/cli
Paso 2: Cree un proyecto
# ng new PROJECT_NAME ng new ng-commit
Paso 3: ejecutar el proyecto
npm run start
El proyecto se está ejecutando. Escucha en el puerto 4200 de forma predeterminada. Simplemente abra http://localhost:4200/ en el navegador.
Bajo la premisa de que el puerto 4200 no está ocupado
en este momento, la composición de la carpeta de claves src del proyecto ng-commit es la siguiente:
src ├── aplicación // Cuerpo de la aplicación │ ├── app-routing.module.ts // Módulo de enrutamiento │ . │ └── app.module.ts // Módulo de aplicación ├── activos // Recursos estáticos ├── main.ts // Archivo de entrada. └── style.less // La estructura del directorio sobre el estilo global
Agregaremos el directorio de services en el directorio app y el archivo version.json en el directorio assets más adelante.
y cree un archivo version.txt en el directorio raíz para almacenar la información enviada. Cree un archivo commit.js en el directorio raíz para operar la información de envío.
La atención se centra en commit.js , vayamos directamente al tema:
const execSync = require('child_process').execSync;
constante fs = requerir('fs')
const versionPath = 'versión.txt'
const buildPath = 'dist'
const autoPush = verdadero;
const commit = execSync('git show -s --format=%H').toString().trim(); // Número de versión actual let versionStr = ''; // Cadena de versión if(fs.existsSync( versionPath) ) {
versionStr = fs.readFileSync(versionPath).toString() + 'n';
}
if(versionStr.indexOf(confirmar) != -1) {
console.warn('x1B[33m%sx1b[0m', 'calentamiento: ¡Los datos de la versión actual de git ya existen!n')
} demás {
let nombre = execSync('git show -s --format=%cn').toString().trim() // nombre let email = execSync('git show -s --format=%ce').toString ().trim(); // Enviar fecha por correo electrónico = new Date(execSync('git show -s --format=%cd').toString() // Fecha dejar mensaje = execSync('git show -s). --format=%s').toString().trim(); // Descripción versionStr = `git:${commit}nAutor:${nombre}<${correo electrónico}>nFecha:${fecha .getFullYear ()+'-'+(date.getMonth()+1)+'-'+date.getDate()+' '+date.getHours()+':'+date.getMinutes()}n Descripción: ${mensaje}n${new Array(80).join('*')}n${versionStr}`;
fs.writeFileSync(versionPath, versionStr);
// Después de escribir la información de la versión, envía automáticamente la información de la versión a git de la rama actual if(autoPush) { // Este paso se puede escribir de acuerdo con las necesidades reales execSync(`git add ${ versionPath }`);
execSync(`git commit ${ versionPath } -m envía automáticamente la información de la versión`);
execSync(`git push origin ${ execSync('git rev-parse --abbrev-ref HEAD').toString().trim() }`)
}
}
if(fs.existsSync(buildPath)) {
fs.writeFileSync(`${ buildPath }/${ versionPath }`, fs.readFileSync(versionPath))
} Los archivos anteriores se pueden procesar directamente a través node commit.js . Para facilitar la administración, agregamos la línea de comando a package.json :
"scripts": {
"commit": "nodo commit.js"
} De esta manera, usar npm run commit tiene el mismo efecto que node commit.js .
Con la preparación anterior, podemos generar información de versión version.json en el formato especificado a través de la información commit .
Cree un nuevo archivo version.js en el directorio raíz para generar datos de versión.
const execSync = require('child_process').execSync;
constante fs = requerir('fs')
const targetFile = 'src/assets/version.json'; //El archivo de destino almacenado en const commit = execSync('git show -s --format=%h').toString().trim(); Número de versión enviada, los primeros 7 dígitos del valor hash let date = new Date(execSync('git show -s --format=%cd').toString() // Fecha let message = execSync('git show). - s --format=%s').toString().trim() // Descripción let versionObj = {
"comprometer": comprometerse,
"fecha": fecha,
"mensaje": mensaje
};
datos constantes = JSON.stringify(versionObj);
fs.writeFile(archivodestino, datos, (err) => {
si(errar) {
tirar errar
}
console.log('Se guardan los datos de Stringify Json.')
}) Agregamos una línea de comando a package.json para facilitar la gestión:
"scripts": {
"versión": "nodo versión.js"
} Generar información de versión diferente para diferentes entornos Supongamos que tenemos un entorno development , production y un entorno test .
major.minor.patch . Por ejemplo:major.minor.patch:beta . Por ejemplo:major.minor.path-data:hash , como por ejemplo: 1.1.0-2022.01.01:4rtr5rgpara facilitar la gestión de diferentes entornos Creamos un nuevo archivo en el directorio raíz del proyecto de la siguiente manera:
config. ├── default.json // Archivo de configuración llamado por el proyecto ├── development.json // Archivo de configuración del entorno de desarrollo ├── production.json // Archivo de configuración del entorno de producción └── test.json // Archivo de configuración del entorno de prueba
relacionado El contenido del archivo es el siguiente:
// development.json
{
"env": "desarrollo",
"versión": "1.3.0"
} // producción.json
{
"env": "producción",
"versión": "1.3.0"
} //prueba.json
{
"entorno": "prueba",
"versión": "1.3.0"
} default.json copia la información de configuración de diferentes entornos según la línea de comando y la configura en 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",
} Es fácil hermano, ¿verdad?
Integrar el contenido de la información de la versión generada para generar información de versión diferente según los diferentes entornos. El código específico es el siguiente:
const execSync = require('child_process').execSync;
constante fs = requerir('fs')
const targetFile = 'src/assets/version.json'; // El archivo de destino almacenado en const config = require('./config/default.json');
const commit = execSync('git show -s --format=%h').toString().trim(); //El número de versión enviada actualmente let date = new Date(execSync('git show -s --format =%cd').toString()); // Fecha let message = execSync('git show -s --format=%s').toString().trim() // Descripción let versionObj = {
"entorno": config.env,
"versión": "",
"comprometer": comprometerse,
"fecha": fecha,
"mensaje": mensaje
};
//Formato de fecha constante formatDay = (fecha) => {
let formatted_date = fecha.getFullYear() + "." + (fecha.getMonth()+1) + "."
devolver fecha_formateada;
}
if(config.env === 'producción') {
versionObj.version = config.version
}
if(config.env === 'desarrollo') {
versionObj.version = `${ config.version }:beta`
}
if(config.env === 'prueba') {
versionObj.version = `${ config.version }-${ formatDay(fecha) }:${ confirmar }`
}
datos constantes = JSON.stringify(versionObj);
fs.writeFile(archivodestino, datos, (err) => {
si(errar) {
tirar errar
}
console.log('Se guardan los datos de Stringify Json.')
}) Agregue líneas de comando para diferentes entornos en package.json :
"scripts": {
"build:production": "npm ejecuta copyConfigProduction && npm ejecuta versión",
"build:development": "npm ejecuta copyConfigDevelopment && npm ejecuta versión",
"build:test": "npm ejecuta copyConfigTest && npm ejecuta versión",
} La información de la versión generada se almacenará directamente en assets y la ruta específica es src/assets/version.json .
El último paso es mostrar la información de la versión en la página. Esto se combina con angular .
Utilice ng generate service version para generar version en el directorio app/services . Agregue información de solicitud al archivo version.service.ts generado de la siguiente manera:
import { Injectable } from '@angular/core';
importar {HttpClient} desde '@angular/common/http';
importar {Observable} desde 'rxjs';
@Inyectable({
proporcionado en: 'raíz'
})
exportar clase VersionService {
constructor(
http privado: HttpClient
) { }
getVersion pública():Observable<cualquier> {
devuelve this.http.get('assets/version.json')
}
} Antes de usar la solicitud, monte el módulo HttpClientModule en el archivo app.module.ts :
import { HttpClientModule } from '@angular/common/http';
//...
importaciones: [
Módulo HttpClient
], luego simplemente llámelo en el componente. Aquí está el archivo app.component.ts :
import { Component } from '@angular/core';
importar {VersionService} de './services/version.service'; //Introducir el servicio de versión @Component({
selector: 'raíz de aplicación',
URL de plantilla: './app.component.html',
styleUrls: ['./app.component.less']
})
exportar clase AppComponent {
versión pública: cadena = '1.0.0'
constructor(
Servicio de versión privado de solo lectura: VersionService
) {}
ngOnInit() {
this.versionService.getVersion().subscribe({
siguiente: (datos: cualquiera) => {
this.version = data.version //Cambiar información de versión},
error: (error: cualquiera) => {
consola.error(error)
}
})
}
} En este punto, hemos completado la información de la versión. Finalmente ajustemos el comando de package.json :
"scripts": {
"inicio": "ng servir",
"versión": "nodo versión.js",
"commit": "nodo commit.js",
"construir": "ng construir",
"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 ejecuta copyConfigTest && npm ejecuta versión && npm ejecuta compilación",
"copyConfigProduction": "cp ./config/production.json ./config/default.json",
"copyConfigDevelopment": "cp ./config/development.json ./config/default.json",
"copyConfigTest": "cp ./config/test.json ./config/default.json"
} El propósito del uso de scripts es facilitar la administración, pero también facilitar la construcción y la llamada jenkins . Por la parte jenkins , los interesados pueden probarlo por su cuenta.