JavaScript testreszabása az Azure Pipelineshoz

Az Azure Pipelines használatával anélkül hozhatja létre JavaScript-alkalmazásait, hogy saját infrastruktúrát kellene beállítania. A JavaScript-alkalmazások – például npm, Node, Yarn és Gulp – létrehozásához, teszteléséhez és futtatásához gyakran használt eszközök előre telepítve lesznek a Microsoft által üzemeltetett ügynökökre az Azure Pipelinesban.

Az előre telepített Node.js és npm verziójához tekintse meg a Microsoft által üzemeltetett ügynököket. Ha az eszközök egy adott verzióját szeretné telepíteni a Microsoft által üzemeltetett ügynökökre, vegye fel a Node Tool Installer feladatot a folyamat elejére. Használhat saját üzemeltetésű ügynököt is.

Az első folyamat JavaScripttel való létrehozásához tekintse meg a JavaScript rövid útmutatóját.

A Node.js egy adott verziójának használata

Ha olyan Node.js- és npm-verzióra van szüksége, amely még nincs telepítve a Microsoft által üzemeltetett ügynökön, használja a Node eszköz telepítőfeladatát. Adja hozzá a következő kódrészletet a azure-pipelines.yml fájlhoz.

Feljegyzés

Az üzemeltetett ügynökök rendszeresen frissülnek, és ennek a feladatnak a beállítása jelentős időt vesz el a folyamat minden futtatásakor egy újabb alverzióra való frissítéssel. Ezt a feladatot csak akkor használja, ha egy adott csomópontverzióra van szüksége a folyamatban.

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

Ha csak az npm eszközt szeretné frissíteni, futtassa a parancsot a npm i -g npm@version-number buildelési folyamatban.

Több csomópontverzió használata

Az alkalmazást a Node több verzióján is létrehozhatja és tesztelheti a Node eszköz telepítőfeladatával.

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

Eszközök telepítése a buildügynökre

Ha olyan eszközökkel rendelkezik, amelyek fejlesztési függőségek a projektben package.json vagy package-lock.json a fájlban, telepítse eszközeit és függőségeit az npm használatával. Az eszközök pontos verziója a projektben lesz meghatározva, elkülönítve a buildügynökön található többi verziótól.

Használjon szkriptet vagy npm-feladatot.

Szkript használata a package.json

- script: npm install --only=dev

A telepítéshez használja az npm-feladatot a package.json

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

Futtassa az ily módon telepített eszközöket az npm-csomagfuttatóval npx , amely észleli az elérési út felbontásában az ilyen módon telepített eszközöket. Az alábbi példa meghívja a mocha tesztfuttatót, de fejlesztési függőségként telepített verziót keres, mielőtt globálisan telepített (rajta keresztüli npm install -g) verziót használ.

- script: npx mocha

Ha olyan eszközöket szeretne telepíteni, amelyekre a projektnek szüksége van, de amelyek nincsenek fejlesztési függőségként package.jsonbeállítva, hívja meg npm install -g a folyamatot egy szkriptszakaszból.

Az alábbi példa az Angular CLI legújabb verzióját telepíti a használatávalnpm. A folyamat többi része ezután más script szakaszokból is használhatja az ng eszközt.

Feljegyzés

A Microsoft által üzemeltetett Linux-ügynököknél a parancsot a következővel sudo npm install -gkell előtaggal előtaggal sudoelérhetővé tenni:

- script: npm install -g @angular/cli

Tipp.

Ezek a feladatok minden alkalommal futnak, amikor a folyamat fut, ezért vegye figyelembe, hogy az eszközök telepítése milyen hatással van a buildelési időkre. Fontolja meg a saját üzemeltetésű ügynökök konfigurálását a szükséges eszközök verziójával, ha a többletterhelés komoly hatással lesz a build teljesítményére.

Függőségek kezelése

A buildben a Yarn vagy az Azure Artifacts használatával töltse le a csomagokat a nyilvános npm-beállításjegyzékből. Ez a beállításjegyzék a fájlban .npmrc megadott privát npm-beállításjegyzék-típus.

Az npm használata

Az npm használatával a következő módokon töltheti le a csomagokat a buildhez:

• Közvetlenül futtassa npm install a folyamatot, mivel ez a legegyszerűbb módja a csomagok hitelesítés nélküli letöltésének a beállításjegyzékből. Ha a buildnek nincs szüksége fejlesztési függőségekre az ügynök futtatásához, felgyorsíthatja a buildelési időket a --only=prod következő lehetőséggel npm install: .
• Használjon npm-feladatot. Ez a feladat akkor hasznos, ha hitelesített beállításjegyzéket használ.
• Használjon npm-hitelesítési feladatot. Ez a feladat akkor hasznos, ha a feladatfuttatókon belül fut npm install – Gulp, Grunt vagy Maven.

Ha npm-beállításjegyzéket szeretne megadni, helyezze az URL-címeket egy .npmrc fájlba az adattárban. Ha a hírcsatorna hitelesítése megtörtént, hozzon létre egy npm-szolgáltatáskapcsolatot a Project beállításainak Szolgáltatások lapján a hitelesítő adatainak kezeléséhez.

Ha npm-csomagokat szeretne telepíteni egy szkripttel a folyamatban, adja hozzá a következő kódrészletet.azure-pipelines.yml

- script: npm install

A fájlban .npmrc megadott privát beállításjegyzék használatához adja hozzá a következő kódrészletet a fájlhoz azure-pipelines.yml.

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

Ha a beállításjegyzék hitelesítő adatait szeretné átadni az npm-parancsoknak a feladatfuttatókon( például a Gulpon) keresztül, adja hozzá a következő feladatot azure-pipelines.yml , mielőtt meghívja a feladatfuttatót.

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

Ha a buildek időnként meghiúsulnak a kapcsolati problémák miatt, amikor visszaállítja a csomagokat az npm-beállításjegyzékből, használhatja az Azure Artifactst a felsőbb rétegbeli forrásokkal, és gyorsítótárazhatja a csomagokat. A folyamat hitelesítő adatai automatikusan használatba kerülnek az Azure Artifactshez való csatlakozáskor. Ezek a hitelesítő adatok általában a Project Collection Build Service-fiókból származnak.

Ha Microsoft által üzemeltetett ügynököket használ, minden egyes build futtatásakor új gépet kap , ami azt jelenti, hogy minden alkalommal visszaállítja a függőségeket, ami jelentős időt vehet igénybe. A mérséklés érdekében használhatja az Azure Artifactst vagy egy saját üzemeltetésű ügynököt , majd kihasználhatja a csomaggyorsítótár használatát.

A Yarn használata

A függőségek visszaállításához használjon szkriptszakaszt a Yarn meghívásához. A Yarn előtelepít néhány Microsoft által üzemeltetett ügynököt. Telepítheti és konfigurálhatja a saját üzemeltetésű ügynökökre, mint bármely más eszközre.

- script: yarn install

JavaScript-fordítók futtatása

Az olyan fordítók, mint a Babel és a TypeScript tsc fordító használatával konvertálhatja a forráskódot a Node.js futtatókörnyezetben vagy webböngészőkben használható verziókká.

Ha egy szkriptobjektum van beállítva a fordítót futtató projektfájlbanpackage.json, meghívja azt a folyamatba egy szkriptfeladat használatával.

- script: npm run compile

A fordítókat közvetlenül a folyamatból hívhatja meg a szkriptfeladat használatával. Ezek a parancsok a klónozott forráskódtár gyökeréből futnak.

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

Egységtesztek futtatása

Konfigurálja a folyamatokat a JavaScript-tesztek futtatására, hogy JUnit XML formátumban formázott eredményeket készítsenek. Ezután közzéteheti az eredményeket a beépített közzétételi teszteredmény-feladattal.

Ha a tesztelési keretrendszer nem támogatja a JUnit-kimenetet, adjon hozzá támogatást egy partnerjelentési modulon keresztül, például a mocha-junit-reporteren keresztül. Frissítheti a tesztszkriptet a JUnit-riporter használatára, vagy ha a riporter támogatja a parancssori beállításokat, adja át ezeket a beállításokat a feladatdefiníciónak.

Az alábbi táblázat felsorolja a leggyakrabban használt tesztfuttatókat és az XML-eredmények előállításához használható riportereket:

Tesztfuttató	Xml-jelentések készítését lehetővé tevő riporterek
Mocha	mocha-junit-reporter cypress-multi-reporters
jázmin	jasmine-riporterek
tréfa	jest-junit jest-junit-reporter
karma	karma-junit-riporter
Ava	tap-xunit

Az alábbi példa a mocha-junit-reportert használja, és közvetlenül egy szkripttel hív meg mocha test . Ez a szkript a JUnit XML-kimenetet az alapértelmezett helyen állítja ./test-results.xmlelő.

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

Ha definiált egy szkriptet test a projektben package.json fájlban, meghívhatja azt a használatával npm test.

- script: npm test

Teszteredmények közzététele

Az eredmények közzétételéhez használja a Teszteredmények közzététele feladatot.

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

Kódlefedettségi eredmények közzététele

Ha a tesztszkriptek kódlefedettségi eszközt futtatnak, például Isztambult, adja hozzá a Kódlefedettségi eredmények közzététele feladatot. Ha így tesz, a lefedettségi metrikákat megtalálhatja a build összegzésében, és további elemzés céljából html-jelentéseket tölthet le. A feladat a Cobertura vagy a JaCoCo jelentéskészítési kimenetét várja, ezért győződjön meg arról, hogy a kódlefedettségi eszköz a megfelelő kimenet létrehozásához szükséges beállításokkal fut. Például: --report cobertura.

Az alábbi példa nyc-t, az isztambuli parancssori felületet, valamint a mocha-junit-reportert használja, és parancsot npm test hív meg.

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

A böngésző végpontok közötti tesztelése

Teszteket futtathat fej nélküli böngészőkben a folyamat részeként olyan eszközökkel, mint a Protractor vagy a Karma. Ezután tegye közzé a build eredményeit az Azure DevOpsban az alábbi lépésekkel:

1. Telepítsen egy fej nélküli böngészőtesztelőt, például a fej nélküli Chrome-ot vagy a Firefoxot, vagy egy böngésző-gúnyoló eszközt, például a PhantomJS-t a buildügynökre.
2. Konfigurálja a tesztelési keretrendszert úgy, hogy az eszköz dokumentációjának megfelelően a választott fej nélküli böngészőt/illesztőprogramot használja.
3. Konfigurálja a tesztelési keretrendszert (általában egy riporter beépülő modullal vagy konfigurációval), hogy JUnit-formátumú teszteredményeket adjon ki.
4. Állítson be egy szkriptfeladatot a fej nélküli böngészőpéldányok indításához szükséges parancssori felületi parancsok futtatásához.
5. Futtassa a végpontok közötti teszteket a folyamat szakaszaiban az egységtesztekkel együtt.
6. Tegye közzé az eredményeket ugyanazzal a Teszteredmények közzététele feladattal az egységtesztek mellett.

Webalkalmazások csomagolása

Csomagolja az alkalmazásokat, hogy az összes alkalmazásmodult köztes kimenetekkel és függőségekkel csomagolja az üzembe helyezésre kész statikus eszközökbe. A fordítás és a tesztek után adjon hozzá egy folyamatszakaszt egy olyan eszköz futtatásához, mint a webpack vagy az ng build az Angular CLI használatával.

Az első példahívások webpack. A munka elvégzéséhez győződjön meg arról, hogy webpack a package.json projektfájlban fejlesztési függőségként van konfigurálva. Ez az alapértelmezett konfigurációval fut webpack , hacsak nincs fájl webpack.config.js a projekt gyökérmappájában.

- script: webpack

A következő példa az npm-feladat használatával hívja meg npm run build a build projektben definiált szkriptobjektumot package.json. Szkriptobjektumok használata a projektben áthelyezi a build logikáját a forráskódba és a folyamatból.

- script: npm run build

JavaScript-keretrendszerek implementálása

Angular

Az Angular-alkalmazásokhoz Angular-specifikus parancsokat is használhat, például ng-teszt, ng build és ng e2e. Ha Angular CLI-parancsokat szeretne használni a folyamatban, telepítse az angular /cli npm csomagot a buildügynökre.

Feljegyzés

A Microsoft által üzemeltetett Linux-ügynököknél a parancsot a következővel sudo npm install -gkell előtaggal előtaggal sudoelérhetővé tenni:

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

A folyamat olyan tesztjeihez, amelyekhez böngészőt kell futtatni, például a Karma-t futtató kezdőalkalmazás ng tesztparancsát , használjon fej nélküli böngészőt a normál böngésző helyett. Az Angular starter alkalmazásban:

1. Módosítsa a bejegyzést a browsers karma.conf.js projektfájlban a következőre browsers: ['Chrome'] browsers: ['ChromeHeadless']: .

2. Módosítsa a bejegyzést a singleRun karma.conf.js projektfájlban értékről értékretruefalse. Ez a változás segít meggyőződni arról, hogy a Karma-folyamat leáll a futtatása után.

React és Vue

A React- és Vue-alkalmazások összes függősége rögzítve lesz a package.json fájlban. A azure-pipelines.yml fájl a szabványos Node.js szkriptet tartalmazza:

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

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

A buildfájlok egy új mappában találhatók ( dist Vue esetén) vagy build (React esetén). Ez a kódrészlet létrehoz egy összetevőt , www amely készen áll a kiadásra. A Csomópont-telepítőt, a Fájlmásolása és a Build Artifacts-feladatok közzététele elemet használja.

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

A kiadáshoz mutasson a kiadási feladatra vagy összetevőredist, és használja az Azure Web App Deploy feladatot.build

Webpack

Webpack konfigurációs fájllal megadhat egy fordítót, például a Babelt vagy a TypeScriptet a JSX vagy a TypeScript egyszerű JavaScriptre való fordításához, valamint az alkalmazás kötegeléséhez.

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

Feladatfuttatók létrehozása

Gyakori, hogy a Gulp vagy a Grunt feladatfuttatóként használható JavaScript-alkalmazások létrehozásához és teszteléséhez.

Korty

A Gulp előre telepítve lesz a Microsoft által üzemeltetett ügynökökre. Futtassa a gulp parancsot a YAML-fájlban:

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

Ha a gulpfile.js fájl lépéseihez hitelesítésre van szükség egy npm-beállításjegyzékkel:

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

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

Adja hozzá a Teszteredmények közzététele feladatot a JUnit vagy az xUnit teszteredmények kiszolgálón való közzétételéhez.

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

Adja hozzá a Kódlefedettségi eredmények közzététele feladatot a kódlefedettségi eredmények kiszolgálón való közzétételéhez. A lefedettségi metrikákat a build összefoglalásában találja, és további elemzés céljából HTML-jelentéseket tölthet le.

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

Grunt

A Grunt előre telepítve lesz a Microsoft által üzemeltetett ügynökökre. A grunt parancs futtatása a YAML-fájlban:

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

Ha a fájl lépéseihez Gruntfile.js hitelesítésre van szükség egy npm-beállításjegyzékkel:

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

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

A kód csomagolása és kézbesítése

Miután elkészítette és tesztelte az alkalmazást, feltöltheti a buildkimenetet az Azure Pipelinesba, létrehozhat és közzétehet egy npm- vagy Maven-csomagot, vagy a build kimenetét egy .zip fájlba csomagolhatja egy webalkalmazásba való üzembe helyezéshez.

Fájlok közzététele az Azure Pipelinesban

A fájlok teljes munkakönyvtárának feltöltéséhez használja a Build Artifacts közzétételi feladatát, és adja hozzá a következőt a azure-pipelines.yml fájlhoz.

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

A fájlok egy részhalmazának feltöltéséhez először másolja a szükséges fájlokat a munkakönyvtárból egy előkészítési könyvtárba a Fájlok másolása feladattal, majd használja a Build Artifacts (Összeállítási összetevők közzététele) feladatot.

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

- task: PublishBuildArtifacts@1

Modul közzététele npm-beállításjegyzékben

Ha a projekt kimenete egy npm modul, amelyet más projektek és nem webalkalmazások használnak, az npm-feladattal közzéteheti a modult egy helyi beállításjegyzékben vagy a nyilvános npm-beállításjegyzékben. Minden közzétételkor adjon meg egyedi nevet/verziókombinációt.

Példák

Az első példa feltételezi, hogy a verzióinformációkat (például egy npm-verziót) a fájl módosításaival kezeli a package.json verziókövetésben. Az alábbi példa a szkriptfeladatot használja a nyilvános beállításjegyzékben való közzétételhez.

- script: npm publish

A következő példa az adattár .npmrc fájljában definiált egyéni beállításjegyzékben teszi közzé. Állítson be egy npm-szolgáltatáskapcsolatot, amely a build futtatásakor hitelesítési hitelesítő adatokat szúr be a kapcsolatba.

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

Az utolsó példa közzéteszi a modult egy Azure DevOps Services-csomagkezelési csatornán.

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

Az npm-csomagok verziószámozásáról és közzétételéről további információt az npm-csomagok közzététele és az npm-csomagok verziószámozása a buildelési folyamat részeként című témakörben talál.

Webalkalmazás üzembe helyezése

Ha webalkalmazásban való közzétételre kész .zip fájlarchívumot szeretne létrehozni, használja az Archív fájlok feladatot:

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

Az archívum webalkalmazásban való közzétételéhez tekintse meg az Azure-webalkalmazás üzembe helyezését.

Rendszerkép létrehozása és leküldése a tárolóregisztrációs adatbázisba

Miután a forráskód sikeresen elkészült, és az egységtesztek sikeresen lezajlottak, létrehozhat egy lemezképet, és elküldheti azt egy tárolóregisztrációs adatbázisba.

Hibaelhárítás

Ha létrehozhatja a projektet a fejlesztőgépen, de problémákat tapasztal az Azure Pipelineson való létrehozás során, vizsgálja meg a következő lehetséges okokat és korrekciós műveleteket:

• Ellenőrizze, hogy a Node.js és a fejlesztési gépen lévő feladatfuttató verziója megegyezik-e az ügynökön lévő verziókkal. A folyamatba például node --version parancssori szkripteket is befoglalhat, így ellenőrizheti, hogy mi van telepítve az ügynökre. Vagy használja a Node Tool Installert (az útmutatóban leírtak szerint), hogy ugyanazt a verziót telepítse az ügynökön, vagy futtassa npm install a parancsokat az eszközök kívánt verziókra való frissítéséhez.

• Ha a buildek időnként meghiúsulnak a csomagok visszaállítása során, az npm beállításjegyzéke problémákat tapasztal, vagy hálózati problémák merülnek fel az Azure-adatközpont és a beállításjegyzék között. Nem tudjuk szabályozni ezeket a tényezőket. Megtudhatja, hogy az Azure Artifacts és az npm-beállításjegyzék felsőbb rétegbeli forrásként való használata javítja-e a buildek megbízhatóságát.

• Ha a Node.js különböző verzióit szeretné nvm kezelni, érdemes inkább a Node Tool Installer feladatra váltani. (nvm a macOS rendszerképen előzmény okokból van telepítve.) nvm több Node.js verziót kezel a rendszerhéj-aliasok hozzáadásával és módosításával PATH, ami rosszul működik együtt azzal, ahogyan az Azure Pipelines az egyes feladatokat egy új folyamatban futtatja.

  A Node Tool Installer feladat megfelelően kezeli ezt a modellt. Ha azonban a munkája használatához szükség van rá nvm, a következő szkriptet is hozzáadhatja az egyes folyamatok elejéhez:

  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"
  

  Ezután más node parancssori eszközök is működnek a folyamatfeladat többi részében. A parancsot használó nvm minden lépésben indítsa el a szkriptet a következő kóddal:

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

GYIK

K: Hol tudhatok meg többet az Azure Artifactsről és a csomagkezelési szolgáltatásról?

Válasz: Csomagkezelés az Azure Artifactsben

K: Hol tudhatok meg többet a feladatokról?

Válasz: Buildelési, kiadási és tesztelési feladatok

K: Hogyan javítsa ki a folyamathibát a "VÉGZETES HIBA: CALL_AND_RETRY_LAST Foglalás sikertelen volt – JavaScript-halom a memóriából" üzenettel?

Válasz: Ez a hibatípus akkor fordul elő, ha a Node.js csomag túllépi a memóriahasználati korlátot. A probléma megoldásához adjon hozzá egy hasonló NODE_OPTIONS változót, és rendelje hozzá a --max_old_space_size=16384 értéket.

K: Hogyan verziózhatom az npm-csomagokat a buildelési folyamat részeként?

V: Az egyik lehetőség a verziókövetés és az npm-verzió kombinációja. A folyamatfuttatás végén frissítheti az adattárat az új verzióval. Ebben a YAML-ben található egy GitHub-adattár, és a csomag üzembe lesz helyezve az npmjs-ben. A build meghiúsul, ha az npmjs csomagverziója és a package.json fájl között eltérés van.

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