Maison > Article > interface Web > 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
进行 spa
rrreee
Vous avez bien lu, le contenu deLes idées d'implémentation spécifiques sont les suivantes :build_info.json
est{}
build_info.json
le fichier est pourJenkinsfile
est généré lors de la construction.
Jenkinsfile
pendant le processus de construction pour générer build_info. json
build_info.json
pour différents environnements🎜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!