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

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

在Angular 結合Git Commit 版本處理 文末我們留下了疑問?️ 下面將問題具體化

結合jenkins 構建，我們能夠獲取到構建的信息，例如構建號，回填到頁面否？ 【相關教學推薦：《angular教學》】

如下：

Uha，我們在原基礎上修改下。

根目錄新增檔案 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 開發的內容，敬請期待。

本文轉載自：https://juejin.cn/post/7081642981890981895

作者：Jimmy

#更多程式相關知識，請訪問：

程式設計影片！ ！

以上是聊聊怎麼利用Angular+Jenkins展示建構版本的詳細內容。更多資訊請關注PHP中文網其他相關文章！