Parlons de la façon d'utiliser Angular+Jenkins pour afficher les versions de build

Cet article vous aidera à continuer à apprendre angular et à apprendre à utiliser Jenkins combiné avec Angular pour afficher la version construite. J'espère qu'il sera utile à tout le monde !

Dans Angular combiné avec le traitement des versions de Git Commit À la fin de l'article, nous nous retrouvons avec des questions ?️ Concrètons le problème

Combiné avec le build jenkins, nous pouvons obtenir les informations de build, telles que le numéro de build et le remplir sur la page ? [Recommandation de tutoriel connexe : "tutoriel angulaire"]

est la suivante :

Uha, nous allons le modifier en fonction de l'original.

Ajoutez le fichier build_info.json au répertoire racine. build_info.json。

{ }

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

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

具体的实现思路如下：

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

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

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

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

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

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' 
            }
        }
    }
}

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

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

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

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

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

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

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

这篇文章跟 angular 的关联不是很大，只是用来打配合 jenkins。下一篇文章是关于使用 Angular 进行 sparrreee

Vous avez bien lu, le contenu de build_info.json est {}

build_info.json le fichier est pour Jenkinsfile est généré lors de la construction.

Les idées d'implémentation spécifiques sont les suivantes :

• Exécutez Jenkinsfile pendant le processus de construction pour générer build_info. json
• Lors de l'empaquetage du projet, réfléchissez à l'opportunité d'obtenir le contenu du fichier build_info.json pour différents environnements🎜

🎜 🎜Pour faciliter la démonstration, l'environnement ne prend ici en compte que l'environnement de production 🎜🎜🎜Les étapes ci-dessus sont deux étapes simples. Le point le plus important est comment écrire le build_info.json. contenu du fichier. 🎜🎜Si vous n'êtes pas familier avec le contenu lié au Jenkinsfile, veuillez combiner le Jenkins Pipeline combiné avec Gitlab pour implémenter la construction automatique de projets Node🎜Lire l'article. En ce moment, le centre de votre attention est le contenu de l'article Jenkinsfile, comme suit : 🎜rrreee🎜Nous avons ajouté une stage pour compléter notre build_info. json Écriture du fichier. 🎜rrreee🎜Ouais, l'idée est bonne... Non ?🎜🎜Passons à la deuxième étape : lire le contenu de build_info.json, et j'intercepte le version.js code> environnement de production Le contenu de cette partie : 🎜rrreee🎜Après avoir terminé le fichier ci-dessus, vous pouvez le publier dans l'environnement concerné. Si tout se passe bien, vous pouvez voir le numéro de version correspondant sur la page. 🎜🎜Cet article n'est pas très lié à <code>angular, il est juste utilisé pour coopérer avec jenkins. Le prochain article concerne l'utilisation de Angular pour le développement de spa, alors restez à l'écoute. 🎜🎜🎜Cet article est reproduit à partir de : https://juejin.cn/post/7081642981890981895🎜🎜Auteur : Jimmy🎜🎜🎜Pour plus de connaissances sur la programmation, veuillez visiter : 🎜Vidéo de programmation🎜 ! ! 🎜

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!