1. 首頁 > 生活百科 > >

聊聊怎么利用Angular+Jenkins展示構建版本

小知識it知識

本篇文章帶大家繼續angular的學習，了解一下怎么使用Jenkins 結合 Angular 展示構建版本，希望對大家有所幫助！

聊聊怎么利用Angular+Jenkins展示構建版本

文章插圖

在 Angular 結合 Git Commit 版本處理 文末我們留下了疑問?️ 下面將問題具體化
結合 jenkins 構建，我們能夠獲取到構建的信息，比如構建號，回填到頁面否？【相關教程推薦：《angular教程》】
如下：
聊聊怎么利用Angular+Jenkins展示構建版本

文章插圖

Uha，我們在原基礎上修改下 。
根目錄添加文件 build_info.json 。
{ }
你沒看錯，build_info.json 的內容就是 {}
build_info.json 文件是給 Jenkinsfile 構建的時候生成的 。
具體的實現思路如下：
    【聊聊怎么利用Angular+Jenkins展示構建版本】在構建的過程中執行 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 開發的內容，敬請期待 。
本文轉載自：https://juejin.cn/post/7081642981890981895
作者：Jimmy
更多編程相關知識，請訪問：編程視頻??！
以上就是聊聊怎么利用Angular+Jenkins展示構建版本的詳細內容，更多請關注電腦自學網其它相關文章！

    推薦閱讀