Pipelines für JavaScript-Apps

In diesem Artikel wird erläutert, wie Azure Pipelines mit JavaScript-Apps funktioniert. Von Microsoft gehostete Agents sind vorinstalliert mit allgemeinen Tools für JavaScript-Build, Tests und Bereitstellung wie npm, Node.js, Yarn und Gulp, ohne dass Sie eine Infrastruktur einrichten müssen. Sie können selbst gehostete Agents auch konfigurieren.

Informationen zum schnellen Erstellen einer Pipeline für JavaScript finden Sie in der JavaScript-Schnellstartanleitung.

Installationsprogramme für Node-Tools

So installieren Sie Node.js- und npm-Versionen, die nicht vorinstalliert sind, oder um die Tools auf selbst gehosteten Agents zu installieren:

Führen Sie für npm den npm i -g npm@version-number Befehl in Ihrer Pipeline aus.
Fügen Sie der Pipeline für Node.js die Task "Use Node.js ecosystem v1 (UseNode@1)" hinzu.

YAML
Klassisch

Um eine bestimmte Node.js-Version zu installieren, fügen Sie Ihrer azure-pipelines.yml Datei den folgenden Code hinzu:

- task: UseNode@1
  inputs:
    version: '16.x' # replace with the version you need

Hinweis

Diese Aufgabe kann bei jeder Ausführung der Pipeline erheblich Zeit in Anspruch nehmen, um auf eine neuere Unterversion zu aktualisieren. Von Microsoft gehostete Agents werden regelmäßig aktualisiert. Verwenden Sie diese Aufgabe also nur, um bestimmte Node-Versionen zu installieren, die nicht vorinstalliert sind. Informationen dazu, welche Node.js und npm-Versionen auf von Microsoft gehosteten Agents vorinstalliert sind, finden Sie unter Software.

Sie können die Aufgabe "Node.js Ökosystem v1 verwenden " mit einer matrix Strategie verwenden, um Ihre App auf mehreren Versionen von Node.jszu erstellen und zu testen. Weitere Informationen finden Sie unter Konfiguration mit mehreren Stellen.

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

Installation des Abhängigkeitstools

Wenn Sie über Entwicklungsabhängigkeitstools in Ihrem Projekt package.json oder package-lock.json Datei verfügen, installieren Sie die Tools und Abhängigkeiten über npm. Die Projektdatei definiert die genaue Version der Tools, unabhängig von anderen Versionen, die im Build-Agent vorhanden sind.

Um diese Tools auf Ihrem Build-Agent zu installieren, verwenden Sie ein Skript, die npm-Aufgabe oder eine Befehlszeilenaufgabe in Ihrer Pipeline.

So verwenden Sie ein Skript:

- script: npm install --only=dev

So verwenden Sie die npm-Aufgabe:

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

Tools, die Sie auf diese Weise installieren, verwenden den npm-Paketläufer npx , der die Tools in seiner PATH-Auflösung erkennt. Im folgenden Beispiel wird der mocha-Testrunner aufgerufen, und die Entwicklungsabhängigkeitsversion wird anstelle der global installierten npm install -g-Version verwendet.

- script: npx mocha

Um Tools zu installieren, die für Ihr Projekt erforderlich sind, die nicht als Entwicklungsabhängigkeiten in package.jsonfestgelegt sind, rufen Sie npm install -g von einem Skript in Ihrer Pipeline auf. Im folgenden Beispiel wird die neueste Version der Angular CLI mithilfe von npm installiert. Andere Skripts in der Pipeline können dann die Angular-Befehle ng verwenden.

- script: npm install -g @angular/cli

Hinweis

Bei von Microsoft gehosteten Linux-Agents müssen Sie dem Befehl sudo voranstellen, z. B. sudo npm install -g.

Diese Toolinstallationsaufgaben werden jedes Mal ausgeführt, wenn die Pipeline ausgeführt wird. Achten Sie daher darauf, dass sie sich auf die Buildzeiten auswirken. Wenn sich der Aufwand ernsthaft auf die Buildleistung auswirkt, sollten Sie selbst gehostete Agents verwenden, die mit den benötigten Toolversionen vorkonfiguriert sind.

Hinweis

Diese Toolinstallationsaufgaben werden jedes Mal ausgeführt, wenn die Pipeline ausgeführt wird. Achten Sie daher darauf, dass sie sich auf die Buildzeiten auswirken.

Downloads von Abhängigkeitspaketen

Sie können Yarn oder Azure Artifacts verwenden, um Pakete aus der öffentlichen npm-Registrierung oder einer privaten npm-Registrierung herunterzuladen, die Sie in einer *.npmrc-Datei angeben. Um eine npm-Registrierung anzugeben, fügen Sie die URL der Datei "*.npmrc " in Ihrem Code-Repository hinzu.

Verwenden von npm

Sie können npm verwenden, um Buildpakete in Ihrer Pipeline wie folgt herunterzuladen:

Für die einfachste Möglichkeit, Pakete ohne Authentifizierung herunterzuladen, führen Sie direkt aus npm install.
Um eine authentifizierte Registrierung zu verwenden, fügen Sie die npm-Aufgabe hinzu.
Um npm install aus den innerhalb der Aufgabenläufer Gulp, Grunt oder Maven ausgeführten Aufgaben zu betreiben, verwenden Sie die Aufgabe npm authenticate.

Hinweis

Wenn Ihr npm-Feed die Authentifizierung verwendet, müssen Sie eine npm-Dienstverbindung auf der Registerkarte "Dienste" in den Azure DevOps-Projekteinstellungen erstellen, um seine Anmeldeinformationen zu verwalten.

Um npm-Pakete direkt zu installieren, verwenden Sie das folgende Skript in azure-pipelines.yml. Wenn Ihr Build-Agent keine Entwicklungsabhängigkeiten benötigt, können Sie die Erstellungszeiten beschleunigen, indem Sie die Option --only=prod zu npm install hinzufügen.

- script: npm install --only=prod

Um eine in Ihrer *.npmrc-Datei angegebene private Registrierung zu verwenden, fügen Sie die Npm@1 Aufgabe zu azure-pipelines.yml hinzu.

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

Um Registrierungsanmeldeinformationen über Aufgabenläufer wie Gulp an npm-Befehle zu übergeben, fügen Sie die npmAuthenticate@0 Aufgabe zu azure-pipelines.yml hinzu, bevor Sie den Taskrunner aufrufen.

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

Hinweis

Von Microsoft gehostete Agents verwenden einen neuen Computer mit jedem Build. Das Wiederherstellen von Abhängigkeiten kann eine erhebliche Zeit in Anspruch nehmen. Um das Problem zu beheben, können Sie Azure Artifacts oder einen selbst gehosteten Agent mit dem Paketcache verwenden.

Wenn Ihre Builds gelegentlich aufgrund von Verbindungsproblemen fehlschlagen, wenn Sie Pakete aus der npm-Registrierung wiederherstellen, können Sie Azure Artifacts mit upstream-Quellen verwenden, um die Pakete zwischenzuspeichern. Azure Artifacts verwendet automatisch die Anmeldeinformationen der Pipeline, die normalerweise vom Project Collection Build Service-Konto abgeleitet werden.

Hinweis

Das Wiederherstellen von Abhängigkeiten kann eine erhebliche Zeit in Anspruch nehmen. Um das Problem zu beheben, können Sie Azure Artifacts oder einen selbst gehosteten Agent mit dem Paketcache verwenden.

Verwenden von Yarn

Verwenden Sie ein Skript, um Yarn zum Wiederherstellen von Abhängigkeiten zu installieren. Yarn ist auf einigen von Microsoft gehosteten Agents vorinstalliert. Sie können Yarn auf selbst gehosteten Agents wie jedem anderen Tool installieren und konfigurieren.

- script: yarn install

Sie können auch die CLI - oder Bash-Aufgabe in Ihrer Pipeline verwenden, um Yarn aufzurufen.

JavaScript-Compiler

JavaScript-Apps verwenden Compiler wie Babel und den TypeScript-Compilertsc , um Quellcode in Versionen zu konvertieren, die von der Node.js Laufzeit oder in Webbrowsern verwendet werden können. Wenn Sie ein Skriptobjekt in Ihrem Projekt package.json Datei zum Ausführen des Compilers eingerichtet haben, können Sie es in Ihrer Pipeline aufrufen.

- script: npm run compile

Sie können Compiler auch direkt über die Pipeline aufrufen, indem Sie ein Skript verwenden. Diese Befehle werden aus dem Stamm des geklonten Quellcode-Repositorys ausgeführt.

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

Sie können die npm-Aufgabe verwenden, um den Code zu erstellen, wenn Ihr Projekt package.json ein Kompilierungsskript definiert. Wenn Sie kein Kompilierungsskript definieren, können Sie den Code mithilfe der Bash-Aufgabe kompilieren.

Komponententests

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

Wenn Ihr Testframework die JUnit-Ausgabe nicht unterstützt, fügen Sie Unterstützung über ein Partnerberichtsmodul wie mocha-junit-reporter hinzu. 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 sind die am häufigsten verwendeten Testläufer und die Reporter aufgeführt, mit deren Hilfe Sie XML-Ergebnisse erzielen können:

Test Runner	Reporter für XML-Berichte
Mokka	mocha-junit-reporter cypress-multi-reporters
Jasmin	jasmine-reporters
Jest	jest-junit jest-junit-reporter
Karma	karma-junit-reporter
Ava	tap-xunit

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

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

Wenn Sie ein Skript in der test-Datei Ihres Projekts definiert haben, können Sie es mit ausführen.

- script: npm test

Testergebnisse veröffentlichen

Verwenden Sie zum Veröffentlichen von Testergebnissen 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 Codeabdeckungstool wie Istanbul ausführen, fügen Sie die Aufgabe zum Veröffentlichen von Codeabdeckungsergebnissen hinzu. Anschließend können Sie die Abdeckungsmetriken in der Buildzusammenfassung anzeigen und HTML-Berichte zur weiteren Analyse herunterladen.

Die Aufgabe erwartet die Berichtsausgabe von Cobertura oder JaCoCo. Stellen Sie sicher, dass Ihr Codeabdeckungstool mit den erforderlichen Optionen ausgeführt wird, um die richtige Ausgabe zu generieren, zum Beispiel --report cobertura.

YAML
Klassisch

Im folgenden Beispiel wird die Istanbul-Befehlszeilenschnittstelle nyc zusammen mit mocha-junit-reporter verwendet und npm test 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'

End-to-End-Browser-Tests

Ihre Pipeline kann Tools wie Protractor oder Karma verwenden, um Tests in headless Browsern auszuführen und dann Testergebnisse zu veröffentlichen. Führen Sie die folgenden Schritte aus, um Browsertests zu konfigurieren und Ergebnisse zu veröffentlichen:

Installieren Sie einen Headless-Browsertesttreiber wie Headless Chrome oder Firefox oder ein Browser-Mocking-Tool wie PhantomJS auf dem Build-Agent.
Konfigurieren Sie Ihr Testframework so, dass Sie Ihre headless-Browser-Option oder Ihren Treiber laut der Tool-Dokumentation verwenden.
Konfigurieren Sie Ihr Testframework so, dass JUnit-formatierte Testergebnisse ausgegeben werden, in der Regel mit einem Reporter-Plug-In oder einer Konfiguration.
Fügen Sie eine Skript- oder CLI-Aufgabe hinzu, um die Headless-Browserinstanzen zu starten.
Führen Sie die End-to-End-Tests in den Pipelinestages zusammen mit Ihren Komponententests aus.
Veröffentlichen Sie die Ergebnisse zusammen mit Ihren Komponententests, indem Sie dieselbe Aufgabe zum Veröffentlichen von Testergebnissen verwenden.

Verpackung und Lieferung

Nachdem Sie Ihre App erstellt und getestet haben, können Sie:

Laden Sie die Buildausgabe in Azure-Pipelines hoch.
Erstellen und Veröffentlichen eines npm- oder Maven-Pakets.
Packen Sie die Buildausgabe in ein ZIP-Archiv für die Bereitstellung in einer Webanwendung.

Veröffentlichen von Dateien in Azure Pipelines

Um das gesamte Arbeitsverzeichnis hochzuladen, fügen Sie die Aufgabe Publish build artifacts zur azure-pipelines.yml-Datei hinzu.

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

Um eine Teilmenge von Dateien hochzuladen, kopieren Sie zuerst die erforderlichen Dateien aus dem Arbeitsverzeichnis in ein Stagingverzeichnis mit der Aufgabe " Dateien kopieren ", 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 für andere Projekte handelt, die verwendet werden sollen und keine Webanwendung ist, 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.

Im folgenden Beispiel wird das Skript verwendet, um es in der öffentlichen npm-Registrierung zu veröffentlichen. Im Beispiel wird davon ausgegangen, dass Sie Versionsinformationen wie npm-Version über eine package.json Datei im Versionssteuerelement verwalten.

- script: npm publish

Im folgenden 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 folgenden 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 zum Versionsverwaltungs- und Veröffentlichen von npm-Paketen finden Sie unter Veröffentlichen von npm-Paketen und wie kann ich meine npm-Pakete im Rahmen des Buildprozesses versionieren.

Packen und Bereitstellen einer Web-App

Sie können Anwendungen verpacken, um alle Module 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 dem Testen eine Pipelinephase hinzu, um ein Tool wie Webpack oder den Angular CLI ng-Build auszuführen.

Im folgenden Beispiel wird aufgerufen webpack. Damit dieser Vorgang funktioniert, stellen Sie sicher, dass webpack in Ihrer package.json-Projektdatei als Entwicklungsabhängigkeit konfiguriert ist. Dieses Skript wird mit der Standardkonfiguration ausgeführt webpack , es sei denn, Sie haben eine webpack.config.js Datei im Stammordner Ihres Projekts.

- script: webpack

Im folgenden Beispiel wird das Skriptobjekt aufgerufen, das im Projekt in der Datei npm run build definiert ist. Die Verwendung des Skriptobjekts in Ihrem Projekt verschiebt die Buildlogik in den Quellcode und aus der Pipeline.

- script: npm run build

Sie können auch die CLI oder Bash-Aufgabe in Ihrer Pipeline verwenden, um Ihr Verpackungstool aufzurufen, z.B. webpack oder Angulars ng build.

Um ein *.zip Dateiarchiv zu erstellen, das für die Veröffentlichung in einer Web-App bereit ist, verwenden Sie die Aufgabe "Archivdateien" .

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

Um dieses Archiv in einer Web-App zu veröffentlichen, siehe Bereitstellen in Azure App Service mithilfe von Azure Pipelines.

JavaScript-Frameworks

Sie können Pakete in Ihrer Pipeline installieren, um verschiedene JavaScript-Frameworks zu unterstützen.

Angular

Für Angular-Apps können Sie Angular-spezifische Befehle ausführen, z. B. ng test, ng build und ng e2e. Um Befehle der Angular CLI in Ihrer Pipeline zu verwenden, installieren Sie das angular/cli npm-Paket auf dem Build-Agent.

YAML
Klassisch

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

Hinweis

Bei von Microsoft gehosteten Linux-Agents müssen Sie dem Befehl sudo voranstellen, z. B. sudo npm install -g.

Verwenden Sie für Tests in Ihrer Pipeline, die einen Browser erfordern, wie z.B. das Ausführen von Karma mit dem ng test-Befehl, einen Headless-Browser anstelle eines Standardbrowsers. In der Angular-Starter-App:

Ändern Sie den browsers-Eintrag in Ihrer KARMA.CONF.JS-Projektdatei von browsers: ['Chrome'] in browsers: ['ChromeHeadless'].
Ändern Sie den singleRun-Eintrag in Ihrer KARMA.CONF.JS-Projektdatei von false in true. Diese Änderung trägt dazu bei, dass der Karma-Prozess nach der Ausführung beendet wird.

React und Vue

Alle Abhängigkeiten für React- und Vue-Apps werden in Ihrer package.json Datei erfasst. Ihre azure-pipelines.yml Datei enthält die Standardskripts npm .

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

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

Die Builddateien befinden sich in einem neuen Ordner, dist für Vue oder Build für React. Im folgenden Beispiel wird ein Artefakt erstellt, wwwdas für die Veröffentlichung bereit ist. Die Pipeline verwendet die Aufgaben "Use Node.js", "Datei kopieren" und "Buildartefakte veröffentlichen" .

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

Um die App freizugeben, richten Sie Ihre Freigabeaufgabe auf das dist oder build Artefakt aus und verwenden Sie die Azure Web App-Aufgabe.

Webpack

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

YAML
Klassisch

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

Erstellen von Task Runnern

Es ist üblich, Gulp oder Grunt als Aufgabenläufer zum Erstellen und Testen von JavaScript-Apps zu verwenden.

Gulp

Gulp ist auf von Microsoft gehosteten Agents vorinstalliert.

YAML
Klassisch

Sie können den gulp Befehl in der YAML-Pipelinedatei ausführen.

- script: gulp # add any needed options

Wenn die Schritte in Ihrer gulpfile.js-Datei eine Authentifizierung mit einer npm-Registrierung erfordern, fügen Sie die npm-Authentifizierungsaufgabe hinzu.

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

- script: gulp

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

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

Um Codeabdeckungsergebnisse auf dem Server zu veröffentlichen, fügen Sie die Aufgabe zum Veröffentlichen von Codeabdeckungsergebnissen hinzu. 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'

Grunt

Grunt ist auf von Microsoft gehosteten Agents vorinstalliert.

YAML
Klassisch

Sie können den grunt Befehl in der YAML-Datei ausführen.

- script: grunt # add any needed options

Wenn die Schritte in Ihrer Gruntfile.js-Datei eine Authentifizierung mit einer npm-Registrierung erfordern, fügen Sie die npm-Authentifizierungsaufgabe hinzu.

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

- script: grunt

Problembehandlung

Wenn Sie Ihr Projekt auf Ihrem Entwicklungscomputer erstellen, es aber nicht in Azure Pipelines erstellen können, erkunden Sie die folgenden potenziellen Ursachen und Korrekturmaßnahmen.

Überprüfen Sie, ob die Versionen von Node.js und der Taskrunner auf Ihrem Entwicklungscomputer mit den Versionen auf dem Agent übereinstimmen.

Sie können Befehlszeilenskripts wie node --version in Ihre Pipeline einschließen, um die auf dem Agenten installierten Versionen zu überprüfen. Verwenden Sie die Use Node.js Aufgabe, um dieselbe Version auf dem Agent zu installieren, oder führen Sie npm install Befehle aus, um die Toolversionen zu aktualisieren.
Wenn Ihre Builds während der Wiederherstellung von Paketen zeitweise fehlschlagen, gibt es entweder Probleme mit dem npm-Register, oder es gibt Netzwerkprobleme zwischen dem Azure-Rechenzentrum und dem Register. Untersuchen Sie, ob die Verwendung von Azure Artifacts mit einer npm-Registrierung als Upstreamquelle die Zuverlässigkeit Ihrer Builds verbessert.
Wenn Sie nvm verschiedene Versionen von Node.js verwalten, sollten Sie stattdessen zur Aufgabe "Verwenden von Node.js (UseNode@1)" wechseln. nvm wird aus historischen Gründen auf dem macOS-Image installiert. nvm verwaltet mehrere Node.js-Versionen, indem Shell-Aliase hinzugefügt und geändert werden, was schlecht mit der Art und Weise interagiert, wie Azure Pipelines jede Aufgabe in einem neuen Prozess ausführt. Weitere Informationen finden Sie unter Pipelineausführungen.

Die Use Node.js Aufgabe behandelt dieses Modell ordnungsgemäß. Falls Ihre Arbeit die Verwendung von nvm erfordert, können Sie das folgende Skript am Anfang jeder Pipeline hinzufügen:
```
steps:
- bash: |
    NODE_VERSION=16  # or your preferred version
    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 restlichen Pipelineauftrag. Starten Sie in jedem Schritt, in dem Sie den nvm-Befehl verwenden, das Skript mit dem folgenden Code:
```
- bash: |
    . ${NVM_DIR}/nvm.sh
    nvm <command>
```

Häufig gestellte Fragen

Wie behebe ich einen Pipelinefehler mit der Meldung "SCHWERWIEGENDER FEHLER: CALL_AND_RETRY_LAST Zuweisung fehlgeschlagen - JavaScript-Heap aus dem Arbeitsspeicher"?

Dieser Fehlertyp tritt auf, wenn das Node.js Paket den Speicherauslastungsgrenzwert überschreitet. Um das Problem zu beheben, fügen Sie eine Variable wie NODE_OPTIONS hinzu und weisen Sie ihr den Wert --max_old_space_size=16384 zu.

Wie kann ich meine npm-Pakete als Teil des Buildprozesses versionsieren?

Eine Möglichkeit besteht darin, eine Kombination aus Versionssteuerung und npm-Version zu verwenden. Am Ende einer Pipelineausführung können Sie Ihr Repository mit der neuen Version aktualisieren. Die folgende YAML-Pipeline verfügt über ein GitHub-Repository, und das Paket wird für npmjs bereitgestellt. Der Build schlägt fehl, wenn zwischen der Paketversion von npmjs und der package.json Datei ein Konflikt besteht.

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: UseNode@1
  inputs:
    version: '16.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

Weitere Informationen zu Azure Artifacts und dem Paketverwaltungsdienst finden Sie unter "Paketverwaltung" in Azure Artifacts.
Weitere Informationen zu Aufgaben finden Sie unter Erstellen, Freigeben und Testen von Aufgaben.

Feedback

War diese Seite hilfreich?

Last updated on 2025-10-07

Freigeben über

Pipelines für JavaScript-Apps

Installationsprogramme für Node-Tools

Verwenden mehrerer Node-Versionen

Installation des Abhängigkeitstools

Downloads von Abhängigkeitspaketen

Verwenden von npm

Verwenden von Yarn

JavaScript-Compiler

Komponententests

Testergebnisse veröffentlichen

Veröffentlichen von Code Coverage-Ergebnissen

End-to-End-Browser-Tests

Verpackung und Lieferung

Veröffentlichen von Dateien in Azure Pipelines

Veröffentlichen eines Moduls in einer npm-Registrierung

Packen und Bereitstellen einer Web-App

JavaScript-Frameworks

Angular

React und Vue

Webpack

Erstellen von Task Runnern

Gulp

Grunt

Problembehandlung

Häufig gestellte Fragen

Wie behebe ich einen Pipelinefehler mit der Meldung "SCHWERWIEGENDER FEHLER: CALL_AND_RETRY_LAST Zuweisung fehlgeschlagen - JavaScript-Heap aus dem Arbeitsspeicher"?

Wie kann ich meine npm-Pakete als Teil des Buildprozesses versionsieren?

Verwandte Inhalte

Feedback

Zusätzliche Ressourcen