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

在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