Angular がバージョン処理のために Git Commit を組み合わせる方法

VUE3.0 をすぐに始める方法: 学習に入る

上の図は、ページに表示される测试环境/开发环境バージョン情報を示しています。 【おすすめ関連チュートリアル：「Angular Tutorial」】

後ほど紹介します。

上の図は、各送信の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 が占有されていないことを前提とすると

、 ng-commitプロジェクトのキー フォルダーsrcの構成は次のようになります

。
§── app // アプリケーション本体 │ §── app-routing.module.ts // ルーティングモジュール │ .
│ └── app.module.ts // アプリケーションモジュール §── アセット // 静的リソース §── main.ts // エントリファイル。
└── style.less // グローバル style の上のディレクトリ構造

。後でappディレクトリにservicesディレクトリを追加し、 assetsディレクトリにversion.jsonファイルを追加します。

各投稿の情報を記録し

、投稿情報を保存するファイルversion.txtルート ディレクトリに作成し、投稿情報を操作するファイルcommit.jsルート ディレクトリに作成します。

焦点はcommit.jsです。次のトピックに直接進みましょう。

const execSync = require('child_process').execSync;
const fs = require('fs')
const versionPath = 'version.txt'
const buildPath = 'dist'
const autoPush = true;
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}nAuthor:${name}<${email}>nDate:${date .getFullyear ()+'-'+(date.getMonth()+1)+'-'+date.getDate()+' '+date.getHours()+':'+date.getMinutes()}n 説明: ${メッセージ}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() }`)
  }
}

if(fs.existsSync(buildPath)) {
  fs.writeFileSync(`${ buildPath }/${ versionPath }`, fs.readFileSync(versionPath))

、

node commit.jsを通じて直接処理できます。

"scripts": {

package.jsonコマンド ラインを追加します

  "コミット": "ノード commit.js"
この

ように、 npm run commit使用すると、 node commit.jsと同じ効果が得られます。

バージョン情報の生成

以上の準備で、 commit情報から指定した形式のバージョン情報version.json生成できます。

ルート ディレクトリに新しいファイル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()) // Date let message = execSync('git show) - s --format=%s').toString().trim() // 説明 let versionObj = {
  「コミット」: コミット、
  「日付」: 日付、
  「メッセージ」: メッセージ
};

const データ = JSON.stringify(versionObj);

fs.writeFile(targetFile, data, (err) => {
  if(エラー) {
    スローエラー
  }
  console.log('Stringify Json データが保存されました。')
})

管理を容易にするために、 package.jsonにコマンド ラインを追加します:

"scripts": {
  "バージョン": "ノードのバージョン.js"

環境に基づいてバージョン情報を生成します

。

development環境、 production環境、 test環境があるとします。

• 実稼働環境のバージョン情報は、 major.minor.patchです。 例: 1.1.0
• 開発環境のバージョン情報は、 major.minor.patch:betaです。 例: 1.1.0:beta
• テスト環境のバージョン情報は、 major.minor.path-data:hashです。 major.minor.path-data:hash (例: 1.1.0-2022.01.01:4rtr5rg)

さまざま

な環境の管理を容易にするために、次のようにプロジェクトのルート ディレクトリに新しいファイルを作成します。

§──default.json // プロジェクトで呼び出される設定ファイル ├──development.json // 開発環境設定ファイル §──production.json // 本番環境設定ファイル └── test.json // テスト環境設定ファイル

関連ファイルの内容は次のとおりです:

//development.json
{
  "環境": "開発",
  「バージョン」：「1.3.0」
}

// 制作.json
{
  "環境": "本番環境",
  「バージョン」：「1.3.0」
}

//テスト.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 = {
  "env": config.env、
  "バージョン": "",
  「コミット」: コミット、
  「日付」: 日付、
  「メッセージ」: メッセージ
};

//日付のフォーマット const formatDay = (date) => {
  let formatted_date = date.getFull Year() + "." + (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 }`
}

const データ = JSON.stringify(versionObj);

fs.writeFile(targetFile, data, (err) => {
  if(エラー) {
    スローエラー
  }
  console.log('Stringify Json データが保存されました。')
})

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",

、

assetsに直接保存され、特定のパスはsrc/assets/version.jsonです。

Angular と組み合わせてページにバージョン情報を表示します。

最後のステップは、 angularと組み合わせてページにバージョン情報を表示します。

ng generate service versionを使用して、 app/servicesディレクトリにversionサービスを生成します。次のように、生成されたversion.service.tsファイルにリクエスト情報を追加します。

import { Injectable } from '@angular/core';
import { HttpClient } から '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  提供対象: 'ルート'
})
エクスポートクラス VersionService {

  コンストラクタ（
    プライベート http: HttpClient
  ) { }

  public getVersion():Observable<any> {
    return this.http.get('assets/version.json')
  }

、

app.module.tsファイルにHttpClientModuleモジュールをマウントします。

import { HttpClientModule } from '@angular/common/http';

// ...

輸入品: [
  HTTPクライアントモジュール
] を

選択し、コンポーネント内で呼び出すだけです。これがapp.component.tsファイルです。

import { Component } from '@angular/core';
import { VersionService } from './services/version.service' //バージョンサービスを導入します @Component({
  セレクター: 'アプリルート',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
エクスポート クラス AppComponent {

  公開バージョン: 文字列 = '1.0.0'

  コンストラクタ（
    プライベート読み取り専用 versionService: VersionService
  ) {}

  ngOnInit() {
    this.versionService.getVersion().subscribe({
      次: (データ: 任意) => {
        this.version = data.version //バージョン情報を変更する},
      エラー: (エラー: 任意) => {
        コンソール.エラー(エラー)
      }
    })
  }
この

時点で、バージョン情報の入力は完了です。

"scripts": {

package.jsonコマンドを調整しましょう。

  "開始": "NG サーブ",
  "バージョン": "ノードのバージョン.js",
  "コミット": "ノード commit.js",
  「ビルド」：「ng build」、
  "build:production": "npm run copyConfigProduction && npm run バージョン && 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"

scripts使用する目的は、管理を容易にすることですが、 jenkins構築と呼び出しも容易にすることです

。

jenkins部分については、興味のある人は自分で試すことができます。