Lassen Sie uns darüber sprechen, wie Sie Angular+Jenkins zum Anzeigen von Build-Versionen verwenden

Dieser Artikel wird Ihnen dabei helfen, Angular weiter zu lernen und zu erfahren, wie Sie Jenkins in Kombination mit Angular verwenden, um die erstellte Version anzuzeigen. Ich hoffe, dass er für alle hilfreich ist!

... die Build-Nummer und auf der Seite auffüllen? [Verwandte Tutorial-Empfehlung: „

Angular-Tutorial

“]

lautet wie folgt:

Uha, wir werden es basierend auf dem Original modifizieren.

Fügen Sie die Datei build_info.json zum Stammverzeichnis hinzu.

{ }

Du hast es richtig gelesen, der Inhalt von build_info.json ist die Datei {}

build_info.json ist für Jenkinsfile wird beim Erstellen generiert.

build_info.json。

pipeline {
    agent any
    
    tools { 
        nodejs "nodejs" 
    }
    
    stages {
        stage('Dependency') {
            steps {
                sh 'npm install'
            }
        }
        # 我们在此添加过一个 stage，见下面?
        stage('Build') { 
            steps {
                sh 'npm run clean' 
                sh 'npm run build' 
            }
        }
    }
}

你没看错，build_info.json 的内容就是 {}

build_info.json 文件是给 Jenkinsfile 构建的时候生成的。

具体的实现思路如下：

• 在构建的过程中执行 Jenkinsfile 生成 build_info.json 文件

• 在对项目打包的时候，针对不同的环境考虑是否获取 build_info.json 文件的内容

为了方便演示，这里的环境只考虑生产环境

上面的步骤简单两步，最重要的一点是如何写入 build_info.json 文件内容。

如果你不熟悉 Jenkinsfile 相关内容，请结合Jenkins Pipeline 结合 Gitlab 实现 Node 项目自动构建文章来阅读。此时你关注的重点是文章 Jenkinsfile 的内容，如下：

stage('Version') {
  steps {
    script {
      def amap = 
        'build_number': BUILD_NUMBER, # 构建号
        'job_name': JOB_NAME # 任务名称
      ]
      
      # 写入文件
      writeJSON file: WORKSPACE+'build_info.json', json: amap # WORKSPACE 根目录
    }
  }
}

我们添加过一个 stage 来完成我们对 build_info.json 文件的写入。

// 引入生成的 build_info.json 文件
let buildInfo = require('./build_info.json');

if(config.env === 'production') { 
    // 获取构建的版本号，否则获取默认的版本
    versionObj.version = buildInfo.build_number || config.version 
}

Yeah，思路还可以... Right?

下面进入第二步骤：读取 build_info.json 的内容，我截取 version.js 生产环境那部分的内容：

rrreee

完成上面的文件之后，你就可以发布到相关的环境，顺利的话，在页面上你可以看到相关的版本号了。

这篇文章跟 angular 的关联不是很大，只是用来打配合 jenkins。下一篇文章是关于使用 Angular 进行 spaDie spezifischen Implementierungsideen lauten wie folgt:

• Führen Sie Jenkinsfile während des Build-Prozesses aus, um build_info zu generieren. json-Datei<p></p>

• Überlegen Sie beim Packen des Projekts, ob Sie den Inhalt der build_info.json-Datei für verschiedene Umgebungen erhalten möchten

Der Einfachheit halber berücksichtigt die Umgebung hier nur die Produktionsumgebung.

Die oben genannten Schritte sind zwei einfache Schritte. Der wichtigste Punkt ist, wie man build_info.json schreibt Dateiinhalt.

🎜Wenn Sie mit Jenkinsfile-bezogenen Inhalten nicht vertraut sind, kombinieren Sie bitte Jenkins Pipeline kombiniert mit Gitlab, um die automatische Erstellung von Node-Projekten zu realisieren🎜Lesen Sie den Artikel. An dieser Stelle liegt Ihr Fokus auf dem Inhalt des Artikels Jenkinsfile, wie folgt: 🎜rrreee🎜Wir haben eine stage hinzugefügt, um unsere Arbeit an build_info abzuschließen. json Datei schreiben. 🎜rrreee🎜Ja, die Idee ist in Ordnung... Richtig?🎜🎜Lass uns zum zweiten Schritt gehen: Lesen Sie den Inhalt von build_info.json und ich fange die version.js ab. Code> Produktionsumgebung Der Inhalt dieses Teils: 🎜rrreee🎜Nachdem Sie die obige Datei fertiggestellt haben, können Sie sie in der entsprechenden Umgebung veröffentlichen. Wenn alles gut geht, können Sie die entsprechende Versionsnummer auf der Seite sehen. 🎜🎜Dieser Artikel hat nicht viel mit <code>angular zu tun, er dient lediglich der Zusammenarbeit mit jenkins. Im nächsten Artikel geht es um die Verwendung von Angular für die spa-Entwicklung, also bleiben Sie dran. 🎜🎜🎜Dieser Artikel wurde reproduziert von: https://juejin.cn/post/7081642981890981895🎜🎜Autor: Jimmy🎜🎜🎜Weitere programmbezogene Kenntnisse finden Sie unter: 🎜Programmiervideo🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonLassen Sie uns darüber sprechen, wie Sie Angular+Jenkins zum Anzeigen von Build-Versionen verwenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!