Anpassa JavaScript för Azure Pipelines

Om du behöver en version av Node.js och npm som inte redan är installerad på den Microsoft-värdbaserade agenten använder du installationsuppgiften för Node-verktyget. Lägg till följande kodfragment i azure-pipelines.yml filen.

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

Om du behöver en version av Node.js/npm som inte redan är installerad på agenten:

1. I pipelinen väljer du Uppgifter, väljer den fas som kör dina bygguppgifter och väljer + sedan för att lägga till en ny aktivitet i den fasen.

2. I aktivitetskatalogen letar du upp och lägger till uppgiften Installationsprogram för nodverktyget.

3. Välj uppgiften och ange den version av Node.js körning som du vill installera.

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

Se körning med flera konfigurationer.

Om du har verktyg som är utvecklingsberoenden i projektet package.json eller package-lock.json filen installerar du dina verktyg och beroenden via npm. Den exakta versionen av verktygen definieras i projektet, isolerad från andra versioner som finns i byggagenten.

Använd ett skript eller npm-aktiviteten.

Använd ett skript för att installera med package.json

- script: npm install --only=dev

Använd npm-uppgiften för att installera med package.json

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

Kör verktyg som installerats på det här sättet med hjälp av npm-paketlöparen npx , som identifierar verktyg som är installerade på det här sättet i sin sökvägsupplösning. I följande exempel anropas mocha testlöparen men söker efter den version som installerats som ett utvecklingsberoende innan en globalt installerad (via npm install -g) version används.

- script: npx mocha

Om du vill installera verktyg som projektet behöver men som inte anges som utvecklingsberoenden i package.jsonanropar npm install -g du från ett skriptsteg i pipelinen.

I följande exempel installeras den senaste versionen av Angular CLI med hjälp npmav . Resten av pipelinen kan sedan använda ng verktyget från andra script steg.

- script: npm install -g @angular/cli

Använd npm- eller kommandoradsuppgifterna i pipelinen för att installera verktyg på byggagenten.

Om du vill installera npm-paket med ett skript i pipelinen lägger du till följande kodfragment i azure-pipelines.yml.

- script: npm install

Om du vill använda ett privat register som anges i .npmrc filen lägger du till följande kodfragment i azure-pipelines.yml.

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

Om du vill skicka registerautentiseringsuppgifter till npm-kommandon via aktivitetslöpare som Gulp lägger du till följande aktivitet azure-pipelines.yml innan du anropar aktivitetslöparen.

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

Använd uppgiften npm- eller npm-autentisera i pipelinen för att ladda ned och installera paket.

Om dina versioner ibland misslyckas på grund av anslutningsproblem när du återställer paket från npm-registret kan du använda Azure Artifacts med överordnade källor och cachelagrar paketen. Autentiseringsuppgifterna för pipelinen används automatiskt när du ansluter till Azure Artifacts. Dessa autentiseringsuppgifter härleds vanligtvis från Project Collection Build Service-kontot .

Om du använder Microsoft-värdbaserade agenter får du en ny dator varje gång du kör en version, vilket innebär att återställa beroendena varje gång, vilket kan ta lång tid. För att minimera kan du använda Azure Artifacts eller en lokalt installerad agent – sedan får du fördelen av att använda paketcacheminnet.

Använd ett skriptsteg för att anropa Yarn för att återställa beroenden. Yarn förinstalleras på vissa Microsoft-värdbaserade agenter. Du kan installera och konfigurera den på lokalt installerade agenter som alla andra verktyg.

- script: yarn install

Använd CLI- eller Bash-uppgiften i pipelinen för att anropa Yarn.

Använd kompilatorer som Babel och TypeScript-kompilatorn tsc för att konvertera källkoden till versioner som kan användas av Node.js-körningen eller i webbläsare.

Om du har konfigurerat ett skriptobjekt i projektfilen package.json som kör kompilatorn anropar du det i pipelinen med hjälp av en skriptuppgift.

- script: npm run compile

Du kan anropa kompilatorer direkt från pipelinen med hjälp av skriptuppgiften. Dessa kommandon körs från roten på den klonade källkodslagringsplatsen.

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

Använd npm-aktiviteten i pipelinen om du har ett kompileringsskript definierat i projektet package.json för att skapa koden. Använd Bash-aktiviteten för att kompilera koden om du inte har ett separat skript definierat i projektkonfigurationen.

Konfigurera dina pipelines så att de kör JavaScript-testerna så att de ger resultat som är formaterade i JUnit XML-format. Du kan sedan publicera resultaten med hjälp av den inbyggda publiceringstestresultataktiviteten .

Om testramverket inte stöder JUnit-utdata lägger du till stöd via en partnerrapporteringsmodul, till exempel mocha-junit-reporter. Du kan antingen uppdatera testskriptet för att använda JUnit-reportern, eller om reportern har stöd för kommandoradsalternativ skickar du dessa alternativ till uppgiftsdefinitionen.

I följande tabell visas de vanligaste testlöparna och de reportrar som kan användas för att skapa XML-resultat:

I följande exempel används mocha-junit-reporter och anropas mocha test direkt med hjälp av ett skript. Det här skriptet genererar JUnit XML-utdata på standardplatsen ./test-results.xmlför .

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

Om du har definierat ett test skript i projektet package.json fil kan du anropa det med hjälp npm testav .

- script: npm test

Publicera testresultat

Om du vill publicera resultaten använder du aktiviteten Publicera testresultat .

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

Publicera resultat för kodtäckning

Om testskripten kör ett kodtäckningsverktyg, till exempel Istanbul, lägger du till uppgiften Publicera kodtäckningsresultat . När du gör det kan du hitta täckningsmått i byggsammanfattningen och ladda ned HTML-rapporter för ytterligare analys. Uppgiften förväntar sig Cobertura- eller JaCoCo-rapporteringsutdata, så se till att kodtäckningsverktyget körs med de alternativ som krävs för att generera rätt utdata. Exempel: --report cobertura

I följande exempel används nyc, istanbuls kommandoradsgränssnitt, tillsammans med mocha-junit-reporter och anropar npm test kommandot.

- 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'

Använd uppgifterna Publicera testresultat och Publicera kodtäckningsresultat i pipelinen för att publicera testresultat tillsammans med kodtäckningsresultat med hjälp av Istanbul.

Ange kontrollalternativen för aktiviteten Publicera testresultat för att köra aktiviteten även om en tidigare aktivitet har misslyckats, såvida inte distributionen avbröts.

Paketera program för att paketera alla dina programmoduler med mellanliggande utdata och beroenden i statiska tillgångar som är redo för distribution. Lägg till en pipelinefas efter kompilering och tester för att köra ett verktyg som webpack eller ng build med hjälp av Angular CLI.

I det första exemplet anropas webpack. Om du vill ha det här arbetet kontrollerar du att webpack det är konfigurerat som ett utvecklingsberoende i din package.json projektfil. Detta körs webpack med standardkonfigurationen om du inte har en webpack.config.js fil i rotmappen för projektet.

- script: webpack

I nästa exempel används npm-aktiviteten för att anropa npm run build build skriptobjektet som definierats i projektet package.json. Med hjälp av skriptobjekt i projektet flyttas logiken för bygget till källkoden och ut ur pipelinen.

- script: npm run build

Använd CLI- eller Bash-uppgiften i pipelinen för att anropa paketeringsverktyget, till exempel webpack eller Angulars ng build.

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

Lägg till följande uppgifter i pipelinen:

• npm

  • Kommando: custom
  • Kommando och argument: install -g @angular/cli

• npm

  • Kommando: install

• våldsamt slag

  • Typ: inline
  • Manus: 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

Lägg till följande uppgifter i pipelinen:

• npm

  • Kommando: custom
  • Kommando och argument: install -g webpack webpack-cli --save-dev

• våldsamt slag

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

Gulp förinstalleras på Microsoft-värdbaserade agenter. gulp Kör kommandot i YAML-filen:

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

Om stegen i gulpfile.js-filen kräver autentisering med ett npm-register:

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

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

Lägg till uppgiften Publicera testresultat för att publicera JUnit- eller xUnit-testresultat på servern.

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

Lägg till aktiviteten Publicera kodtäckningsresultat för att publicera kodtäckningsresultat till servern. Du hittar täckningsmått i byggsammanfattningen och du kan ladda ned HTML-rapporter för ytterligare analys.

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

Det enklaste sättet att skapa en pipeline om din app använder Gulp är att använda Node.js med gulp build-mallen när du skapar pipelinen. Den här mallen lägger automatiskt till olika uppgifter för att anropa Gulp-kommandon och publicera artefakter. I uppgiften väljer du Aktivera kodtäckning för att aktivera kodtäckning med hjälp av Istanbul.

Grunt förinstalleras på Microsoft-värdbaserade agenter. Så här kör du grunt-kommandot i YAML-filen:

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

Om stegen i Gruntfile.js filen kräver autentisering med ett npm-register:

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

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

Det enklaste sättet att skapa en pipeline om din app använder Grunt är att använda Node.js med Grunt-byggmallen när du skapar pipelinen. Detta lägger automatiskt till olika uppgifter för att anropa Gulp-kommandon och publicera artefakter. I uppgiften väljer du alternativet Publicera till TFS/Team Services för att publicera testresultat och väljer Aktivera kodtäckning för att aktivera kodtäckning med hjälp av Istanbul.

Publicera filer till Azure Pipelines

Om du vill ladda upp hela arbetskatalogen med filer använder du aktiviteten Publicera byggartefakter och lägger till följande i azure-pipelines.yml filen.

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

Om du vill ladda upp en delmängd filer kopierar du först de filer som behövs från arbetskatalogen till en mellanlagringskatalog med uppgiften Kopiera filer och använder sedan aktiviteten Publicera byggartefakter.

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

- task: PublishBuildArtifacts@1

Publicera en modul till ett npm-register

Om projektets utdata är en npm modul för användning av andra projekt och inte ett webbprogram använder du npm-aktiviteten för att publicera modulen till ett lokalt register eller till det offentliga npm-registret. Ange en unik kombination av namn/version varje gång du publicerar.

Exempel

Det första exemplet förutsätter att du hanterar versionsinformation (till exempel via en npm-version) genom ändringar package.json i filen i versionskontroll. I följande exempel används skriptuppgiften för att publicera till det offentliga registret.

- script: npm publish

Nästa exempel publicerar till ett anpassat register som definierats i lagringsplatsens .npmrc fil. Konfigurera en npm-tjänstanslutning för att mata in autentiseringsuppgifter i anslutningen när bygget körs.

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

Det sista exemplet publicerar modulen till ett Azure DevOps Services-pakethanteringsflöde.

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

Mer information om versionshantering och publicering av npm-paket finns i Publicera npm-paket och Hur kan jag version mina npm-paket som en del av byggprocessen?.

Distribuera en webbapp

Om du vill skapa ett .zip filarkiv som är redo för publicering till en webbapp använder du uppgiften Arkivfiler :

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

Information om hur du publicerar det här arkivet till en webbapp finns i Distribution av Azure-webbappar.

Publicera artefakter till Azure Pipelines

Använd uppgiften Publicera byggartefakter för att publicera filer från din version till Azure Pipelines.

Publicera till ett npm-register

Om du vill skapa och publicera ett npm-paket använder du npm-aktiviteten. Mer information om versionshantering och publicering av npm-paket finns i Publicera npm-paket.

Distribuera en webbapp

Om du vill skapa ett .zip filarkiv som är redo för publicering till en webbapp använder du uppgiften Arkivfiler. Information om hur du publicerar det här arkivet till en webbapp finns i Distribution av Azure Web App.

Skapa och push-överföra avbildning till containerregister

När källkoden har skapats och enhetstesterna har genomförts kan du även skapa en avbildning och skicka den till ett containerregister.