Como começar rapidamente com VUE3.0: Entre no aprendizado
A imagem acima mostra as informações da versão测试环境/开发环境exibidas na página. [Tutoriais relacionados recomendados: "Tutorial Angular"]
Haverá uma introdução mais tarde.
A imagem acima mostra as informações Git Commit de cada envio. Claro, aqui eu gravo cada envio.
Então, vamos usar Angular para obter o próximo efeito. O mesmo se aplica a React e Vue .
Como o foco aqui não é construir o ambiente, podemos apenas usar angular-cli para gerar diretamente um projeto.
Etapa 1: Instale a ferramenta de andaime
npm install -g @angular/cli
Etapa 2: Crie um projeto
# ng new PROJECT_NAME ng new ng-commit
Etapa 3: Execute o projeto
npm run start
O projeto está em execução. Ele escuta a porta 4200 por padrão. Basta abrir http://localhost:4200/ no navegador.
Sob a premissa de que a porta 4200 não está ocupada
neste momento, a composição da pasta chave src do projeto ng-commit é a seguinte:
src ├── app // Corpo do aplicativo │ ├── app-routing.module.ts // Módulo de roteamento │ . │ └── app.module.ts // Módulo de aplicação ├── ativos // Recursos estáticos ├── main.ts // Arquivo de entrada. └── style.less // A estrutura de diretório acima do estilo global
Adicionaremos o diretório de serviço de services no diretório app e o arquivo version.json no diretório assets posteriormente.
e crie um arquivo version.txt no diretório raiz para armazenar as informações enviadas; crie um arquivo commit.js no diretório raiz para operar as informações do envio;
O foco está no commit.js , vamos direto ao tópico:
const execSync = require('child_process').execSync;
const fs = requer('fs')
const versionPath = 'versão.txt'
const buildPath = 'dist'
const autoPush = verdadeiro;
const commit = execSync('git show -s --format=%H').toString().trim(); // Número da versão atual let versionStr = ''; ) {
versionStr = fs.readFileSync(versionPath).toString() + 'n';
}
if(versionStr.indexOf(commit) != -1) {
console.warn('x1B[33m%sx1b[0m', 'warming: Os dados da versão atual do git já existem!n')
} outro {
deixe nome = execSync('git show -s --format=%cn').toString().trim(); // nome deixe email = execSync('git show -s --format=%ce').toString ().trim(); // E-mail let date = new Date(execSync('git show -s --format=%cd').toString()); --format=%s').toString().trim(); // Descrição versionStr = `git:${commit}nAutor:${nome}<${email}>nData:${data .getFullYear ()+'-'+(date.getMonth()+1)+'-'+date.getDate()+' '+date.getHours()+':'+date.getMinutes()}n Descrição: ${mensagem}n${new Array(80).join('*')}n${versionStr}`;
fs.writeFileSync(versionPath, versionStr);
// Depois de escrever as informações da versão, envie automaticamente as informações da versão para o git da ramificação atual if(autoPush) { // Esta etapa pode ser escrita de acordo com as necessidades reais execSync(`git add ${ versionPath }`);
execSync(`git commit ${ versionPath } -m envia automaticamente as informações da versão`);
execSync(`git push origin ${ execSync('git rev-parse --abbrev-ref HEAD').toString().trim() }`)
}
}
if(fs.existsSync(buildPath)) {
fs.writeFileSync(`${ buildPath }/${ versionPath }`, fs.readFileSync(versionPath))
} Os arquivos acima podem ser processados diretamente através node commit.js . Para facilitar o gerenciamento, adicionamos a linha de comando ao package.json :
"scripts": {
"commit": "nó commit.js"
} Dessa forma, usar npm run commit tem o mesmo efeito que node commit.js .
Com a preparação acima, podemos gerar informações de versão version.json no formato especificado por meio das informações commit .
Crie um novo arquivo version.js no diretório raiz para gerar dados de versão.
const execSync = require('child_process').execSync;
const fs = requer('fs')
const targetFile = 'src/assets/version.json'; //O arquivo de destino armazenado em const commit = execSync('git show -s --format=%h').toString().trim(); Número da versão enviada, os primeiros 7 dígitos do valor hash let date = new Date(execSync('git show -s --format=%cd').toString()); - s --format=%s').toString().trim(); // Descrição let versionObj = {
"comprometer": confirmar,
"data": data,
"mensagem": mensagem
};
dados const = JSON.stringify(versãoObj);
fs.writeFile(targetFile, dados, (erro) => {
se(erro) {
lançar errar
}
console.log('Os dados do Stringify Json são salvos.')
}) Adicionamos uma linha de comando ao package.json para facilitar o gerenciamento:
"scripts": {
"versão": "nó versão.js"
} development informações de versão diferentes test production diferentes.
major.minor.patch . Por exemplo:major.minor.patch:beta . Por exemplo:major.minor.path-data:hash , como: 1.1.0-2022.01.01:4rtr5rgpara facilitar o gerenciamento de diferentes ambientes Criamos um novo arquivo no diretório raiz do projeto da seguinte forma:
config. ├── default.json // Arquivo de configuração chamado pelo projeto ├── development.json // Arquivo de configuração do ambiente de desenvolvimento ├── production.json // Arquivo de configuração do ambiente de produção └── test.json // Arquivo de configuração do ambiente de teste
relacionado O conteúdo do arquivo é o seguinte:
// development.json
{
"env": "desenvolvimento",
"versão": "1.3.0"
} //produção.json
{
"env": "produção",
"versão": "1.3.0"
} //teste.json
{
"env": "teste",
"versão": "1.3.0"
} default.json copia as informações de configuração de diferentes ambientes com base na linha de comando e configura-as em 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",
} É fácil mano, certo?
Integrar o conteúdo das informações de versão geradas para gerar informações de versões diferentes de acordo com os diferentes ambientes. O código específico é o seguinte:
const execSync = require('child_process').execSync;
const fs = requer('fs')
const targetFile = 'src/assets/version.json' // O arquivo de destino armazenado em const config = require('./config/default.json');
const commit = execSync('git show -s --format=%h').toString().trim() //O número da versão atualmente enviada let date = new Date(execSync('git show -s --format); =%cd').toString()); // Data let message = execSync('git show -s --format=%s').toString().trim();
"env":config.env,
"versão": "",
"comprometer": confirmar,
"data": data,
"mensagem": mensagem
};
//Formato data const formatDay = (data) => {
deixe data_formatada = data.getFullYear() + "."
retornar data_formatada;
}
if(config.env === 'produção') {
versãoObj.versão = config.versão
}
if(config.env === 'desenvolvimento') {
versionObj.version = `${ config.version }:beta`
}
if(config.env === 'teste') {
versionObj.version = `${ config.version }-${ formatDay(data) }:${ commit }`
}
dados const = JSON.stringify(versãoObj);
fs.writeFile(targetFile, dados, (erro) => {
se(erro) {
lançar errar
}
console.log('Os dados do Stringify Json são salvos.')
}) Adicione linhas de comando para diferentes ambientes em 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",
} As informações da versão gerada serão armazenadas diretamente em assets e o caminho específico é src/assets/version.json .
angular última etapa é exibir as informações da versão na página.
Use ng generate service version para gerar version no diretório app/services . Adicione informações de solicitação ao arquivo version.service.ts gerado da seguinte forma:
import { Injectable } from '@angular/core';
importar { HttpClient } de '@angular/common/http';
importar {Observável} de 'rxjs';
@Injetável({
fornecidoIn: 'root'
})
classe de exportação VersionService {
construtor(
http privado: HttpClient
) { }
public getVersion():Observável<qualquer> {
retorne isto.http.get('assets/version.json')
}
} Antes de usar a solicitação, monte o módulo HttpClientModule no arquivo app.module.ts :
import { HttpClientModule } from '@angular/common/http';
// ...
importações: [
Módulo HttpClient
], então basta chamá-lo no componente. Aqui está o arquivo app.component.ts :
import { Component } from '@angular/core';
import { VersionService } from './services/version.service' //Introduzir serviço de versão @Component({
seletor: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.less']
})
classe de exportação AppComponent {
versão pública: string = '1.0.0'
construtor(
versionService somente leitura privado: VersionService
) {}
ngOnInit() {
this.versionService.getVersion().subscribe({
próximo: (dados: qualquer) => {
this.version = data.version //Alterar informações da versão},
erro: (erro: qualquer) => {
console.error(erro)
}
})
}
} Neste ponto, completamos as informações da versão. Vamos finalmente ajustar o comando de package.json :
"scripts": {
"start": "ng servir",
"versão": "nó versão.js",
"commit": "nó 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 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"
} O objetivo da utilização scripts é facilitar o gerenciamento, mas também facilitar a construção e chamada jenkins . Quanto ao jenkins , as partes interessadas podem tentar por conta própria.