Erstellen, Testen und Bereitstellen von JavaScript und Node.js Apps

Azure Pipelines | Azure DevOps Server 2020 | Azure DevOps Server 2019 | TFS 2018 | TFS 2017

Verwenden Sie eine Pipeline zum Erstellen und Testen von JavaScript und Node.js Apps und anschließendes Bereitstellen oder Veröffentlichen auf Zielen. In diesem Artikel werden folgende Themen erläutert:

Hinweis

In Microsoft Team Foundation Server (TFS) 2018 und früheren Versionen werden Build- und Release-Pipelines als Definitionen bezeichnet, Ausführungen werden als Builds bezeichnet, Dienstverbindungen werden als Dienstendpunkte bezeichnet, Stages werden als Umgebungen bezeichnet und Aufträge werden als Phasen bezeichnet.

Hinweis

Diese Anleitung gilt für Team Foundation Server (TFS) Version 2017.3 und neuer.

Erstellen Ihrer ersten Pipeline

Sind Sie noch nicht Azure Pipelines? Wenn dies der Fall ist, empfehlen wir Ihnen, diesen Abschnitt zu erstellen, bevor Sie mit anderen Abschnitten fahren.

Forken Sie dieses Repository in GitHub:

https://github.com/MicrosoftDocs/pipelines-javascript

Melden Sie sich bei Azure Pipelines

Melden Sie sich bei Azure Pipelinesan. Nachdem Sie sich angemeldet haben, wechselt Ihr Browser zu https://dev.azure.com/my-organization-name und zeigt Ihr Azure DevOps Dashboard an.

Erstellen Sie in Ihrer ausgewählten Organisation ein Projekt. Wenn In Ihrer Organisation keine Projekte vorhanden sind, wird der Bildschirm Create a project to get started (Erstellen eines Projekts für die ersten Schritte) angezeigt. Wählen Sie andernfalls in der oberen rechten Ecke des Dashboards die Schaltfläche Create Project (Project erstellen) aus.

Erstellen der Pipeline

  1. Der folgende Code ist ein einfacher Node-Server, der mit dem Express.js implementiert wird. Tests für die App werden über das Mocha-Framework geschrieben. Forken Sie zum Einstieg dieses Repository in GitHub.

    https://github.com/MicrosoftDocs/pipelines-javascript
    
  2. Melden Sie sich bei Ihrer Azure DevOps-Organisation an, und navigieren Sie zu Ihrem Projekt.

  3. Navigieren Sie in Ihrem Projekt zur Seite Pipelines. Wählen Sie dann die Aktion zum Erstellen einer neuen Pipeline aus.

  4. Führen Sie die Schritte des Assistenten aus. Wählen Sie zuerst GitHub als Speicherort Ihres Quellcodes aus.

  5. Möglicherweise werden Sie zu GitHub weitergeleitet, um sich anzumelden. Geben Sie in diesem Fall Ihre Anmeldeinformationen für GitHub ein.

  6. Wenn die Liste der Repositorys angezeigt wird, wählen Sie Ihr Node.js aus.

  7. Azure Pipelines analysiert den Code in Ihrem Repository und empfiehlt Node.js eine Vorlage für Ihre Pipeline. Wählen Sie diese Vorlage aus.

  8. Azure Pipelines generiert eine YAML-Datei für Ihre Pipeline. Klicken Sie auf Speichern und ausführen, wählen Sie Direkten Commit an Mainbranch ausführen aus, und klicken Sie dann erneut auf Speichern und ausführen.

  9. Eine neue Ausführung wird gestartet. Warten Sie, bis die Ausführung beendet ist.

Wenn Sie fertig sind, verfügen Sie über eine funktionierende YAML-Datei ( ) in Ihrem Repository, die Sie azure-pipelines.yml anpassen können.

Tipp

Um Änderungen an der YAML-Datei vorzunehmen, wie in diesem Thema beschrieben, wählen Sie die Pipeline auf der Seite Pipelines aus, und bearbeiten Sie dann die azure-pipelines.yml Datei.

YAML

  1. Der folgende Code ist ein einfacher Node-Server, der mit dem Express.js implementiert wird. Tests für die App werden über das Mocha-Framework geschrieben. Forken Sie zum Einstieg dieses Repository in GitHub.

    https://github.com/MicrosoftDocs/pipelines-javascript
    
    
  2. Add an azure-pipelines.yml file in your repository. This YAML assumes that you have Node.js with npm installed on your server.

trigger:
- main

pool: Default

- script: |
    npm install
    npm run build
  displayName: 'npm install and build'
  1. Erstellen Sie eine Pipeline (wenn Sie nicht wissen, wie Sie ihre erste Pipeline erstellen),und wählen Sie für die Vorlage YAML aus.

  2. Legen Sie den Agentpool und den YAML-Dateipfad für Ihre Pipeline fest.

  3. Speichern Sie die Pipeline, und stellen Sie einen Build in die Warteschlange. Wenn die Meldung Build #nnnnnnnn.n has queued (Build #nnnnnnnn.n wurde in die Warteschlange gestellt) angezeigt wird, wählen Sie den Nummernlink aus, um Ihre Pipeline in Aktion zu sehen.

  4. Wenn Sie bereit sind, Änderungen an Ihrer Pipeline vorzunehmen, bearbeiten Sie sie.

  5. In den folgenden Abschnitten finden Sie einige der gängigeren Möglichkeiten zum Anpassen Ihrer Pipeline.

Klassisch

  1. Der folgende Code ist ein einfacher Node-Server, der mit dem Express.js implementiert wird. Tests für die App werden über das Mocha-Framework geschrieben. Forken Sie zum Einstieg dieses Repository in GitHub.

    https://github.com/MicrosoftDocs/pipelines-javascript
    
  2. Nachdem Sie den Beispielcode in Ihrem eigenen Repository erstellt haben, erstellen Sie eine Pipeline anhand der Anweisungen unter Erstellen Ihrer ersten Pipeline, und wählen Sie die Vorlage Leerer Prozess aus.

  3. Wählen Sie im Pipeline-Editor auf der Registerkarte Aufgaben die Option Verarbeiten aus, und ändern Sie die Eigenschaften wie folgt:

    • Agent-Warteschlange:Hosted Ubuntu 1604
  4. Fügen Sie der Pipeline die folgenden Aufgaben in der angegebenen Reihenfolge hinzu:

    • npm

      • Befehl:install
    • npm

      • Anzeigename: npm test
      • Befehl:custom
      • Befehl und Argumente:test
    • Testergebnisse veröffentlichen

      • Belasse alle Standardwerte für Eigenschaften.
    • Archivdateien

      • Stammordner oder zu archivierende Datei:$(System.DefaultWorkingDirectory)
      • Dem Archivpfad den Namen des Stammordners vorausbewegen: Deaktiviert
    • Buildartefakte veröffentlichen

      • Belasse alle Standardwerte für Eigenschaften.
  5. Speichern Sie die Pipeline, und stellen Sie einen Build in die Warteschlange ein, um ihn in Aktion zu sehen.

Lernen Sie einige der gängigen Methoden zum Anpassen Ihres JavaScript-Buildprozesses.

Buildumgebung

Sie können Azure Pipelines verwenden, um Ihre JavaScript-Apps zu erstellen, ohne eine eigene Infrastruktur einrichten zu müssen. Sie können entweder Windows linux-Agents verwenden, um Ihre Builds ausführen zu können.

Aktualisieren Sie den folgenden Codeausschnitt in Ihrer azure-pipelines.yml Datei, um das entsprechende Image auszuwählen.

pool:
  vmImage: 'ubuntu-latest' # examples of other options: 'macOS-10.15', 'windows-latest'

Tools, die Sie häufig zum Erstellen, Testen und Ausführen von JavaScript-Apps verwenden , z. B. npm, Node, Yarn und Gulp, sind auf von Microsoft gehosteten Agents in Azure Pipelines. Die genaue Version von Node.js npm, die vorinstalliert ist, finden Sie unter Von Microsoft gehostete Agents. Um eine bestimmte Version dieser Tools auf von Microsoft gehosteten Agents zu installieren, fügen Sie den Task Node Tool Installer am Anfang des Prozesses hinzu.

Sie können auch einen selbstge gehosteten Agent verwenden.

Verwenden einer bestimmten Version Node.js

Wenn Sie eine Version von Node.js und npm benötigen, die noch nicht auf dem von Microsoft gehosteten Agent installiert ist, verwenden Sie den Node-Toolinstallations-Task. Fügen Sie der Datei den folgenden azure-pipelines.yml Codeausschnitt hinzu.

Hinweis

Die gehosteten Agents werden regelmäßig aktualisiert, und das Einrichten dieser Aufgabe führt dazu, dass jedes Mal, wenn die Pipeline ausgeführt wird, viel Zeit für die Aktualisierung auf eine neuere Nebenversion aufbringt. Verwenden Sie diese Aufgabe nur, wenn Sie eine bestimmte Node-Version in Ihrer Pipeline benötigen.

- task: NodeTool@0 
  inputs:
    versionSpec: '12.x' # replace this value with the version that you need for your project

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

  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 den Task Node Tool Installer, und fügen Sie den Task hinzu.

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

Um nur das npm-Tool zu aktualisieren, führen Sie den npm i -g npm@version-number Befehl in Ihrem Buildprozess aus.

Verwenden mehrerer Knotenversionen

Sie können Ihre App in mehreren Versionen von Node erstellen und testen, indem Sie eine Strategie und den Task "Installationsprogramm für das Node-Tool" verwenden.

pool:
  vmImage: 'ubuntu-latest'
strategy:
  matrix:
    node_12_x:
      node_version: 12.x
    node_13_x:
      node_version: 13.x

steps:
- task: NodeTool@0 
  inputs:
    versionSpec: $(node_version)

- script: npm install

Installieren von Tools auf Dem Build-Agent

Wenn Sie tools definiert haben, die für Ihren Build als Entwicklungsabhängigkeiten in der - oder -Datei Ihres Projekts erforderlich sind, installieren Sie diese Tools zusammen mit den restlichen Projektabhängigkeiten package.json package-lock.json über npm. Dadurch wird die genaue Version der im Projekt definierten Tools installiert, isoliert von anderen Versionen, die im Build-Agent vorhanden sind.

Sie können ein Skript oder den npm-Task verwenden.

Verwenden eines Skripts für die Installation mit package.json

- script: npm install --only=dev

Verwenden der npm-Aufgabe für die Installation mit package.json

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

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

- script: npx mocha

Rufen Sie aus einer Skriptphase in Ihrer Pipeline auf, um Tools zu installieren, die ihr Projekt benötigt, aber nicht als Entwicklungsabhängigkeiten in festgelegt package.json npm install -g sind.

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

Hinweis

Auf von Microsoft gehosteten Linux-Agents wird dem Befehl sudo vorangestellt, sudo npm install -g z. B. .

- script: npm install -g @angular/cli

Diese Aufgaben werden jedes Mal ausgeführt, wenn Ihre Pipeline ausgeführt wird. Beachten Sie daher die Auswirkungen, die die Installation von Tools auf die Buildzeiten hat. Erwägen Sie, selbstgehostete Agents mit der Version der Tools zu konfigurieren, die Sie benötigen, wenn der Mehraufwand eine schwerwiegende Auswirkung auf die Buildleistung hat.

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

Verwaltung von Abhängigkeiten

Verwenden Sie in Ihrem Build Yarn oder Azure Artifacts/TFS, um Pakete aus der öffentlichen npm-Registrierung herunterzuladen. Dabei handelt es sich um einen Privaten npm-Registrierung, den Sie in der NPMRC-Datei angeben.

npm

Sie können NPM auf verschiedene Arten verwenden, um Pakete für Ihren Build herunterzuladen:

  • Führen Sie direkt npm install in Ihrer Pipeline aus. Dies ist die einfachste Möglichkeit, Pakete aus einer Registrierung herunterzuladen, die keine Authentifizierung benötigt. Wenn ihr Build keine Entwicklungsabhängigkeiten vom Agent benötigt, um ausgeführt zu werden, können Sie die Buildzeiten mit der --only=prod Option auf npm install beschleunigen.
  • Verwenden Sie eine npm-Aufgabe. Dies ist nützlich, wenn Sie eine authentifizierte Registrierung verwenden.
  • Verwenden Sie eine npm-Authentifizierungsaufgabe. Dies ist nützlich, wenn Sie npm install in Ihren Taskrunnern – Gulp, Grunt oder Maven – ausführen.

Wenn Sie eine npm-Registrierung angeben möchten, speichern Sie die URLs in einer .npmrc Datei in Ihrem Repository. Wenn Ihr Feed authentifiziert ist, verwalten Sie seine Anmeldeinformationen, indem Sie auf der Registerkarte Dienste unter Project Einstellungen eine npm-Dienstverbindung erstellen.

Um npm-Pakete mithilfe eines Skripts in Ihrer Pipeline zu installieren, fügen Sie den folgenden Codeausschnitt zu azure-pipelines.yml hinzu.

- script: npm install

Um eine in Ihrer Datei angegebene private Registrierung .npmrc zu verwenden, fügen Sie den folgenden Codeausschnitt zu azure-pipelines.yml hinzu.

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

Um Registrierungsanmeldeinformationen über Taskrunner wie Gulp an npm-Befehle zu übergeben, fügen Sie die folgende Aufgabe hinzu, azure-pipelines.yml bevor Sie den Task Runner aufrufen.

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

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

Wenn ihre Builds beim Wiederherstellen von Paketen aus dem npm-Registrierung gelegentlich aufgrund von Verbindungsproblemen fehlschlagen, können Sie Azure Artifacts in Verbindung mit Upstreamquellenverwenden 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 Project Collection Build Service-Konto abgeleitet.

Wenn Sie von Microsoft gehostete Agentsverwenden, erhalten Sie bei jeder Ausführung eines Builds einen neuen Computer. Dies bedeutet, dass die Abhängigkeiten jedes Mal wiederhergestellt werden.

Dies kann viel Zeit in Anspruch nehmen. Um dies zu minimieren, können Sie Azure Artifacts oder einen selbstgehosteten Agent verwenden. Sie profitieren dann von der Verwendung des Paketcaches.

Yarn

Verwenden Sie eine Skriptphase, um Yarn aufzurufen, um Abhängigkeiten wiederherzustellen. Yarn ist auf einigen von Microsoft gehosteten Agentsvorinstalliert verfügbar. Sie können sie wie jedes andere Tool auf selbstgehosteten Agents installieren und konfigurieren.

- script: yarn install

Verwenden Sie die CLI oder die Bash-Aufgabe in Ihrer Pipeline, um Yarnaufzurufen.

Ausführen von JavaScript-Compilern

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

Wenn Sie ein Skriptobjekt in der Datei Ihres Projekts eingerichtet package.json haben, das den Compiler ausführt, rufen Sie es in Ihrer Pipeline mithilfe eines Skripttasks auf.

- script: npm run compile

Sie können Compiler direkt aus der Pipeline aufrufen, indem Sie den Skripttask verwenden. Diese Befehle werden im Stammverzeichnis des geklonten Quellcode-Repositorys ausgeführt.

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

Verwenden Sie den npm-Task in Ihrer Pipeline, wenn Sie ein Kompilierungsskript in package.json Ihres Projekts definiert haben, um den Code zu erstellen. Verwenden Sie die Bash-Aufgabe, um Ihren Code zu kompilieren, wenn in Ihrer Projektkonfiguration kein separates Skript definiert ist.

Komponententests ausführen

Konfigurieren Sie Ihre Pipelines so, dass Ihre JavaScript-Tests ausgeführt werden, sodass sie Ergebnisse im JUnit-XML-Format erzeugen. Anschließend können Sie die Ergebnisse mithilfe der integrierten Aufgabe "Testergebnisse veröffentlichen" veröffentlichen.

Wenn Ihr Testframework die JUnit-Ausgabe nicht unterstützt, müssen Sie Unterstützung über ein Partnerberichtsmodul wie mocha-junit-reporterhinzufügen. Sie können entweder das Testskript aktualisieren, um den JUnit-Reporter zu verwenden, oder wenn der Reporter Befehlszeilenoptionen unterstützt, übergeben Sie diese an die Taskdefinition.

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

Test Runner Reporter zum Erstellen von XML-Berichten
Mokka mocha-junit-reporter
Cypress-Multi-Reporter
Jasmin meldungs-reporters
Jest jest-junit
jest-junit-reporter
Karma beim Junit-Reporter
Ava tap-xunit

In diesem Beispiel wird mocha-junit-reporter verwendet und mocha test direkt mithilfe eines Skripts aufgerufen. Dadurch wird die JUnit-XML-Ausgabe am Standardspeicherort von ./test-results.xml erzeugt.

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

Wenn Sie ein test Skript in der Datei package.json Ihres Projekts definiert haben, können Sie es mit npm test aufrufen.

- script: npm test


Veröffentlichen von Testergebnissen

Verwenden Sie zum Veröffentlichen der Ergebnisse den Task 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 Beispielsweise Einmalausführen, fügen Sie den Task Code Coverage-Ergebnisse veröffentlichen hinzu, um Code Coverage-Ergebnisse zusammen mit Ihren Testergebnissen zu veröffentlichen. Wenn Sie dies tun, finden Sie Abdeckungsmetriken in der Buildzusammenfassung und laden HTML-Berichte zur weiteren Analyse herunter. Die Aufgabe erwartet die Cobertura- oder JaCoCo-Berichtsausgabe. 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.)

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

Verwenden Sie die Aufgaben Publish Testergebnisse and Publish Code Coverage Results (Veröffentlichen von Testergebnisse und Veröffentlichen von Code Coverage-Ergebnissen) in Ihrer Pipeline, um Testergebnisse zusammen mit Code Coverage-Ergebnissen mithilfe von Postleitzahlen zu veröffentlichen.

Legen Sie die Steuerungsoptionen für den Task Testergebnisse veröffentlichen so fest, dass der Task auch dann ausgeführt wird, wenn ein vorheriger Task fehlgeschlagen ist, es sei denn, die Bereitstellung wurde abgebrochen.

End-to-End-Browsertests

Führen Sie Tests in headlosen Browsern als Teil Ihrer Pipeline mit Tools wie Protractor oder Chromeaus. Veröffentlichen Sie dann die Ergebnisse für den Build in VSTS mit den folgenden Schritten:

  1. Installieren Sie auf dem Build-Agent einen treiberlosen Browsertest, z. B. Chrome oder Firefox ohne Kopf, oder ein Browsermodellierungstool wie PhantomJS.
  2. Konfigurieren Sie Ihr Testframework gemäß der Dokumentation des Tools für die Verwendung der Option headless browser/driver Ihrer Wahl.
  3. Konfigurieren Sie Ihr Testframework (in der Regel mit einem Reporter-Plug-In oder einer Konfiguration), um JUnit-formatierte Testergebnisse auszugeben.
  4. Richten Sie einen Skripttask ein, um alle CLI-Befehle auszuführen, die zum Starten der headless-Browserinstanzen erforderlich sind.
  5. Führen Sie die End-to-End-Tests in den Pipelinephasen zusammen mit Ihren Komponententests aus.
  6. Veröffentlichen Sie die Ergebnisse mithilfe der gleichen Aufgabe Publish Testergebnisse (Veröffentlichen Testergebnisse) zusammen mit Ihren Komponententests.

Packen von Web-Apps

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

Das erste Beispiel ruft webpack auf. Um diese Arbeit zu ermöglichen, stellen Sie sicher, dass webpack als Entwicklungsabhängigkeit in Ihrer package.json-Projektdatei konfiguriert ist. Dies wird mit der Standardkonfiguration ausgeführt, webpack es sei denn, Sie verfügen über eine webpack.config.js Datei im Stammordner Ihres Projekts.

- script: webpack

Im nächsten Beispiel wird der npm-Task verwendet, npm run build um aufzurufen, um das build in der Projektdatei package.json definierte Skriptobjekt aufzurufen. 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 die Bash-Aufgabe in Ihrer Pipeline, um Ihr Pakettool aufzurufen, z. webpack B. oder Angular ng build .

JavaScript-Frameworks

Angular

Für Angular-Apps können Sie Angular-spezifischen Befehle wie ng test, ng build und ng e2e einschließen. Um Angular CLI-Befehle in Ihrer Pipeline zu verwenden, müssen Sie das npm-Paket angular/cli auf dem Build-Agent installieren.

Hinweis

Auf von Microsoft gehosteten Linux-Agents wird dem Befehl sudo vorangestellt, sudo npm install -g z. B. .

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

Fügen Sie Ihrer Pipeline die folgenden Aufgaben hinzu:

  • npm

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

    • Befehl:install
  • Bash

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

Für Tests in Ihrer Pipeline, für die ein Browser ausgeführt werden muss (z. B. der ng-Testbefehl in der Starter-App, in der Auch-Test ausgeführt wird), müssen Sie einen browserlosen Browser anstelle eines Standardbrowsers verwenden. In der Angular Starter-App:

  1. Ändern Sie browsers den Eintrag inkarma.conf.jsProjektdatei von browsers: ['Chrome'] in browsers: ['ChromeHeadless'] .

  2. Ändern Sie singleRun den Eintrag inkarma.conf.jsProjektdatei von einem Wert von false in true . Auf diese Weise wird sichergestellt, dass der Prozess "Stopp" nach derEntläufen beendet wird.

React und Vue

Alle Abhängigkeiten für Ihre React- und Vue-Apps werden in der Datei package.json erfasst. Die Datei azure-pipelines.yml enthält das Standardskript Node.js Skript:

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

Die Builddateien befinden sich in einem neuen Ordner dist (für Vue) oder build (für React). Dieser Codeausschnitt erstellt ein Artefakt, www , das für die Veröffentlichung bereit ist. Dabei werden die Aufgaben Node Installer, Copy Files und Publish Build Artifacts verwendet.

trigger:
- main

pool:
  vmImage: 'ubuntu-latest'

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '10.x'
  displayName: 'Install Node.js'

- script: |
    npm install
    npm run build
  displayName: 'npm install and 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

Verweisen Sie zum Veröffentlichen ihrer Releaseaufgabe auf das -Artefakt oder das dist build -Artefakt, und verwenden Sie die Azure-Web-App-Bereitstellungsaufgabe.

Webpack

Sie können eine Webpack-Konfigurationsdatei verwenden, um einen Compiler (z. B. Babel oder TypeScript) anzugeben, um JSX oder TypeScript in einfaches JavaScript zu transpilieren und Ihre App zu bündeln.

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

Fügen Sie Ihrer Pipeline die folgenden Aufgaben hinzu:

  • npm

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

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

Erstellen von Aufgaben runners

Es ist üblich, Gulp oder Grunt als Aufgaben runner zu verwenden, um eine JavaScript-App zu erstellen und zu testen.

Gulp

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

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

Wenn die Schritte in Ihrer gulpfile.js-Datei eine Authentifizierung mit einem npm-Registrierung:

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

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

Fügen Sie den Task 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 den Task Code Coverage-Ergebnisse veröffentlichen hinzu, um Code Coverage-Ergebnisse auf dem Server zu veröffentlichen. Abdeckungsmetriken finden Sie in der Buildzusammenfassung, und Sie können HTML-Berichte zur weiteren Analyse herunterladen.

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

Die einfachste Möglichkeit zum Erstellen einer Pipeline, wenn Ihre App Gulp verwendet, ist die Verwendung derNode.js mit gulp-Buildvorlage beim Erstellen der Pipeline. Dadurch werden automatisch verschiedene Aufgaben zum Aufrufen von Gulp-Befehlen und zum Veröffentlichen von Artefakten hinzugefügt. Wählen Sie in der Aufgabe Code Coverage aktivieren aus, um die Code Coverage mithilfe von "Soll" zu aktivieren.

Grunt

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

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

Wenn die Schritte in Ihrer Gruntfile.js Datei eine Authentifizierung mit einem npm-Registrierung:

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

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

Die einfachste Möglichkeit zum Erstellen einer Pipeline, wenn Ihre App Grunt verwendet, ist die Verwendung derNode.js mit Grunt-Buildvorlage beim Erstellen der Pipeline. Dadurch werden automatisch verschiedene Aufgaben zum Aufrufen von Gulp-Befehlen und zum Veröffentlichen von Artefakten hinzugefügt. Wählen Sie in der Aufgabe die Option Publish to TFS/Team Services (In TFS/Team Services veröffentlichen) aus, um Testergebnisse zu veröffentlichen, und wählen Sie Code Coverage aktivieren aus, um die Code Coverage mithilfe von Durchwahl zu aktivieren.

Packen und Liefern Ihres Codes

Nachdem Sie Ihre App erstellt und getestet haben, können Sie die Buildausgabe in Azure Pipelines hochladen, ein npm- oder Maven-Paket erstellen und veröffentlichen oder die Buildausgabe in eine .zip-Datei packen, die in einer Webanwendung bereitgestellt werden soll.

Veröffentlichen von Dateien in Azure Pipelines

Um einfach das gesamte Arbeitsverzeichnis von Dateien hochzuladen, verwenden Sie die Aufgabe Build Artifacts veröffentlichen, und fügen Sie Ihrer Datei Folgendes azure-pipelines.yml 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 dem Task Dateien kopieren in ein Stagingverzeichnis,und verwenden Sie dann den Task Build Artifacts veröffentlichen.

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

- task: PublishBuildArtifacts@1

Veröffentlichen eines Moduls in npm-Registrierung

Wenn die Ausgabe Ihres Projekts ein Modul ist, das von anderen Projekten und nicht von einer Webanwendung verwendet werden kann, verwenden Sie den npm npm-Task, um das Modul in einer lokalen Registrierung oder in der öffentlichen Registrierung npm-Registrierung. Sie müssen bei jeder Veröffentlichung eine eindeutige Kombination aus Name und Version angeben. Beachten Sie dies beim Konfigurieren von Veröffentlichungsschritten als Teil einer Release- oder Entwicklungspipeline.

Im ersten Beispiel wird davon ausgegangen, dass Sie Versionsinformationen (z. B. über eine npm-Version) durch Änderungen an Ihrer Datei package.json in der Versionskontrolle verwalten. In diesem Beispiel wird der Skript-Task zum Veröffentlichen in der öffentlichen Registrierung verwendet.

- script: npm publish

Im nächsten Beispiel wird in einer benutzerdefinierten Registrierung veröffentlicht, die in der Datei Ihres Repositorys .npmrc definiert ist. Sie müssen eine npm-Dienstverbindung einrichten, um Authentifizierungsanmeldeinformationen in die Verbindung einzugeben, während der Build ausgeführt wird.

- 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 Versions- 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 versionieren?.

Bereitstellen einer Web-App

Verwenden Sie den Task .zip, um ein Dateiarchiv zu erstellen, das für die Veröffentlichung in einer Web-App bereit ist:

- 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 den Task Build Artifacts veröffentlichen, um Dateien aus Ihrem Build in Azure Pipelines ODER TFS zu veröffentlichen.

Veröffentlichen in npm-Registrierung

Verwenden Sie zum Erstellen und Veröffentlichen eines npm-Pakets den npm-Task. Weitere Informationen zur Versions- und Veröffentlichung von npm-Paketen finden Sie unter Veröffentlichen von npm-Paketen.

Bereitstellen einer Web-App

Verwenden Sie zum Erstellen .zip Dateiarchivs, das für die Veröffentlichung in einer Web-App bereit ist, den Task Dateien archivieren. Informationen zum Veröffentlichen dieses Archivs in einer Web-App finden Sie unter Azure-Web-App-Bereitstellung.

Erstellen und Pushen eines Images in die Containerregistrierung

Sobald Ihr Quellcode erfolgreich erstellt wurde und Ihre Komponententests vorhanden und erfolgreich sind, können Sie auch ein Image erstellen und es in eine Containerregistrierung pushen.

Problembehandlung

Wenn Sie Ihr Projekt auf Ihrem Entwicklungscomputer erstellen können, aber Probleme beim Erstellen auf Azure Pipelines oder TFS haben, untersuchen Sie die folgenden potenziellen Ursachen und Korrekturmaßnahmen:

  • Überprüfen Sie, ob die Versionen vonNode.js task runner auf Ihrem Entwicklungscomputer mit denen auf dem Agent übereinstimmen. Sie können Befehlszeilenskripts wie in Ihre Pipeline hinzufügen, um zu node --version überprüfen, was auf dem Agent installiert ist. Verwenden Sie entweder den Node Tool Installer (wie in diesem Leitfaden beschrieben), um die gleiche Version auf dem Agent bereitzustellen, oder führen Sie Befehle aus, um die Tools auf die gewünschten Versionen zu npm install aktualisieren.

  • Wenn Ihre Builds zeitweilig fehlschlagen, während Sie Pakete wiederherstellen, liegt entweder bei der npm-Registrierung ein Problem vor, oder es liegen Netzwerkprobleme zwischen dem Azure-Rechenzentrum und der Registrierung vor. Diese Faktoren liegen nicht unter unserer Kontrolle, und Sie müssen möglicherweise untersuchen, ob die Verwendung von Azure Artifacts mit einem npm-Registrierung als Upstreamquelle die Zuverlässigkeit Ihrer Builds verbessert.

  • Wenn Sie zum Verwalten verschiedener Versionen von Node.js verwenden, sollten Sie stattdessen zum Task Node nvm Tool Installer wechseln. ( nvm wird aus historischen Gründen auf dem macOS-Image installiert.) verwaltet mehrere Node.js-Versionen durch Hinzufügen von Shellaliasen und Ändern von , was schlecht mit der Art und Weise interagiert, Azure Pipelines jede Aufgabe in einem neuen nvm PATH Prozess ausgeführt wird.

    Dieses Modell wird vom Knotentool-Installer-Task ordnungsgemäß behandelt. Wenn Ihre Arbeit jedoch die Verwendung von erfordert, können Sie am Anfang jeder Pipeline nvm das folgende Skript hinzufügen:

    steps:
    - bash: |
        NODE_VERSION=12  # or whatever your preferred version is
        npm config delete prefix  # avoid a warning
        . ${NVM_DIR}/nvm.sh
        nvm use ${NODE_VERSION}
        nvm alias default ${NODE_VERSION}
        VERSION_PATH="$(nvm_version_path ${NODE_VERSION})"
        echo "##vso[task.prependPath]$VERSION_PATH"
    

    Anschließend funktionieren node und andere Befehlszeilentools für den Rest des Pipelineauftrags. In jedem Schritt, in dem Sie den Befehl verwenden müssen, müssen Sie das nvm Skript mit folgendem Befehl starten:

    - bash: |
        . ${NVM_DIR}/nvm.sh
        nvm <command>
    

Häufig gestellte Fragen

Wo kann ich mehr über Azure Artifacts und den Paketverwaltung erfahren?

Paketverwaltung in Azure Artifacts und TFS

Wo finde ich weitere Informationen zu Aufgaben?

Build-, Release- und Testaufgaben

Gewusst wie sie einen Pipelinefehler mit der Meldung "SCHWERWIEGENDER FEHLER: Fehler CALL_AND_RETRY_LAST Zuordnung – JavaScript-Heap nicht genügend Arbeitsspeicher" behoben.

Dies geschieht, wenn Node.js Paket das Speicherauslastungslimit überschritten hat. Um das Problem zu beheben, fügen Sie eine Variable wie hinzu, und weisen Sie ihr den Wert NODE_OPTIONS --max_old_space_size=16384 zu.

Wie kann ich meine npm-Pakete im Rahmen des Buildprozesses versionieren?

Eine Möglichkeit besteht in der Verwendung einer Kombination aus Versionskontrolle und npm-Version. Am Ende einer Pipeline-Ausführung können Sie Ihr Repository mit der neuen Version aktualisieren. In dieser YAML-Datei gibt es ein GitHub Repository, und das Paket wird in npmjs bereitgestellt. Beachten Sie, dass ihr Build fehlschlägt, wenn es einen Konflikt zwischen Ihrer Paketversion auf npmjs und Ihrer Datei package.json gibt.

variables:
    MAP_NPMTOKEN: $(NPMTOKEN) # Mapping secret var

trigger:
- none

pool:
  vmImage: 'ubuntu-latest'

steps: # Checking out connected repo
- checkout: self
  persistCredentials: true
  clean: true
    
- task: npmAuthenticate@0
  inputs:
    workingFile: .npmrc
    customEndpoint: 'my-npm-connection'
    
- task: NodeTool@0
  inputs:
    versionSpec: '12.x'
  displayName: 'Install Node.js'

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

- script: |
    npm pack
  displayName: 'Package for release'

- bash: | # Grab the package version
    v=`node -p "const p = require('./package.json'); p.version;"`
    echo "##vso[task.setvariable variable=packageVersion]$v"

- task: CopyFiles@2
  inputs:
      contents: '*.tgz'
      targetFolder: $(Build.ArtifactStagingDirectory)/npm
  displayName: 'Copy archives to artifacts staging directory'

- task: CopyFiles@2
  inputs:
    sourceFolder: '$(Build.SourcesDirectory)'
    contents: 'package.json' 
    targetFolder: $(Build.ArtifactStagingDirectory)/npm
  displayName: 'Copy package.json'

- task: PublishBuildArtifacts@1 
  inputs:
    PathtoPublish: '$(Build.ArtifactStagingDirectory)/npm'
    artifactName: npm
  displayName: 'Publish npm artifact'

- script: |  # Config can be set in .npmrc
    npm config set //registry.npmjs.org/:_authToken=$(MAP_NPMTOKEN) 
    npm config set scope "@myscope"
    # npm config list
    # npm --version
    npm version patch --force
    npm publish --access public

- task: CmdLine@2 # Push changes to GitHub (substitute your repo)
  inputs:
    script: |
      git config --global user.email "username@contoso.com"
      git config --global user.name "Azure Pipeline"
      git add package.json
      git commit -a -m "Test Commit from Azure DevOps"
      git push -u origin HEAD:main