web-dev-qa-db-de.com

Wie kann man die Revision von git in die angle-cli-Anwendung integrieren?

Ich muss die git-Revision auf der About-Seite meiner angle2-Anwendung anzeigen. Das Projekt basiert auf Winkelkli.

Wie kann das Build erweitert werden, sodass die Revision für git beispielsweise in environment.ts oder an einen anderen Ort abgelegt wird, auf den die Anwendung zugreifen kann?

18

Wie von @Yuri vorgeschlagen, konnte ich dies mithilfe von npm-Skripting lösen.

  1. Definierter git.version.ts in der Wurzel des angle-cli-Projekts:

    import fs = require('fs');
    import { Observable } from 'rxjs';
    
    let exec = require('child_process').exec;
    
    const revision = new Observable<string>(s => {
        exec('git rev-parse --short HEAD',
            function (error: Error, stdout: Buffer, stderr: Buffer) {
                if (error !== null) {
                    console.log('git error: ' + error + stderr);
                }
                s.next(stdout.toString().trim());
                s.complete();
            });
    });
    
    const branch = new Observable<string>(s => {
        exec('git rev-parse --abbrev-ref HEAD',
            function (error: Error, stdout: Buffer, stderr: Buffer) {
                if (error !== null) {
                    console.log('git error: ' + error + stderr);
                }
                s.next(stdout.toString().trim());
                s.complete();
            });
    });
    
    Observable
        .combineLatest(revision, branch)
        .subscribe(([revision, branch]) => {
            console.log(`version: '${process.env.npm_package_version}', revision: '${revision}', branch: '${branch}'`);
    
            const content = '// this file is automatically generated by git.version.ts script\n' +
                `export const versions = {version: '${process.env.npm_package_version}', revision: '${revision}', branch: '${branch}'};`;
    
            fs.writeFileSync(
                'src/environments/versions.ts',
                content,
                {encoding: 'utf8'}
            );
        });
    
  2. Vor-Build-Hook in package.json hinzugefügt:

    "scripts": {
        "ng": "ng",
        ...
        "start": "ng serve --proxy proxy-config.json",
        "prebuild.prod": "ts-node git.version.ts",
        "build.prod": "ng build -prod",
        ...
    },
    
  3. Verwenden Sie den generierten src/environments/versions.ts in der Anwendung.

    UPDATE 10/2018: Hier ist die besser lesbare Version des Skripts, rxjs-version-agnostic:

    import { writeFileSync } from 'fs';
    import { dedent } from 'tslint/lib/utils';
    
    const util = require('util');
    const exec = util.promisify(require('child_process').exec);
    
    async function createVersionsFile(filename: string) {
      const revision = (await exec('git rev-parse --short HEAD')).stdout.toString().trim();
      const branch = (await exec('git rev-parse --abbrev-ref HEAD')).stdout.toString().trim();
    
      console.log(`version: '${process.env.npm_package_version}', revision: '${revision}', branch: '${branch}'`);
    
      const content = dedent`
          // this file is automatically generated by git.version.ts script
          export const versions = {
            version: '${process.env.npm_package_version}',
            revision: '${revision}',
            branch: '${branch}'
          };`;
    
      writeFileSync(filename, content, {encoding: 'utf8'});
    }
    
    createVersionsFile('src/environments/versions.ts');    
    

Beachten Sie, dass ich bei der Verwendung von angle-cli v7.0.6 auch den Skriptaufruf in package.json ändern musste:

"scripts": {
    ...
    "prebuild.prod": "ts-node -O '{\"module\": \"commonjs\"}' git.version.ts",
    ...
},
34

Die anderen Antworten waren hilfreich, aber ich zog eine einfachere, direktere Herangehensweise vor. Hier ist meins.

Führen Sie npm install --save dev git-describe aus. Fügen Sie dann git-version.js zur Wurzel hinzu:

// This script runs operations *synchronously* which is normally not the best
// approach, but it keeps things simple, readable, and for now is good enough.

const { gitDescribeSync } = require('git-describe');
const { writeFileSync } = require('fs');

const gitInfo = gitDescribeSync();
const versionInfoJson = JSON.stringify(gitInfo, null, 2);

writeFileSync('git-version.json', versionInfoJson);

Optional können Sie /git-version.json zu Ihrer .gitignore-Datei hinzufügen.

Aktualisieren Sie Ihren package.json, um Folgendes zu tun:

"scripts": {
  "build": "node git-version.js && ng build"
}

Fügen Sie dann version-info.ts zur Wurzel Ihres Projekts hinzu:

export const versionInfo = (() => {
  try {
    // tslint:disable-next-line:no-var-requires
    return require('../../git-version.json');
  } catch {
    // In dev the file might not exist:
    return { tag: 'v0.0.0', hash: 'dev' };
  }
})();

Und import die versionInfo in Ihrem app.component.ts oder an einem anderen Ort, an dem Sie es verwenden möchten.

3
Jeroen

Ich halte die Dinge gerne einfach. Kann zu Ihrer index.html hinzufügen:

<script>window.version = '{git-hash}';</script>

Fügen Sie dann ein postbuild Skript zu Ihrem package.json Hinzu:

"postbuild": "sed -i '' \"s/{git\\-hash}/$(git rev-parse --short HEAD)/g\" dist/*/index.html"

Auf keinen Fall elegant. Persönlich erstelle ich ein Objekt auf window mit verschiedenen Informationen über den Build (Zeit, Version und einen Versionszusammenfassungslink).

Um "reiner" zu bleiben, stecken Sie den String {git-hash} In environment.prod.ts Und führen Sie sed für alle produzierten main-*.js - Dateien aus.

"postbuild": "sed -i '' \"s/{git\\-hash}/$(git rev-parse --short HEAD)/g\" dist/*/main-*.js"

Beachten Sie, dass '{git-hash}' immer lokal ausgeführt wird, da es nur nach der Erstellung ersetzt wird. Wenn Sie es vor dem Build ersetzen, können Sie es bei zukünftigen Builds natürlich nicht lokal ersetzen und würden dies auf jeden Fall versehentlich überprüfen.

---- UPDATE ----

Es wurde eine Bibliothek erstellt, um verschiedene Informationen abzurufen. Endete nur mit Version, Build-Zeit und CommitTime persönlich.

https://www.npmjs.com/package/@rippell/ngx-build-info

1
Charly

Ich war mit einer modifizierten Version von Vilmantas Baranauskas

Ich habe src/index.html nach src/index.base.html verschoben und einen leeren <meta name="revision" content=""> in den KOPF eingefügt

Beispiel:

<head>
<meta charset="utf-8">
<title>MySuperAwesome Angular</title>
<base href="/">

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="revision" content="">
<link rel="icon" type="image/x-icon" href="favicon.ico">

Dann git.version.ts so geändert:

import 'rxjs/add/observable/combineLatest';

import { readFileSync, writeFileSync } from 'fs';
import { join } from 'path';
import { Observable } from 'rxjs/Observable';

const indexBasePath = join(__dirname, 'src');

const exec = require('child_process').exec;

const revObs = new Observable<string>(s => {
  exec('git rev-parse --short HEAD',
  function (error: Error, stdout: Buffer, stderr: Buffer) {
    if (error !== null) {
      console.log('git error: ' + error + stderr);
    }
    s.next(stdout.toString().trim());
    s.complete();
  });
});

const branchObs = new Observable<string>(s => {
  exec('git rev-parse --abbrev-ref HEAD',
  function (error: Error, stdout: Buffer, stderr: Buffer) {
    if (error !== null) {
      console.log('git error: ' + error + stderr);
    }
    s.next(stdout.toString().trim());
    s.complete();
  });
});

Observable
.combineLatest(revObs, branchObs)
.subscribe(([revision, branch]) => {
  console.log(`revision: '${revision}', branch: '${branch}'`);

  const baseHTML = readFileSync(join(indexBasePath, 'index.base.html'), 'utf8');
  const html = baseHTML
    .replace('<meta name="revision" content="">', `<meta name="revision" content="${ revision }">`);

  writeFileSync(
    join(indexBasePath, 'index.html'),
    html,
    { encoding: 'utf8' }
  );
});

In diesem Beispiel füge ich nur die Revision hinzu, aber Sie können gründlicher sein und Zweig und Version in Ihren HTML-Abschnitt HEAD einfügen

1
colthreepv

Für Winkel 6

1 Installieren Sie git-beschreiben als Dev-Abhängigkeit

 npm i git-describe -s

2 Erstellen Sie in Ihrem Stammprojekt eine grab-git-info.js

   const { gitDescribeSync } = require('git-describe');
   const { writeFileSync } = require('fs');
   const path = require('path');
   const info = gitDescribeSync();
   const infoJson = JSON.stringify(info, null, 2);
   writeFileSync(path.join(__dirname, '/src/git-version.json'), infoJson);

Die Ausgabe des Grab-git-info.js-Skripts ist die Datei "git-version.json" unter/src /, die alle von unserer App benötigten git-Informationen enthält.

Um die Json-Datei (oder eine andere Json-Datei) importieren zu können, müssen Sie eine Definitionsdatei hinzufügen, die das hinzugefügte Modul deklariert, damit der TypeScript-Compiler es erkennt.

  1. Erstellen Sie unter/src die Datei typings.d.ts (weitere Informationen zu typings.d.ts finden Sie hier: https://angular.io/guide/TypeScript-configuration#TypeScript-typings )

/src/typings.d.ts:

 declare module '*.json' {
   const value: any;
   export default value;
 }

Ab diesem Zeitpunkt können Sie jede Json-Datei unter/src als Modul importieren!

In Ihre Komponente können Sie diesen Json importieren

 import * as data from '../../../git-version.json';
 ...
 public git = data;

In der HTML

 Rev: {{git.hash}}

Endlich Fügen Sie vor allem das Skript hinzu, bevor Sie mit dem Erstellen beginnen

In package.json fügen Sie hinzu:

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "node grab-git-info && ng build",

Und die App mit ausführen

 npm run build
0
Seba Arce

Ich habe es getan, indem ich ein Prebuild-Skript generiert habe, das nach der Installation ausgeführt wurde und vor einem Skript ausgeführt wurde, das mit angular) zusammenhängt


const fs =  require('fs');
const git = require('git-rev-sync');
var mkdirp = require('mkdirp');

const releaseTag = git.tag();
const template = `export const gitTag = '${releaseTag}';\n`;

mkdirp('./generated', function(err) {
    fs.writeFileSync('./generated/git-tag.ts', template, { encoding: 'UTF-8' });
});

welche git-tag.ts Datei erzeugt hat:

export const gitTag = 'xxxxxxx';

und jetzt verwenden Sie nur in der Komponente

import { gitTag } from '[pathToRoot]/generated/git-tag';

fügen Sie auch .gitignore hinzu

generated

0
repo