Anpassen von JavaScript für Azure Pipelines

Sie können Azure Pipelines verwenden, um Ihre JavaScript-Apps zu erstellen, ohne eine eigene Infrastruktur einrichten zu müssen. Tools, die Sie häufig zum Erstellen, Testen und Ausführen von JavaScript-Apps wie npm, Node, Yarn und Gulp verwenden, werden auf von Microsoft gehosteten Agents in Azure Pipelines vorinstalliert.

Weitere Informationen zur vorinstallierten Version von Node.js und npm finden Sie unter Von Microsoft gehostete Agents. Um eine bestimmte Version dieser Tools auf von Microsoft gehosteten Agents zu installieren, fügen Sie die Aufgabe Installationsprogramm für das Node-Tool am Anfang Ihres Prozesses hinzu. Sie können auch einen selbstgehosteten Agent verwenden.

Informationen zum Erstellen Ihrer ersten Pipeline mit JavaScript finden Sie im JavaScript-Schnellstart.

Verwenden einer bestimmten Version von 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 die Aufgabe Installationsprogramm für das Node-Tool. Fügen Sie Ihrer Datei azure-pipelines.yml den folgenden Codeschnipsel hinzu.

Hinweis

Die gehosteten Agents werden regelmäßig aktualisiert, und das Einrichten dieser Aufgabe führt bei jeder Ausführung der Pipeline zu einem erheblichen Zeitaufwand beim Aktualisieren auf eine neuere Nebenversion. Verwenden Sie diese Aufgabe nur, wenn Sie eine bestimmte Node-Version in Ihrer Pipeline benötigen.

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

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

Verwenden mehrerer Node-Versionen

Sie können Ihre App mit mehreren Versionen von Node mit dem Installationsprogramm für das Node-Tool erstellen und testen.

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

Installieren von Tools auf dem Build-Agent

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.

Hinweis

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

- script: npm install -g @angular/cli

Tipp

Diese Tasks werden bei jeder Ausführung Ihrer Pipeline ausgeführt. 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 sich der Mehraufwand erheblich auf die Buildleistung auswirkt.

Verwalten von Abhängigkeiten

Verwenden Sie in Ihrem Build Yarn oder Azure Artifacts, um Pakete aus der öffentlichen npm-Registrierung herunterzuladen. Diese Registrierung ist ein Typ der privaten npm-Registrierung, die Sie in der .npmrc Datei angeben.

Verwenden von npm

Sie können npm auf folgende Weise verwenden, um Pakete für Ihren Build herunterzuladen:

• Führen Sie npm install direkt in Ihrer Pipeline aus, da dies die einfachste Möglichkeit ist, Pakete ohne Authentifizierung aus einer Registrierung herunterzuladen. 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. Diese Aufgabe ist nützlich, wenn Sie eine authentifizierte Registrierung verwenden.
• Verwenden Sie eine npm-Authentifizierungsaufgabe. Diese Aufgabe ist nützlich, wenn Sie npm install in Ihren Aufgabenausführungen (Gulp, Grunt oder Maven) ausführen.

Wenn Sie eine npm-Registrierung angeben möchten, fügen Sie die URLs in einer .npmrc-Datei in Ihr Repository ein. Wenn Ihr Feed authentifiziert wird, erstellen Sie auf der Registerkarte Dienste in den Projekteinstellungen eine npm-Dienstverbindung, um die Anmeldeinformationen zu verwalten.

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>

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 von Yarn

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

Ausführen von JavaScript-Compilern

Verwenden Sie Compiler wie Babel und den TypeScript-Compilertsc, um Ihren Quellcode in Versionen zu konvertieren, die von der Node.js-Runtime 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

Komponententests ausführen

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:

Test Runner	Reporter zum Generieren von XML-Berichten
mocha	mocha-junit-reporter cypress-multi-reporters
jasmine	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 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'

End-to-End-Test der Browser

Führen Sie Tests in Headless Browsern als Teil Ihrer Pipeline mit Tools wie Protractor oder Karma aus. Veröffentlichen Sie dann die Ergebnisse für den Build mit den folgenden Schritten in Azure DevOps:

1. Installieren Sie auf dem Build-Agent einen Testtreiber für den Headless Browser, z. B. Headless Chrome oder Headless Firefox, oder ein Browsersimulationstool wie PhantomJS.
2. Konfigurieren Sie Ihr Testframework für die Verwendung der Headless Browser-/Treiberoption Ihrer Wahl gemäß der Dokumentation des Tools.
3. Konfigurieren Sie Ihr Testframework (in der Regel mit einem Reporter-Plug-In oder einer Konfiguration), um Testergebnisse im JUnit-Format auszugeben.
4. Richten Sie eine Skriptaufgabe ein, um alle CLI-Befehle auszuführen, die zum Starten der Instanzen der Headless Browser erforderlich sind.
5. Führen Sie die End-to-End-Tests in den Pipelinestages zusammen mit Ihren Komponententests aus.
6. Veröffentlichen Sie die Ergebnisse, indem Sie dieselbe Aufgabe Testergebnisse veröffentlichen zusammen mit Ihren Komponententests verwenden.

Packen von Web-Apps

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

Implementieren von JavaScript-Frameworks

Angular

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

Hinweis

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

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

Für Tests in Ihrer Pipeline, die einen Browser erfordern, z. B. der Befehl ng test in der Starter-App, die Karma ausführt, verwenden Sie einen Headless Browser anstelle eines Standardbrowsers. In der Angular-Starter-App:

1. Ändern Sie den browsers-Eintrag in Ihrer KARMA.CONF.JS-Projektdatei von browsers: ['Chrome'] in browsers: ['ChromeHeadless'].

2. Ändern Sie für den singleRun-Eintrag in Ihrer KARMA.CONF.JS-Projektdatei den Wert false in true. Diese Änderung trägt dazu bei, sicherzustellen, dass der Karma-Prozess beendet wird, nachdem er ausgeführt wurde.

React und Vue

Alle Abhängigkeiten für Ihre react- und Vue-Apps werden in der PACKAGE.JSON-Datei erfasst. Ihre AZURE-PIPELINES.YML-Datei enthält das Node.js-Standardskript:

- 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). Mit diesem Codeschnipsel wird ein Artefakt (www) erstellt, das für die Veröffentlichung bereit ist. Es verwendet die Aufgaben Node Installer, 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

Verweisen Sie zum Veröffentlichen Ihre Releaseaufgabe auf das Artefakt dist oder build, und verwenden Sie die Aufgabe Azure Web App Deploy.

Webpack

Sie können eine Webpack-Konfigurationsdatei verwenden, um einen Compiler wie 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

Erstellen von Task Runnern

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

Gulp

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'

Grunt

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

Verpacken und Übermitteln von Code

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 für die Bereitstellung in einer Webanwendung in einer ZIP-Datei packen.

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.

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.

Problembehandlung

Wenn Sie Ihr Projekt auf Ihrem Entwicklungscomputer erstellen können, aber Probleme beim Erstellen in Azure Pipelines auftreten, untersuchen Sie die folgenden möglichen Ursachen und Korrekturmaßnahmen:

• Überprüfen Sie, ob die Versionen von Node.js und der Task Runner auf Ihrem Entwicklungscomputer mit denen auf dem Agent übereinstimmen. Sie können Befehlszeilenskripts wie node --version in Ihre Pipeline einschließen, um zu überprüfen, was auf dem Agent installiert ist. Verwenden Sie entweder den Node Tool Installer (wie in dieser Anleitung erläutert), um dieselbe Version auf dem Agent bereitzustellen, oder führen Sie npm install-Befehle aus, um die Tools auf die gewünschten Versionen zu aktualisieren.

• Wenn bei Ihren Builds während der Wiederherstellung von Paketen zeitweilig Fehler auftreten, liegen entweder Probleme mit der npm-Registrierung oder Netzwerkprobleme zwischen dem Azure-Rechenzentrum und der Registrierung vor. Wir können diese Faktoren nicht beeinflussen. Untersuchen Sie, ob die Verwendung von Azure Artifacts mit einer npm-Registrierung als Upstreamquelle die Zuverlässigkeit Ihrer Builds verbessert.

• Wenn Sie nvm verwenden, um verschiedene Versionen von Node.js zu verwalten, sollten Sie stattdessen auf die Aufgabe Node Tool Installer umsteigen. (nvm wird aus historischen Gründen im macOS-Image installiert.) nvm verwaltet mehrere Node.js-Versionen durch Hinzufügen von Shell-Aliasnamen und Ändern von PATH, was sich negativ auf die Art und Weise auswirkt, wie Azure Pipelines jede Aufgabe in einem neuen Prozess ausführt.

  Die Aufgabe Node Tool Installer verarbeitet dieses Modell ordnungsgemäß. Wenn Ihr Projekt jedoch die Verwendung von nvm erfordert, können Sie das folgende Skript am Anfang jeder Pipeline hinzufügen:

  steps:
  - bash: |
      NODE_VERSION=16  # 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 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

F: Wo kann ich mehr über Azure Artifacts und den Paketverwaltungsdienst erfahren?

A: Paketverwaltung in Azure Artifacts

F: Wo erfahre ich mehr über Aufgaben?

A: Build-, Release- und Testaufgaben

F: Wie behebe ich einen Pipelinefehler mit der Meldung „FATAL ERROR: CALL_AND_RETRY_LAST-Fehler bei der Zuordnung – JavaScript-Heap hat nicht genügend Speicher“?

A: Dieser Fehlertyp tritt auf, wenn das Node.js-Paket den Grenzwert für die Arbeitsspeicherauslastung überschritten hat. 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.

F: Wie kann ich meine npm-Pakete im Rahmen des Buildprozesses mit Versionsangaben versehen?

A: Eine Option besteht darin, eine Kombination aus Versionskontrolle und npm-Version zu verwenden. Am Ende einer Pipelineausführung können Sie Ihr Repository mit der neuen Version aktualisieren. In diesem YAML gibt es ein GitHub-Repository, und das Paket wird in npmjs bereitgestellt. Bei Ihrem Build tritt ein Fehler auf, wenn zwischen Ihrer Paketversion in npmjs und Ihrer 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