Cara cepat memulai VUE3.0: Masuk ke pembelajaran
Gambar di atas menunjukkan informasi versi测试环境/开发环境yang ditampilkan pada halaman. [Tutorial terkait yang direkomendasikan: "Tutorial Sudut"]
Nanti akan ada perkenalan.
Gambar di atas menunjukkan informasi Git Commit setiap pengiriman. Tentunya disini saya mencatat setiap pengiriman.
Jadi, mari gunakan Angular untuk mendapatkan efek selanjutnya. Hal yang sama berlaku untuk React dan Vue .
Karena fokus di sini bukan untuk membangun lingkungan, kita cukup menggunakan perancah angular-cli untuk menghasilkan proyek secara langsung.
Langkah 1: Instal alat scaffolding
npm install -g @angular/cli
Langkah 2: Buat proyek
# ng new PROJECT_NAME ng new ng-commit
Langkah 3: Jalankan proyek
npm run start
Proyek sedang berjalan. Ia mendengarkan port 4200 secara default. Buka saja http://localhost:4200/ di browser.
Dengan asumsi bahwa port 4200 tidak ditempati
saat ini, komposisi folder kunci src dari proyek ng-commit adalah sebagai berikut:
src ├── app // Badan aplikasi │ ├── app-routing.module.ts // Modul perutean │ . │ └── app.module.ts // Modul aplikasi ├── aset // Sumber daya statis ├── main.ts // File entri. └── style.less // Struktur direktori di atas global style
. Kita akan menambahkan direktori layanan services di direktori app dan file version.json di direktori assets nanti.
dan buat file version.txt di direktori root untuk menyimpan informasi yang dikirimkan; buat file commit.js di direktori root untuk mengoperasikan informasi pengiriman.
Fokusnya di commit.js , yuk langsung ke topik:
const execSync = require('child_process').execSync;
const fs = memerlukan('fs')
const versionPath = 'versi.txt'
const buildPath = 'dist'
const autoPush = benar;
const commit = execSync('git show -s --format=%H').toString().trim(); // Nomor versi saat ini let versionStr = ''; // String versi if(fs.existsSync( versionPath) ) {
versionStr = fs.readFileSync(versionPath).toString() + 'n';
}
if(versionStr.indexOf(melakukan) != -1) {
console.warn('x1B[33m%sx1b[0m', 'warming: Data versi git saat ini sudah ada!n')
} kalau tidak {
biarkan nama = execSync('git show -s --format=%cn').toString().trim(); // nama biarkan email = execSync('git show -s --format=%ce').toString ().trim(); // Email biarkan tanggal = Tanggal baru(execSync('git show -s --format=%cd').toString()); // Tanggal biarkan pesan = execSync('git show -s --format=%s').toString().trim(); // Deskripsi versionStr = `git:${commit}nPenulis:${nama<${email}>nTanggal:${tanggal .getFullYear ()+'-'+(date.getMonth()+1)+'-'+date.getDate()+' '+date.getHours()+':'+date.getMinutes()}n Deskripsi: ${pesan}n${Array baru(80).join('*')}n${versionStr}`;
fs.writeFileSync(versionPath, versionStr);
// Setelah menulis informasi versi, secara otomatis mengirimkan informasi versi ke git cabang saat ini if(autoPush) { // Langkah ini dapat ditulis sesuai dengan kebutuhan sebenarnya execSync(`git add ${ versionPath }`);
execSync(`git commit ${ versionPath } -m secara otomatis mengirimkan informasi versi`);
execSync(`git push asal ${ execSync('git rev-parse --abbrev-ref HEAD').toString().trim() }`)
}
}
if(fs.existsSync(buildPath)) {
fs.writeFileSync(`${ buildPath }/${ versionPath }`, fs.readFileSync(versionPath))
} File di atas dapat diproses langsung melalui node commit.js . Untuk memudahkan pengelolaan, kami menambahkan baris perintah ke package.json :
"scripts": {
"komit": "simpul komit.js"
} Dengan cara ini, penggunaan npm run commit memiliki efek yang sama seperti node commit.js .
Dengan persiapan di atas, kita dapat menghasilkan informasi versi version.json dalam format yang ditentukan melalui informasi commit .
Buat file version.js baru di direktori root untuk menghasilkan data versi.
const execSync = memerlukan('proses_anak').execSync;
const fs = memerlukan('fs')
const targetFile = 'src/assets/version.json'; //File target disimpan di const commit = execSync('git show -s --format=%h').toString().trim(); Nomor versi yang dikirimkan, 7 digit pertama dari nilai hash let date = new Date(execSync('git show -s --format=%cd').toString()); // Date let message = execSync('git show - s --format=%s').toString().trim(); // Deskripsi biarkan versionObj = {
"melakukan": melakukan,
"tanggal": tanggal,
"pesan": pesan
};
const data = JSON.stringify(versionObj);
fs.writeFile(targetFile, data, (err) => {
jika(salah) {
membuang kesalahan
}
console.log('Data Stringify Json disimpan.')
}) Kami menambahkan baris perintah ke package.json untuk memfasilitasi pengelolaan:
"scripts": {
"versi": "versi simpul.js"
} Hasilkan informasi versi berbeda untuk lingkungan berbeda. Misalkan kita memiliki lingkungan development , lingkungan production , dan lingkungan test .
major.minor.patch . Misalnya:major.minor.patch:beta . Misalnya:major.minor.path-data:hash , seperti: 1.1.0-2022.01.01:4rtr5rguntuk memfasilitasi pengelolaan lingkungan yang berbeda. Kami membuat file baru di direktori root proyek sebagai berikut:
config ├── default.json // File konfigurasi dipanggil oleh proyek ├── development.json // File konfigurasi lingkungan pengembangan ├── production.json // File konfigurasi lingkungan produksi └── test.json // File konfigurasi lingkungan pengujian
terkait Isi filenya adalah sebagai berikut:
// development.json
{
"env": "pengembangan",
"versi": "1.3.0"
} // produksi.json
{
"env": "produksi",
"versi": "1.3.0"
} //tes.json
{
"env": "ujian",
"versi": "1.3.0"
} default.json menyalin informasi konfigurasi lingkungan yang berbeda berdasarkan baris perintah, dan mengonfigurasinya di 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",
} Gampang Gan?
Integrasikan isi informasi versi yang dihasilkan untuk menghasilkan informasi versi yang berbeda sesuai dengan lingkungan yang berbeda. Kode spesifiknya adalah sebagai berikut:
const execSync = require('child_process').execSync;
const fs = memerlukan('fs')
const targetFile = 'src/assets/version.json'; // File target disimpan di const config = require('./config/default.json');
const commit = execSync('git show -s --format=%h').toString().trim(); //Nomor versi yang dikirimkan saat ini let date = new Date(execSync('git show -s --format =%cd').toString()); // Tanggal biarkan pesan = execSync('git show -s --format=%s').toString().trim();
"env": config.env,
"versi": "",
"melakukan": melakukan,
"tanggal": tanggal,
"pesan": pesan
};
//Format tanggal const formatHari = (tanggal) => {
biarkan formatted_date = tanggal.getFullYear() + "." + (tanggal.getMonth()+1) + "."
kembalikan tanggal_format;
}
if(config.env === 'produksi') {
versionObj.version = config.version
}
if(config.env === 'pengembangan') {
versionObj.version = `${ config.version }:beta`
}
if(config.env === 'uji') {
versionObj.version = `${ config.version }-${ formatDay(tanggal) }:${ komit }`
}
const data = JSON.stringify(versionObj);
fs.writeFile(targetFile, data, (err) => {
jika(salah) {
membuang kesalahan
}
console.log('Data Stringify Json disimpan.')
}) Tambahkan baris perintah untuk lingkungan berbeda di package.json :
"scripts": {
"build:production": "npm jalankan copyConfigProduction && npm jalankan versi",
"build:development": "npm jalankan copyConfigDevelopment && npm jalankan versi",
"build:test": "npm jalankan copyConfigTest && npm jalankan versi",
} Informasi versi yang dihasilkan akan disimpan langsung di assets , dan jalur spesifiknya adalah src/assets/version.json .
angular terakhir adalah menampilkan informasi versi pada halaman.
Gunakan ng generate service version untuk menghasilkan layanan version di direktori app/services . Tambahkan informasi permintaan ke file version.service.ts yang dihasilkan sebagai berikut:
import { Injectable } from '@angular/core';
impor { HttpClient } dari '@angular/common/http';
impor {Dapat Diamati } dari 'rxjs';
@Dapat disuntik({
disediakan di: 'root'
})
kelas ekspor VersionService {
konstruktor(
http pribadi: HttpClient
) {}
public getVersion():Dapat Diamati<any> {
kembalikan ini.http.get('assets/version.json')
}
} Sebelum menggunakan permintaan, pasang modul HttpClientModule di file app.module.ts :
import { HttpClientModule } from '@angular/common/http';
// ...
impor: [
HttpClientModule
], lalu panggil saja di dalam komponen. Ini file app.component.ts :
import { Component } from '@angular/core';
import { VersionService } dari './services/version.service'; //Perkenalkan versi layanan @Component({
pemilih: 'root-aplikasi',
templateUrl: './app.component.html',
styleUrls: ['./app.component.less']
})
kelas ekspor Komponen Aplikasi {
versi publik: string = '1.0.0'
konstruktor(
versi hanya baca pribadiLayanan: VersionService
) {}
ngOnInit() {
this.versionService.getVersion().subscribe({
selanjutnya: (data: apa saja) => {
this.version = data.version //Ubah informasi versi},
kesalahan: (kesalahan: apa saja) => {
konsol.kesalahan(kesalahan)
}
})
}
} Sampai di sini, kami telah menyelesaikan informasi versi. Mari kita sesuaikan perintah package.json :
"scripts": {
"mulai": "ng layani",
"versi": "versi simpul.js",
"commit": "simpul commit.js",
"membangun": "ng membangun",
"build:production": "npm jalankan copyConfigProduction && npm jalankan versi && npm jalankan build",
"build:development": "npm jalankan copyConfigDevelopment && npm jalankan versi && npm jalankan build",
"build:test": "npm jalankan copyConfigTest && npm jalankan versi && npm jalankan 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"
} Tujuan penggunaan scripts adalah untuk memfasilitasi manajemen, tetapi juga untuk memfasilitasi konstruksi dan panggilan jenkins . Untuk bagian jenkins , bagi yang berminat bisa mencobanya sendiri.