Maison  >  Article  >  interface Web  >  Comment Angular combine Git Commit pour le traitement des versions

Comment Angular combine Git Commit pour le traitement des versions

青灯夜游
青灯夜游avant
2022-03-28 11:36:152048parcourir

Cet article vous amènera à continuer à apprendre angular et à présenter la méthode Angular combinée au traitement des versions de Git Commit. J'espère qu'il sera utile à tout le monde !

Comment Angular combine Git Commit pour le traitement des versions

Comment Angular combine Git Commit pour le traitement des versions

L'image ci-dessus représente les informations de version de l'environnement de test/environnement de développement affichées sur la page. [Recommandations de tutoriel associées : "测试环境/开发环境版本信息。【相关教程推荐:《angular教程》】

后面有介绍

Comment Angular combine Git Commit pour le traitement des versions

上图表示的是每次提交的Git Commit的信息,当然,这里我是每次提交都记录,你可以在每次构建的时候记录。

So,我们接下来用 Angular 实现下效果,ReactVue 同理。

搭建环境

因为这里的重点不是搭建环境,我们直接用 angular-cli 脚手架直接生成一个项目就可以了。

Step 1: 安装脚手架工具

npm install -g @angular/cli

Step 2: 创建一个项目

# ng new PROJECT_NAME
ng new ng-commit

Step 3: 运行项目

npm run start

项目运行起来,默认监听4200端口,直接在浏览器打开http://localhost:4200/就行了。

4200 端口没被占用的前提下

此时,ng-commit 项目重点文件夹 src 的组成如下:

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 上加上命令行:

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

那样,使用 npm run commit 同等 node commit.js 的效果。

生成版本信息

有了上面的铺垫,我们可以通过 commit 的信息,生成指定格式的版本信息version.json了。

在根目录中新建文件version.js用来生成版本的数据。

const execSync = require(&#39;child_process&#39;).execSync;
const fs = require(&#39;fs&#39;)
const targetFile = &#39;src/assets/version.json&#39;; // 存储到的目标文件

const commit = execSync(&#39;git show -s --format=%h&#39;).toString().trim(); //当前提交的版本号,hash 值的前7位
let date = new Date(execSync(&#39;git show -s --format=%cd&#39;).toString()); // 日期
let message = execSync(&#39;git show -s --format=%s&#39;).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(&#39;Stringify Json data is saved.&#39;)
})

我们在 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

方便管理不同环境,我们在项目的根目录中新建文件如下:

config
├── default.json          // 项目调用的配置文件
├── development.json      // 开发环境配置文件
├── production.json       // 生产环境配置文件
└── test.json             // 测试环境配置文件

相关的文件内容如下:

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

Is easy Bro, right?

整合生成版本信息的内容,得到根据不同环境生成不同的版本信息,具体代码如下:

const execSync = require(&#39;child_process&#39;).execSync;
const fs = require(&#39;fs&#39;)
const targetFile = &#39;src/assets/version.json&#39;; // 存储到的目标文件
const config = require(&#39;./config/default.json&#39;);

const commit = execSync(&#39;git show -s --format=%h&#39;).toString().trim(); //当前提交的版本号
let date = new Date(execSync(&#39;git show -s --format=%cd&#39;).toString()); // 日期
let message = execSync(&#39;git show -s --format=%s&#39;).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 === &#39;production&#39;) {
  versionObj.version = config.version
}

if(config.env === &#39;development&#39;) {
  versionObj.version = `${ config.version }:beta`
}

if(config.env === &#39;test&#39;) {
  versionObj.version = `${ config.version }-${ formatDay(date) }:${ commit }`
}

const data = JSON.stringify(versionObj);

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

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 versionapp/services 目录中生成 version 服务。在生成的 version.service.ts 文件中添加请求信息,如下:

import { Injectable } from &#39;@angular/core&#39;;
import { HttpClient } from &#39;@angular/common/http&#39;;
import { Observable } from &#39;rxjs&#39;;

@Injectable({
  providedIn: &#39;root&#39;
})
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 &#39;@angular/common/http&#39;;

// ...

imports: [
  HttpClientModule
],

之后在组件中调用即可,这里是 app.component.ts 文件:

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

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

  public version: string = &#39;1.0.0&#39;

  constructor(
    private readonly versionService: VersionService
  ) {}

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

至此,我们完成了版本信息。我们最后来调整下 package.jsonTutoriel angulaire

"]🎜
🎜Introduction ultérieure🎜
🎜Comment Angular combine Git Commit pour le traitement des versions🎜🎜L'image ci-dessus montre les informations de chaque soumission de Git Commit. Bien sûr, me voici chaque le commit est enregistré et vous pouvez l'enregistrer à chaque fois que vous construisez. 🎜🎜Alors, utilisons Angular pour obtenir l'effet suivant. Il en va de même pour React et Vue. 🎜

Créer l'environnement

🎜Parce que l'objectif ici n'est pas de créer l'environnement, nous utilisons directement le angular-cli échafaudage directement Générez simplement un projet. 🎜🎜<strong>Étape 1 : Installer les outils d'échafaudage</strong>🎜<pre class="brush:js;toolbar:false;">&quot;scripts&quot;: { &quot;start&quot;: &quot;ng serve&quot;, &quot;version&quot;: &quot;node version.js&quot;, &quot;commit&quot;: &quot;node commit.js&quot;, &quot;build&quot;: &quot;ng build&quot;, &quot;build:production&quot;: &quot;npm run copyConfigProduction &amp;&amp; npm run version &amp;&amp; npm run build&quot;, &quot;build:development&quot;: &quot;npm run copyConfigDevelopment &amp;&amp; npm run version &amp;&amp; npm run build&quot;, &quot;build:test&quot;: &quot;npm run copyConfigTest &amp;&amp; npm run version &amp;&amp; npm run build&quot;, &quot;copyConfigProduction&quot;: &quot;cp ./config/production.json ./config/default.json&quot;, &quot;copyConfigDevelopment&quot;: &quot;cp ./config/development.json ./config/default.json&quot;, &quot;copyConfigTest&quot;: &quot;cp ./config/test.json ./config/default.json&quot; }</pre>🎜<strong>Étape 2 : Créer un projet</strong>🎜rrreee🎜<strong>Étape 3 : Exécuter le projet</strong>🎜rrreee🎜 project Lors de son exécution, il écoutera le port <code>4200 par défaut. Ouvrez simplement http://localhost:4200/ directement dans le navigateur. 🎜
🎜En partant du principe que le port 4200 n'est pas occupé🎜
🎜A ce moment, la composition du dossier clé src du ng-commit Le projet est le suivant : 🎜rrreee 🎜Pour la structure de répertoires ci-dessus, nous ajouterons plus tard le répertoire de services services sous le répertoire app, et le version.jsonassets /code>file. 🎜

Enregistrez les informations de chaque soumission

🎜Créez un fichier version.txt dans le répertoire racine du Store les informations soumises ; créez un fichier commit.js dans le répertoire racine pour manipuler les informations soumises. 🎜🎜L'accent est mis sur commit.js, passons directement au sujet : 🎜rrreee🎜Les fichiers ci-dessus peuvent être traités directement via node commit.js. Afin de faciliter la gestion, nous ajoutons la ligne de commande à package.json : 🎜rrreee🎜Comme ça, utilisez npm run commit qui est équivalent à node commit. js effet. 🎜

Générer des informations de version

🎜Avec la fondation ci-dessus, nous pouvons générer la version spécifiée via les informations de commit Les informations de version sont au format version.json. 🎜🎜Créez un nouveau fichier version.js dans le répertoire racine pour générer les données de version. 🎜rrreee🎜Nous ajoutons une ligne de commande à package.json pour faciliter la gestion : 🎜rrreee

Générer les informations de version en fonction de l'environnement🎜Générer différentes informations de version pour différents environnements. Supposons que nous ayons un environnement de développement development, un environnement de production production et un environnement de test automobile test<.>. 🎜<ul> <li>Les informations sur la version de l'environnement de production sont <code>major.minor.patch, par exemple : 1.1.0
  • Les informations sur la version de l'environnement de développement sont major. minor.patch :beta, tel que : 1.1.0:beta
  • Les informations sur la version de l'environnement de test sont major.minor.path-data:hash, tel que : 1.1.0-2022.01 .01:4rtr5rg
  • 🎜Pour faciliter la gestion des différents environnements, nous créons un nouveau fichier dans le répertoire racine du projet comme suit : 🎜rrreee🎜Le contenu du fichier pertinent est comme suit : 🎜rrreeerrreeerrreee🎜default.json Copiez les informations de configuration des différents environnements en fonction de la ligne de commande et configurez-les dans package.json : 🎜rrreee🎜Est facile Bro, n'est-ce pas ?🎜🎜Intégrez le contenu desinformations de version générées, différentes informations de version sont générées en fonction de différents environnements. Le code spécifique est le suivant : 🎜rrreee🎜Ajoutez la ligne de commande pour différents. environnements dans package.json : 🎜rrreee🎜La version générée Les informations seront stockées directement dans assets, et le chemin spécifique est src/assets/version.json . 🎜

    Combiné avec Angular pour afficher les informations de version sur la page

    🎜La dernière étape consiste à afficher les informations de version sur la page, voici la même chose que la combinaison angulaire . 🎜🎜Utilisez ng generate service version pour générer le service version dans le répertoire app/services. Ajoutez les informations de requête au fichier version.service.ts généré comme suit : 🎜rrreee🎜Avant d'utiliser les requêtes, montez app.module.ts >HttpClientModule module : 🎜rrreee🎜 Ensuite, appelez-le dans le composant. Voici le fichier app.component.ts : 🎜rrreee🎜À ce stade, nous avons complété les informations de version. Ajustons enfin la commande de 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 部分,感兴趣者可以自行尝试。

    更多编程相关知识,请访问:编程入门!!

    Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

    Déclaration:
    Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer