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

この記事では、angular の学習を継続し、Git Commit バージョン処理と組み合わせた Angular の方法を紹介します。

上の図は、ページに表示されている テスト環境/開発環境 のバージョン情報です。 [推奨関連チュートリアル: "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                                        // 全局样式

上記のディレクトリ構造ですが、後で

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%s\x1b[0m', 'warming: 当前的git版本数据已经存在了!\n')
} else {
  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}>\n日期:${date.getFullYear()+&#39;-&#39;+(date.getMonth()+1)+&#39;-&#39;+date.getDate()+&#39; &#39;+date.getHours()+&#39;:&#39;+date.getMinutes()}\n说明:${message}\n${new Array(80).join(&#39;*&#39;)}\n${versionStr}`;
  fs.writeFileSync(versionPath, versionStr);
  // 写入版本信息之后，自动将版本信息提交到当前分支的git上
  if(autoPush) { // 这一步可以按照实际的需求来编写
    execSync(`git add ${ versionPath }`);
    execSync(`git commit ${ versionPath } -m 自动提交版本信息`);
    execSync(`git push origin ${ execSync(&#39;git rev-parse --abbrev-ref HEAD&#39;).toString().trim() }`)
  }
}

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

上記のファイルは、node commit.js# を通じて直接処理できます。 ##。管理を容易にするために、

package.json

にコマンド ラインを追加します。 <pre class="brush:js;toolbar:false;">&quot;scripts&quot;: { &quot;commit&quot;: &quot;node commit.js&quot; }</pre> このように、node と同等の npm run commit

を使用します。 commit.js

効果。 バージョン情報の生成

上記の基盤を使用すると、commit information

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(); //当前提交的版本号，hash 值的前7位
let date = new Date(execSync('git show -s --format=%cd').toString()); // 日期
let message = execSync('git show -s --format=%s').toString().trim(); // 说明

let versionObj = {
  "commit": commit,
  "date": date,
  "message": message
};

const data = JSON.stringify(versionObj);

fs.writeFile(targetFile, data, (err) => {
  if(err) {
    throw err
  }
  console.log('Stringify Json data is saved.')
})

管理を容易にするために、

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

"scripts": {
  "version": "node version.js"
}

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

環境ごとに異なるバージョン情報が生成される 開発環境

development、本番環境 production

、車両テスト環境

test があるとします。 実稼働環境のバージョン情報は、major.minor.patch です。例: 1.1.0

開発環境のバージョン情報は、
• major です。 minor.patch :beta (例: 1.1.0:beta
) テスト環境のバージョン情報は、
• major.minor.path-data:hash (例: 1.1) です。 0-2022.01.01: 4rtr5rg
• さまざまな環境の管理を容易にするために、次のようにプロジェクトのルート ディレクトリに新しいファイルを作成します: <pre class="brush:js;toolbar:false;">config ├── default.json // 项目调用的配置文件 ├── development.json // 开发环境配置文件 ├── production.json // 生产环境配置文件 └── test.json // 测试环境配置文件</pre>関連するファイルの内容

// development.json
{
  "env": "development",
  "version": "1.3.0"
}

// production.json
{
  "env": "production",
  "version": "1.3.0"
}

// test.json
{
  "env": "test",
  "version": "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",
}

#簡単ですよね?

Generate version information

の内容を統合して、異なる環境に応じて異なるバージョン情報を生成します。具体的なコードは次のとおりです。

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,
  "version": "",
  "commit": commit,
  "date": date,
  "message": message
};

// 格式化日期
const formatDay = (date) => {
  let formatted_date = date.getFullYear() + "." + (date.getMonth()+1) + "." +date.getDate()
    return formatted_date;
}

if(config.env === 'production') {
  versionObj.version = config.version
}

if(config.env === 'development') {
  versionObj.version = `${ config.version }:beta`
}

if(config.env === 'test') {
  versionObj.version = `${ config.version }-${ formatDay(date) }:${ commit }`
}

const data = JSON.stringify(versionObj);

fs.writeFile(targetFile, data, (err) => {
  if(err) {
    throw err
  }
  console.log('Stringify Json data is saved.')
})

Add in

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 generated service version

を使用して、

app/services ディレクトリに version

サービスを生成します。次のように、生成された

version.service.ts ファイルにリクエスト情報を追加します。

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

@Injectable({
  providedIn: 'root'
})
export class VersionService {

  constructor(
    private http: HttpClient
  ) { }

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

リクエストを使用する前に、app.module.ts をマウントする必要があります。ファイル HttpClientModule モジュール:

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

// ...

imports: [
  HttpClientModule
],

あとはコンポーネント内で呼び出すだけです。これが

app.component.ts ファイル:

import { Component } from '@angular/core';
import { VersionService } from './services/version.service'; // 引入版本服务

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {

  public version: string = '1.0.0'

  constructor(
    private readonly versionService: VersionService
  ) {}

  ngOnInit() {
    this.versionService.getVersion().subscribe({
      next: (data: any) => {
        this.version = data.version // 更改版本信息
      },
      error: (error: any) => {
        console.error(error)
      }
    })
  }
}

この時点では, バージョン情報は完了です。最後に package.json

のコマンドを調整しましょう:

"scripts": {
  "start": "ng serve",
  "version": "node version.js",
  "commit": "node 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 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 部分，感兴趣者可以自行尝试。

更多编程相关知识，请访问：编程入门！！

以上がAngular がバージョン処理のために Git Commit を組み合わせる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。