Angular+Jenkins を使用してビルド バージョンを表示する方法について話しましょう

この記事では、angular の学習を継続し、Jenkins と Angular を組み合わせて使用​​してビルドされたバージョンを表示する方法を学習します。

Angular と Git Commit バージョン処理の組み合わせ 記事の最後には疑問が残ります?️ 問題を具体的に説明しましょう

Jenkins ビルドと組み合わせると、ビルド番号などのビルド情報を取得でき、それをページにバックフィルできますか? [関連チュートリアルの推奨事項: "angular チュートリアル"]

は次のとおりです:

うーん、修正します。オリジナルに基づいています。

ファイル build_info.json をルート ディレクトリに追加します。

{ }

お読みのとおり、build_info.json のコンテンツは {}

build_info.json です。 このファイルは、Jenkinsfile のビルド時に生成されます。

具体的な実装アイデアは次のとおりです。

• ビルド プロセス中に Jenkinsfile を実行して、build_info.json ファイルを生成します。

• プロジェクトをパッケージ化するときは、さまざまな環境の build_info.json ファイルの内容を取得するかどうかを検討してください

デモンストレーションの便宜上、ここでの環境は本番環境のみを考慮しています

上記の手順は 2 つの簡単なステップです。最も重要な点は、 の内容をどのように記述するかです。 build_info.json ファイル 。

Jenkinsfile 関連コンテンツに詳しくない場合は、Jenkins Pipeline と Gitlab を使用してノード プロジェクトの自動構築を実装する 記事と併せてお読みください。現時点では、次のように記事 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' 
            }
        }
    }
}

build_info を完成させるために stage を追加しました。 jsonファイルの書き込み。

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

はい、そのアイデアは問題ありません...そうですか?

2 番目のステップに進みましょう。

build_info.json の内容を読み取り、## をインターセプトします。 #version.js 運用環境の内容: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">// 引入生成的 build_info.json 文件 let buildInfo = require(&amp;#39;./build_info.json&amp;#39;); if(config.env === &amp;#39;production&amp;#39;) { // 获取构建的版本号，否则获取默认的版本 versionObj.version = buildInfo.build_number || config.version }</pre><div class="contentsignin">ログイン後にコピー</div></div>上記のファイルを完成させたら、関連する環境に公開できます。すべてがうまくいけば、関連するバージョン番号がページ。 <p>この記事は </p>angular<p> とはあまり関係がありません。<code>jenkins と連携するためにのみ使用されます。次の記事では、spa 開発での Angular の使用について説明しますので、乞うご期待ください。

この記事は次から転載されています: https://juejin.cn/post/7081642981890981895

著者: Jimmy

プログラミング関連の知識の詳細については、こちらをご覧ください。をご覧ください:

プログラミングビデオ

! ！

以上がAngular+Jenkins を使用してビルド バージョンを表示する方法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。