Anpassen von JavaScript für Azure Pipelines

Wenn Sie eine Version von Node.js und npm benötigen, die noch nicht auf dem von Microsoft gehosteten Agent installiert ist, verwenden Sie die Aufgabe Installationsprogramm für das Node-Tool. Fügen Sie Ihrer Datei azure-pipelines.yml den folgenden Codeschnipsel hinzu.

- task: UseNode@1
  inputs:
    version: '16.x' # replace this value with the version that you need for your project

Wenn Sie eine Version von Node.js/npm benötigen, die noch nicht auf dem Agent installiert ist:

1. Wählen Sie in der Pipeline Aufgaben aus, wählen Sie die Phase aus, in der Ihre Buildaufgaben ausgeführt werden, und wählen Sie dann + aus, um dieser Phase eine neue Aufgabe hinzuzufügen.

2. Suchen Sie im Aufgabenkatalog nach der Aufgabe Installationsprogramm für Node-Tool, und fügen Sie sie hinzu.

3. Wählen Sie die Aufgabe aus, und geben Sie die Version der Node.js-Runtime an, die Sie installieren möchten.

pool:
  vmImage: 'ubuntu-latest'
strategy:
  matrix:
    node_16_x:
      node_version: 16.x
    node_13_x:
      node_version: 18.x

steps:
- task: UseNode@1
  inputs:
    version: $(node_version)

- script: npm install

Weitere Informationen finden Sie unter Ausführung mit mehreren Konfigurationen.

Wenn Sie Tools verwenden, die Entwicklungsabhängigkeiten in Ihrer Projektdatei package.json oder package-lock.json sind, installieren Sie Ihre Tools und Abhängigkeiten über npm. Die genaue Version der Tools wird im Projekt definiert, isoliert von anderen Versionen, die im Build-Agent vorhanden sind.

Verwenden Sie ein Skript oder die npm-Aufgabe.

Verwenden eines Skripts zum Installieren mit „package.json“

- script: npm install --only=dev

Verwenden der npm-Aufgabe zum Installieren mit „package.json“

- task: Npm@1
  inputs:
     command: 'install'

Führen Sie die auf diese Weise installierten Tools mithilfe des npm-Paket-Runners npx aus, der die auf diese Weise installierten Tools in seiner Pfadauflösung erkennt. Das folgende Beispiel ruft den Test Runner mocha auf, sucht jedoch nach der als Entwicklungsabhängigkeit installierten Version, bevor eine global installierte Version (bis npm install -g) verwendet wird.

- script: npx mocha

Um Tools zu installieren, die Ihr Projekt benötigt, die aber nicht als Entwicklungsabhängigkeiten in package.json festgelegt sind, rufen Sie npm install -g aus einer Skriptstage in Ihrer Pipeline auf.

Im folgenden Beispiel wird die neueste Version der Angular CLI mithilfe von npm installiert. Der Rest der Pipeline kann dann das ng-Tool aus anderen script-Stages verwenden.

- script: npm install -g @angular/cli

Verwenden Sie die npm- oder Befehlszeilentasks in Ihrer Pipeline, um Tools auf Ihrem Build-Agent zu installieren.

Um npm-Pakete mit einem Skript in Ihrer Pipeline zu installieren, fügen Sie den folgenden Codeschnipsel azure-pipelines.yml hinzu.

- script: npm install

Um eine private Registrierung zu verwenden, die in Ihrer .npmrc-Datei angegeben ist, fügen Sie azure-pipelines.yml den folgenden Codeschnipsel hinzu.

- task: Npm@1
  inputs:
    customEndpoint: <Name of npm service connection>

Um Registrierungsanmeldeinformationen über Aufgabenausführungen wie Gulp an npm-Befehle zu übergeben, fügen Sie azure-pipelines.yml die folgende Aufgabe hinzu, bevor Sie die Aufgabenausführung aufrufen.

- task: npmAuthenticate@0
  inputs:
    customEndpoint: <Name of npm service connection>

Verwenden Sie die npm- oder npm authenticate-Aufgabe in Ihrer Pipeline, um Pakete herunterzuladen und zu installieren.

Wenn bei Ihren Builds gelegentlich Verbindungsfehler auftreten, wenn Sie Pakete aus der npm-Registrierung wiederherstellen, können Sie Azure Artifacts mit Upstreamquellen verwenden und die Pakete zwischenspeichern. Die Anmeldeinformationen der Pipeline werden automatisch verwendet, wenn Sie eine Verbindung mit Azure Artifacts herstellen. Diese Anmeldeinformationen werden in der Regel vom Projektsammlungs-Builddienst-Konto abgeleitet.

Wenn Sie von Microsoft gehostete Agents verwenden, erhalten Sie bei jeder Ausführung eines Builds einen neuen Computer. Dies bedeutet, dass die Abhängigkeiten jedes Mal wiederhergestellt werden, was viel Zeit in Anspruch nehmen kann. Zur Entschärfung können Sie Azure Artifacts oder einen selbstgehosteten Agent verwenden. Dann profitieren Sie von der Verwendung des Paketcaches.

Verwenden Sie eine Skriptstage, um Yarn aufzurufen, um Abhängigkeiten wiederherzustellen. Yarn ist auf einigen von Microsoft gehosteten Agents vorinstalliert. Sie können es wie jedes andere Tool auf selbstgehosteten Agents installieren und konfigurieren.

- script: yarn install

Verwenden Sie die CLI oder eine Bash-Aufgabe in Ihrer Pipeline, um Yarn aufzurufen.

Verwenden Sie Compiler wie Babel und den TypeScript-Compilertsc, um Ihren Quellcode in Versionen zu konvertieren, die von der Node.js Laufzeit oder in Webbrowsern verwendet werden können.

Wenn Sie in Ihrer Projektdatei package.json ein Skriptobjekt eingerichtet haben, das Ihren Compiler ausführt, rufen Sie es in Ihrer Pipeline mithilfe einer Skriptaufgabe auf.

- script: npm run compile

Sie können Compiler direkt aus der Pipeline aufrufen, indem Sie die Skriptaufgabe verwenden. Diese Befehle werden im Stammverzeichnis des geklonten Quellcoderepositorys ausgeführt.

- script: tsc --target ES6 --strict true --project tsconfigs/production.json

Verwenden Sie die npm-Aufgabe in Ihrer Pipeline, wenn Sie in Ihrer PACKAGE.JSON-Projektdatei ein Kompilierskript definiert haben, um den Code zu erstellen. Verwenden Sie die Bash-Aufgabe, um Ihren Code zu kompilieren, wenn in der Projektkonfiguration kein separates Skript definiert ist.

Konfigurieren Sie Ihre Pipelines für die Ausführung Ihrer JavaScript-Tests, sodass sie Ergebnisse im JUnit-XML-Format generieren. Anschließend können Sie die Ergebnisse mithilfe der integrierten Aufgabe Testergebnisse veröffentlichen veröffentlichen.

Wenn Ihr die Testframework JUnit-Ausgabe nicht unterstützt, fügen Sie Unterstützung über ein Partnerberichtsmodul hinzu, z. B. über mocha-junit-reporter. Sie können entweder Ihr Testskript aktualisieren, um den JUnit-Reporter zu verwenden, oder diese Optionen an die Aufgabendefinition übergeben, wenn der Reporter Befehlszeilenoptionen unterstützt.

In der folgenden Tabelle werden die am häufigsten verwendeten Test Runner und die Reporter aufgeführt, die zum Erstellen von XML-Ergebnissen verwendet werden können:

Im folgenden Beispiel wird mocha-junit-reporter verwendet und mocha test direkt mithilfe eines Skripts aufgerufen. Dieses Skript generiert die JUnit-XML-Ausgabe am Standardspeicherort von ./test-results.xml.

- script: mocha test --reporter mocha-junit-reporter

Wenn Sie ein test-Skript in der PACKAGE.JSON-Projektdatei definiert haben, können Sie es mithilfe von npm test aufrufen.

- script: npm test

Testergebnisse veröffentlichen

Um die Ergebnisse zu veröffentlichen, verwenden Sie die Aufgabe Testergebnisse veröffentlichen.

- task: PublishTestResults@2
  condition: succeededOrFailed()
  inputs:
    testRunner: JUnit
    testResultsFiles: '**/test-results.xml'

Veröffentlichen von Code Coverage-Ergebnissen

Wenn Ihre Testskripts ein Code Coverage-Tool wie Istanbul ausführen, fügen Sie die Aufgabe Code Coverage-Ergebnisse veröffentlichen hinzu. Wenn Sie so vorgehen, können Sie Coverage-Metriken in der Buildzusammenfassung einsehen und HTML-Berichte zur weiteren Analyse herunterladen. Die Aufgabe erwartet Cobertura- oder JaCoCo-Berichtausgabe. Stellen Sie daher sicher, dass Ihr Code Coverage-Tool mit den erforderlichen Optionen ausgeführt wird, um die richtige Ausgabe zu generieren. Beispiel: --report cobertura.

Im folgenden Beispiel wird nyc, die Istanbul-Befehlszeilenschnittstelle, zusammen mit mocha-junit-reporter verwendet, und der Befehl npm test wird aufgerufen.

- script: |
    nyc --reporter=cobertura --reporter=html \
    npm test -- --reporter mocha-junit-reporter --reporter-options mochaFile=./test-results.xml
  displayName: 'Build code coverage report'

- task: PublishCodeCoverageResults@2
  inputs: 
    summaryFileLocation: '$(System.DefaultWorkingDirectory)/**/*coverage.xml'

Verwenden Sie die Aufgaben Testergebnisse veröffentlichen und Code Coverage-Ergebnisse veröffentlichen in Ihrer Pipeline, um Testergebnisse zusammen mit Code Coverage-Ergebnissen mithilfe von Istanbul zu veröffentlichen.

Legen Sie die Steuerungsoptionen für die Aufgabe „Testergebnisse veröffentlichen“ so fest, dass die Aufgabe auch dann ausgeführt wird, wenn bei einer vorherigen Aufgabe ein Fehler aufgetreten ist, es sei denn, die Bereitstellung wurde abgebrochen.

Packen Sie Anwendungen, um alle Ihre Anwendungsmodule mit Zwischenausgaben und Abhängigkeiten in statische Ressourcen zu bündeln, die für die Bereitstellung bereit sind. Fügen Sie nach der Kompilierung und den Tests eine Pipelinestage hinzu, um ein Tool wie webpack oder ng build mithilfe der Angular CLI auszuführen.

Im ersten Beispiel wird webpack aufgerufen. Damit dies funktioniert, stellen Sie sicher, dass webpack als Entwicklungsabhängigkeit in Ihrer PACKAGE.JSON-Projektdatei konfiguriert ist. Dabei wird webpack mit der Standardkonfiguration ausgeführt, es sei denn, es gibt eine Datei webpack.config.js im Stammordner Ihres Projekts.

- script: webpack

Im nächsten Beispiel wird die npm-Aufgabe zum Aufrufen von npm run build zum Aufrufen des build-Skriptobjekts verwendet, das in der PACKAGE.JSON-Projektdatei definiert ist. Die Verwendung von Skriptobjekten in Ihrem Projekt verschiebt die Logik für den Build in den Quellcode und aus der Pipeline.

- script: npm run build

Verwenden Sie die CLI oder eine Bash-Aufgabe in Ihrer Pipeline, um Ihr Paketerstellungstool aufzurufen, z. B. webpack oder ng build von Angular.

- script: |
    npm install -g @angular/cli
    npm install
    ng build --prod

Fügen Sie Ihrer Pipeline die folgenden Tasks hinzu:

• npm

  • Befehl: custom
  • Befehl und Argumente: install -g @angular/cli

• npm

  • Befehl: install

• Bash

  • Typ:inline
  • Skript: ng build --prod

- script: |
    npm install
  displayName: 'npm install'

- script: |
    npm run build
  displayName: 'npm build'

trigger:
- main

pool:
  vmImage: 'ubuntu-latest'

steps:
- task: UseNode@1
  inputs:
    version: '16.x'
  displayName: 'Install Node.js'

- script: |
    npm install
  displayName: 'npm install'

- script: |
    npm run build
  displayName: 'npm build'

- task: CopyFiles@2
  inputs:
    Contents: 'build/**' # Pull the build directory (React)
    TargetFolder: '$(Build.ArtifactStagingDirectory)'

- task: PublishBuildArtifacts@1
  inputs: 
    PathtoPublish: $(Build.ArtifactStagingDirectory) # dist or build files
    ArtifactName: 'www' # output artifact named www

- script: |
    npm install webpack webpack-cli --save-dev
    npx webpack --config webpack.config.js

Fügen Sie Ihrer Pipeline die folgenden Tasks hinzu:

• npm

  • Befehl: custom
  • Befehl und Argumente: install -g webpack webpack-cli --save-dev

• Bash

  • Typ:inline
  • Skript: npx webpack --config webpack.config.js

Gulp ist auf von Microsoft gehosteten Agents vorinstalliert. Führen Sie den gulp-Befehl in der YAML-Datei aus:

- script: gulp                       # include any additional options that are needed

Wenn die Schritte in Ihrer GULPFILE.JS-Datei Authentifizierung bei einer npm-Registrierung erfordern:

- task: npmAuthenticate@0
  inputs:
    customEndpoint: <Name of npm service connection>

- script: gulp                       # include any additional options that are needed

Fügen Sie die Aufgabe Testergebnisse veröffentlichen hinzu, um JUnit- oder xUnit-Testergebnisse auf dem Server zu veröffentlichen.

- task: PublishTestResults@2
  inputs:
    testResultsFiles: '**/TEST-RESULTS.xml'
    testRunTitle: 'Test results for JavaScript using gulp'

Fügen Sie die Aufgabe Code Coverage Results veröffentlichen hinzu, um Code Coverage-Ergebnisse auf dem Server zu veröffentlichen. Sie können Coverage-Metriken in der Buildzusammenfassung einsehen und HTML-Berichte zur weiteren Analyse herunterladen.

- task: PublishCodeCoverageResults@1
  inputs: 
    codeCoverageTool: Cobertura
    summaryFileLocation: '$(System.DefaultWorkingDirectory)/**/*coverage.xml'
    reportDirectory: '$(System.DefaultWorkingDirectory)/**/coverage'

Wenn Ihre App Gulp verwendet, ist die einfachste Möglichkeit, eine Pipeline zu erstellen, die Verwendung der Buildvorlage Node.js mit gulp beim Erstellen der Pipeline. Diese Vorlage fügt automatisch verschiedene Aufgaben hinzu, um Gulp-Befehle aufzurufen und Artefakte zu veröffentlichen. Wählen Sie in der Aufgabe Code Coverage aktivieren aus, um Code Coverage mithilfe von Istanbul zu aktivieren.

Grunt ist auf von Microsoft gehosteten Agents vorinstalliert. So führen Sie den grunt-Befehl in der YAML-Datei aus:

- script: grunt                      # include any additional options that are needed

Wenn die Schritte in Ihrer Gruntfile.js Datei Authentifizierung bei einer npm-Registrierung erfordern:

- task: npmAuthenticate@0
  inputs:
    customEndpoint: <Name of npm service connection>

- script: grunt                      # include any additional options that are needed

Wenn Ihre App Grunt verwendet, ist die einfachste Möglichkeit, eine Pipeline zu erstellen, die Verwendung der Buildvorlage Node.js mit Grunt beim Erstellen der Pipeline. Diese Vorlage fügt automatisch verschiedene Aufgaben hinzu, um Gulp-Befehle aufzurufen und Artefakte zu veröffentlichen. Wählen Sie in der Aufgabe die Option In TFS/Team Services veröffentlichen aus, um Testergebnisse zu veröffentlichen, und wählen Sie Code Coverage aktivieren aus, um Code Coverage mithilfe von Istanbul zu aktivieren.

Veröffentlichen von Dateien in Azure Pipelines

Um das gesamte Arbeitsverzeichnis mit den Dateien hochzuladen, verwenden Sie die Aufgabe Buildartefakte veröffentlichen, und fügen Sie der azure-pipelines.yml-Datei Folgendes hinzu.

- task: PublishBuildArtifacts@1
  inputs:
    PathtoPublish: '$(System.DefaultWorkingDirectory)'

Um eine Teilmenge der Dateien hochzuladen, kopieren Sie zunächst die erforderlichen Dateien aus dem Arbeitsverzeichnis mit der Aufgabe Dateien kopieren in ein Stagingverzeichnis, und verwenden Sie dann die Aufgabe Buildartefakte veröffentlichen.

- task: CopyFiles@2
  inputs:
    SourceFolder: '$(System.DefaultWorkingDirectory)'
    Contents: |
      **\*.js
      package.json
    TargetFolder: '$(Build.ArtifactStagingDirectory)'

- task: PublishBuildArtifacts@1

Veröffentlichen eines Moduls in einer npm-Registrierung

Wenn es sich bei der Ausgabe Ihres Projekts um ein npm Modul zur Verwendung durch andere Projekte und nicht um eine Webanwendung handelt, verwenden Sie die npm-Aufgabe, um das Modul in einer lokalen Registrierung oder in der öffentlichen npm-Registrierung zu veröffentlichen. Geben Sie bei jeder Veröffentlichung eine eindeutige Kombination aus dem Namen und der Version an.

Beispiele

Im ersten Beispiel wird davon ausgegangen, dass Sie Versionsinformationen (z. B. über eine npm-Version) durch Änderungen an Ihrer package.json-Datei in der Versionskontrolle verwalten. Im folgenden Beispiel wird die Skriptaufgabe verwendet, um die Veröffentlichung in der öffentlichen Registrierung auszuführen.

- script: npm publish

Im nächsten Beispiel wird in einer benutzerdefinierten Registrierung veröffentlicht, die in der .npmrc-Datei Ihres Repositorys definiert ist. Richten Sie eine npm-Dienstverbindung ein, um während der Buildausführung Authentifizierungsanmeldeinformationen in die Verbindung einzufügen.

- task: Npm@1
  inputs:
     command: publish
     publishRegistry: useExternalRegistry
     publishEndpoint: https://my.npmregistry.com

Im letzten Beispiel wird das Modul in einem Azure DevOps Services-Paketverwaltungsfeed veröffentlicht.

- task: Npm@1
  inputs:
     command: publish
     publishRegistry: useFeed
     publishFeed: https://my.npmregistry.com

Weitere Informationen zur Versionsverwaltung und Veröffentlichung von npm-Paketen finden Sie unter Veröffentlichen von npm-Paketen und Wie kann ich meine npm-Pakete im Rahmen des Buildprozesses mit Versionsangaben versehen?.

Bereitstellen einer Web-App

Um ein ZIP-Dateiarchiv zu erstellen, das für die Veröffentlichung in einer Web-App bereit ist, verwenden Sie die Aufgabe Dateien archivieren:

- task: ArchiveFiles@2
  inputs:
    rootFolderOrFile: '$(System.DefaultWorkingDirectory)'
    includeRootFolder: false

Informationen zum Veröffentlichen dieses Archivs in einer Web-App finden Sie unter Azure-Web-App-Bereitstellung.

Veröffentlichen von Artefakten in Azure Pipelines

Verwenden Sie die Aufgabe Buildartefakte veröffentlichen, um Dateien aus Ihrem Build in Azure Pipelines zu veröffentlichen.

Veröffentlichen in einer npm-Registrierung

Verwenden Sie die npm-Aufgabe, um ein npm-Paket zu erstellen und zu veröffentlichen. Weitere Informationen zur Versionsverwaltung und Veröffentlichung von npm-Paketen finden Sie unter Veröffentlichen von npm-Paketen.

Bereitstellen einer Web-App

Um ein ZIP-Dateiarchiv zu erstellen, das für die Veröffentlichung in einer Web-App bereit ist, verwenden Sie die Aufgabe Dateien archivieren. Informationen zum Veröffentlichen dieses Archivs in einer Web-App finden Sie unter Azure-Web-App-Bereitstellung.

Erstellen und Pushen des Images in die Containerregistrierung

Sobald der Quellcode erfolgreich erstellt wurde und die Komponententests erfolgreich durchgeführt wurden, können Sie auch ein Image erstellen und es in eine Containerregistrierung pushen.