Как быстро начать работу с VUE3.0: введите обучение
На рисунке выше показана информация о версии测试环境/开发环境отображаемая на странице. [Рекомендуемые соответствующие учебные пособия: «Учебное пособие по Angular»]
Введение будет позже.
На рисунке выше показана информация 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 // Тело приложения │ ├── app-routing.module.ts // Модуль маршрутизации │ . │ └── app.module.ts // Модуль приложения ├── assets // Статические ресурсы ├── main.ts // Входной файл. └── style.less // Структура каталогов над глобальным стилем
. Позже мы добавим каталог services в каталог app и файл version.json в каталог assets .
и создайте файл version.txt в корневом каталоге для хранения отправленной информации. Создайте файл commit.js в корневом каталоге для управления информацией об отправке.
В центре внимания commit.js , перейдем непосредственно к теме:
const execSync = require('child_process').execSync;
const fs = require('fs')
const versionPath = 'version.txt'
const buildPath = 'расстояние'
константный autoPush = правда;
const commit = execSync('git show -s --format=%H').toString().trim(); // Номер текущей версии let versionStr = ''; // Строка версии if(fs.existsSync(versionPath) ) {
versionStr = fs.readFileSync(versionPath).toString() + 'n';
}
if(versionStr.indexOf(commit) != -1) {
console.warn('x1B[33m%sx1b[0m', 'потепление: данные текущей версии git уже существуют!n')
} еще {
let name = execSync('git show -s --format=%cn').toString().trim(); // имя let email = execSync('git show -s --format=%ce').toString; ().trim(); // Электронная почта let date = new Date(execSync('git show -s --format=%cd').toString()); // Дата let message = execSync('git show -s); --format=%s').toString().trim(); // Описание versionStr = `git:${commit}nАвтор:${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);
// После записи информации о версии автоматически отправьте информацию о версии в git текущей ветки if(autoPush) { // Этот шаг можно записать в соответствии с фактическими потребностями execSync(`git add ${ versionPath }`);
execSync(`git commit ${ 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 . Чтобы облегчить управление, добавим в package.json командную строку:
"scripts": {
"commit": "узел commit.js"
} Таким образом, использование npm run commit имеет тот же эффект, что и node commit.js .
С помощью описанной выше подготовки мы можем сгенерировать информацию о версии version.json в указанном формате с помощью информации commit .
Создайте новый файл version.js в корневом каталоге для создания данных о версии.
const execSync = require('child_process').execSync;
const fs = require('fs')
const targetFile = 'src/assets/version.json'; // Целевой файл, сохраненный в const commit = execSync('git show -s --format=%h').toString().trim(); Отправленный номер версии, первые 7 цифр хеш-значения let date = new Date(execSync('git show -s --format=%cd').toString()); // Дата let message = execSync('git show -s --format=%cd').toString()); - s --format=%s').toString().trim() // Описание let versionObj = {
«зафиксировать»: зафиксировать,
«дата»: дата,
"сообщение": сообщение
};
константные данные = JSON.stringify(versionObj);
fs.writeFile(targetFile, data, (err) => {
если (ошибка) {
выбросить ошибку
}
console.log('Данные Stringify Json сохранены.')
}) Добавляем в package.json командную строку для облегчения управления:
"scripts": {
"version": "node version.js"
} Генерация различной информации о версии для разных сред. Предположим, у нас есть среда development , production среда и test среда.
major.minor.patch . Например: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
{
"окр": "развитие",
"версия": "1.3.0"
} // производство.json
{
"окр": "производство",
"версия": "1.3.0"
} //test.json
{
"окр": "тест",
"версия": "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 = require('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()); // Дата let message = execSync('git show -s --format=%s').toString().trim(); // Описание let versionObj = {
«окр»: config.env,
"версия": "",
«зафиксировать»: зафиксировать,
«дата»: дата,
"сообщение": сообщение
};
//Формат даты const formatDay = (date) => {
let formatted_date = date.getFullYear() + "." + (date.getMonth()+1) + "."
вернуть formatted_date;
}
if(config.env === 'производство') {
versionObj.version = config.version
}
if(config.env === 'разработка') {
versionObj.version = `${ config.version }:beta`
}
if(config.env === 'тест') {
versionObj.version = `${ config.version }-${ formatDay(date) }:${ commit }`
}
константные данные = JSON.stringify(versionObj);
fs.writeFile(targetFile, data, (err) => {
если (ошибка) {
выбросить ошибку
}
console.log('Данные Stringify Json сохранены.')
}) Добавьте командные строки для разных сред в package.json :
"scripts": {
"build:production": "npm run copyConfigProduction && версия запуска npm",
"build:development": "npm run copyConfigDevelopment && версия запуска npm",
"build:test": "npm run copyConfigTest && версия запуска npm",
} Сгенерированная информация о версии будет храниться непосредственно в assets , а конкретный путь — src/assets/version.json .
Последний шаг — отображение информации о версии на странице. В сочетании с angular .
Используйте ng generate service version создания службы version в каталоге app/services . Добавьте информацию запроса в созданный файл version.service.ts следующим образом:
import { Injectable } from '@angular/core';
импортировать { HttpClient } из @angular/common/http;
импортировать { Observable } из 'rxjs';
@Инъекционный({
предоставлено: 'корень'
})
класс экспорта VersionService {
конструктор(
частный http: HttpClient
) { }
public getVersion():Observable<любой> {
верните this.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({
селектор: 'app-root',
templateUrl: './app.comComponent.html',
styleUrls: ['./app.comComponent.less']
})
класс экспорта AppComponent {
общедоступная версия: строка = '1.0.0'
конструктор(
частная версияServiceтолько для чтения: VersionService
) {}
ngOnInit() {
this.versionService.getVersion().subscribe({
следующий: (данные: любые) => {
this.version = data.version //Изменить информацию о версии},
ошибка: (ошибка: любая) => {
console.error(ошибка)
}
})
}
} На этом этапе мы завершили информацию о версии. Давайте, наконец, настроим команду package.json :
"scripts": {
"start": "ng служение",
"version": "node version.js",
"commit": "узел 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 запустить copyConfigTest && запустить версию npm && запустить сборку npm",
"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 , заинтересованные стороны могут попробовать это самостоятельно.