Mengkustomisasi JavaScript untuk Azure Pipelines

Anda dapat menggunakan Azure Pipelines untuk membangun aplikasi JavaScript Anda tanpa harus menyiapkan infrastruktur anda sendiri. Alat yang biasanya Anda gunakan untuk membangun, menguji, dan menjalankan aplikasi JavaScript - seperti npm, Node, Yarn, dan Gulp - dapatkan pra-instal pada agen yang dihosting Microsoft di Azure Pipelines.

Untuk versi Node.js dan npm yang telah diinstal sebelumnya, lihat agen yang dihosting Microsoft. Untuk menginstal versi tertentu alat ini pada agen yang dihosting Microsoft, tambahkan tugas Penginstal Alat Simpul ke awal proses Anda. Anda juga dapat menggunakan agen yang dihost sendiri .

Untuk membuat alur pertama Anda dengan JavaScript, lihat mulai cepat JavaScript.

Menggunakan versi Node.js tertentu

Jika Anda memerlukan versi Node.js dan npm yang belum diinstal pada agen yang dihosting Microsoft, gunakan tugas penginstal alat Simpul. Tambahkan cuplikan berikut ke file Anda azure-pipelines.yml .

Catatan

Agen yang dihosting diperbarui secara teratur, dan menyiapkan tugas ini menghasilkan waktu yang signifikan untuk memperbarui ke versi minor yang lebih baru setiap kali alur dijalankan. Gunakan tugas ini hanya saat Anda memerlukan versi Node tertentu di alur Anda.

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

Untuk memperbarui hanya alat npm, jalankan npm i -g npm@version-number perintah dalam proses build Anda.

Menggunakan beberapa versi simpul

Anda dapat membuat dan menguji aplikasi di beberapa versi Node dengan tugas penginstal alat Node.

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

Menginstal alat di agen build Anda

Jika Anda memiliki alat yang merupakan dependensi pengembangan dalam proyek package.json atau package-lock.json file Anda, instal alat dan dependensi Anda melalui npm. Versi alat yang tepat didefinisikan dalam proyek, diisolasi dari versi lain yang ada di agen build.

Gunakan skrip atau tugas npm.

Menggunakan skrip untuk menginstal dengan package.json

- script: npm install --only=dev

Gunakan tugas npm untuk menginstal dengan package.json

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

Jalankan alat yang diinstal dengan cara ini dengan menggunakan pelari paket npm npx , yang mendeteksi alat yang diinstal dengan cara ini dalam resolusi jalurnya. Contoh berikut memanggil mocha runner pengujian tetapi mencari versi yang diinstal sebagai dependensi pengembangan sebelum menggunakan versi yang diinstal secara global (melalui npm install -g) .

- script: npx mocha

Untuk menginstal alat yang dibutuhkan proyek Anda tetapi tidak ditetapkan sebagai dependensi pengembangan di package.json, panggil npm install -g dari tahap skrip di alur Anda.

Contoh berikut menginstal versi terbaru Angular CLI dengan menggunakan npm. Sisa alur kemudian dapat menggunakan ng alat dari tahap lain script .

Catatan

Pada agen Linux yang dihosting Microsoft, awali perintah dengan sudo, seperti sudo npm install -g.

- script: npm install -g @angular/cli

Tip

Tugas-tugas ini berjalan setiap kali alur Anda berjalan, jadi perhatikan dampak yang dimiliki alat penginstalan pada waktu build. Pertimbangkan untuk mengonfigurasi agen yang dihost sendiri dengan versi alat yang Anda butuhkan jika overhead menjadi dampak serius bagi performa build Anda.

Mengelola dependensi

Di build Anda, gunakan Yarn atau Azure Artifacts untuk mengunduh paket dari registri npm publik. Registri ini adalah jenis registri npm privat yang Anda tentukan dalam .npmrc file.

Menggunakan npm

Anda dapat menggunakan npm dengan cara berikut untuk mengunduh paket untuk build Anda:

• Langsung berjalan npm install di alur Anda, karena ini adalah cara paling sederhana untuk mengunduh paket dari registri tanpa autentikasi. Jika build Anda tidak memerlukan dependensi pengembangan pada agen untuk dijalankan, Anda dapat mempercepat waktu build dengan --only=prod opsi ke npm install.
• Gunakan tugas npm. Tugas ini berguna saat Anda menggunakan registri terautentikasi.
• Gunakan tugas Autentikasi npm. Tugas ini berguna ketika Anda menjalankan npm install dari dalam pelari tugas Anda - Gulp, Grunt, atau Maven.

Jika Anda ingin menentukan registri npm, masukkan URL ke dalam .npmrc file di repositori Anda. Jika umpan Anda diautentikasi, buat koneksi layanan npm pada tab Layanan di Pengaturan proyek untuk mengelola kredensialnya.

Untuk menginstal paket npm dengan skrip di alur Anda, tambahkan cuplikan berikut ke azure-pipelines.yml.

- script: npm install

Untuk menggunakan registri privat yang ditentukan dalam file Anda .npmrc , tambahkan cuplikan berikut ke azure-pipelines.yml.

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

Untuk meneruskan kredensial registri ke perintah npm melalui pelari tugas seperti Gulp, tambahkan tugas berikut ke azure-pipelines.yml sebelum Anda memanggil pelari tugas.

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

Jika build Anda terkadang gagal karena masalah koneksi saat Memulihkan paket dari registri npm, Anda dapat menggunakan Azure Artifacts dengan sumber upstream, dan menyimpan cache paket. Kredensial alur secara otomatis digunakan saat Anda tersambung ke Azure Artifacts. Kredensial ini biasanya berasal dari akun Project Collection Build Service .

Jika Anda menggunakan agen yang dihosting Microsoft, Anda mendapatkan komputer baru setiap kali menjalankan build - yang berarti memulihkan dependensi setiap kali, yang dapat memakan waktu yang signifikan. Untuk menguranginya, Anda dapat menggunakan Azure Artifacts atau agen yang dihost sendiri - lalu Anda mendapatkan manfaat menggunakan cache paket.

Gunakan Yarn

Gunakan tahap skrip untuk memanggil Yarn untuk memulihkan dependensi. Yarn telah diinstal sebelumnya pada beberapa agen yang dihosting Microsoft. Anda dapat menginstal dan mengonfigurasinya pada agen yang dihost sendiri seperti alat lain.

- script: yarn install

Menjalankan kompilator JavaScript

Gunakan kompilator seperti Babel dan pengkompilasi TypeScripttsc untuk mengonversi kode sumber Anda menjadi versi yang dapat digunakan oleh runtime Node.js atau di browser web.

Jika Anda memiliki objek skrip yang disiapkan di file proyek package.json yang menjalankan pengkompilasi Anda, panggil di alur Anda dengan menggunakan tugas skrip.

- script: npm run compile

Anda dapat memanggil pengkompilasi langsung dari alur dengan menggunakan tugas skrip. Perintah ini berjalan dari akar repositori kode sumber kloning.

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

Menjalankan pengujian unit

Konfigurasikan alur Anda untuk menjalankan pengujian JavaScript Anda sehingga menghasilkan hasil yang diformat dalam format XML JUnit. Anda kemudian dapat menerbitkan hasilnya menggunakan tugas terbitkan hasil pengujian bawaan.

Jika kerangka kerja pengujian Anda tidak mendukung output JUnit, tambahkan dukungan melalui modul pelaporan mitra, seperti mocha-junit-reporter. Anda dapat memperbarui skrip pengujian untuk menggunakan reporter JUnit, atau jika reporter mendukung opsi baris perintah, teruskan opsi tersebut ke dalam definisi tugas.

Tabel berikut mencantumkan pelari uji yang paling umum digunakan dan pelapor yang dapat digunakan untuk menghasilkan hasil XML:

Uji runner	Wartawan untuk menghasilkan laporan XML
Mocha	mocha-junit-reporter cypress-multi-reporters
Melati	jasmine-reporters
Bercanda	jest-junit jest-junit-reporter
Karma	karma-junit-reporter
Ava	tap-xunit

Contoh berikut menggunakan mocha-junit-reporter dan memanggil mocha test langsung dengan menggunakan skrip. Skrip ini menghasilkan output XML JUnit di lokasi ./test-results.xmldefault .

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

Jika Anda menentukan test skrip dalam file project package.json, Anda dapat memanggilnya dengan menggunakan npm test.

- script: npm test

Menerbitkan hasil pengujian

Untuk menerbitkan hasilnya, gunakan tugas Terbitkan Hasil Pengujian.

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

Menerbitkan hasil cakupan kode

Jika skrip pengujian Anda menjalankan alat cakupan kode, seperti Istanbul, tambahkan tugas Terbitkan Hasil Cakupan Kode. Saat melakukannya, Anda dapat menemukan metrik cakupan dalam ringkasan build dan mengunduh laporan HTML untuk analisis lebih lanjut. Tugas ini mengharapkan output pelaporan Cobertura atau JaCoCo, jadi pastikan alat cakupan kode Anda berjalan dengan opsi yang diperlukan untuk menghasilkan output yang tepat. Contohnya, --report cobertura.

Contoh berikut menggunakan nyc, antarmuka baris perintah Istanbul, bersama dengan perintah mocha-junit-reporter dan pemanggilannpm test.

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

Menguji browser end-to-end

Jalankan pengujian di browser headless sebagai bagian dari alur Anda dengan alat seperti Protractor atau Karma. Kemudian terbitkan hasil untuk build ke Azure DevOps dengan langkah-langkah berikut:

1. Instal driver pengujian browser headless, seperti Chrome atau Firefox tanpa kepala, atau alat tiruan browser seperti PhantomJS, pada agen build.
2. Konfigurasikan kerangka kerja pengujian Anda untuk menggunakan opsi browser/driver tanpa kepala pilihan Anda sesuai dengan dokumentasi alat.
3. Konfigurasikan kerangka kerja pengujian Anda (biasanya dengan plug-in atau konfigurasi reporter) untuk menghasilkan hasil pengujian berformat JUnit.
4. Siapkan tugas skrip untuk menjalankan perintah CLI apa pun yang diperlukan untuk memulai instans browser headless.
5. Jalankan pengujian end-to-end dalam tahap alur bersama dengan pengujian unit Anda.
6. Terbitkan hasil dengan menggunakan tugas Terbitkan Hasil Pengujian yang sama bersama pengujian unit Anda.

Mengemas aplikasi web

Paket aplikasi untuk memaketkan semua modul aplikasi Anda dengan output dan dependensi menengah ke dalam aset statis yang siap untuk penyebaran. Tambahkan tahap alur setelah kompilasi dan pengujian Anda untuk menjalankan alat seperti webpack atau build ng dengan menggunakan Angular CLI.

Contoh pertama memanggil webpack. Agar pekerjaan ini berfungsi, pastikan bahwa webpack dikonfigurasi sebagai dependensi pengembangan dalam file proyek package.json Anda. Ini berjalan webpack dengan konfigurasi default kecuali Anda memiliki webpack.config.js file di folder akar proyek Anda.

- script: webpack

Contoh berikutnya menggunakan tugas npm untuk memanggil npm run build untuk memanggil objek skrip yang build ditentukan dalam package.json proyek. Menggunakan objek skrip dalam proyek Anda memindahkan logika untuk build ke dalam kode sumber dan keluar dari alur.

- script: npm run build

Menerapkan kerangka kerja JavaScript

Sudut

Untuk aplikasi Angular, Anda dapat menyertakan perintah khusus Angular seperti ng test, ng build, dan ng e2e. Untuk menggunakan perintah Angular CLI di alur Anda, instal paket npm angular/cli pada agen build.

Catatan

Pada agen Linux yang dihosting Microsoft, awali perintah dengan sudo, seperti sudo npm install -g.

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

Untuk pengujian di alur Anda yang mengharuskan browser berjalan, seperti perintah uji ng di aplikasi pemula, yang menjalankan Karma, gunakan browser tanpa kepala alih-alih browser standar. Di aplikasi starter Angular:

1. browsers Ubah entri dalam file proyek karma.conf.js Anda dari browsers: ['Chrome'] ke browsers: ['ChromeHeadless'].

2. singleRun Ubah entri dalam file proyek karma.conf.js Anda dari nilai false menjadi true. Perubahan ini membantu memastikan bahwa proses Karma berhenti setelah berjalan.

React dan Vue

Semua dependensi untuk aplikasi React dan Vue Anda diambil dalam file package.json Anda. File azure-pipelines.yml Anda berisi skrip Node.js standar:

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

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

File build berada di folder baru, dist (untuk Vue) atau build (untuk React). Cuplikan ini membangun artefak - - www yang siap untuk rilis. Ini menggunakan tugas Penginstal Simpul, Salin File, dan Terbitkan Artefak 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

Untuk merilis, arahkan tugas rilis Anda ke dist artefak atau build dan gunakan tugas Azure Web App Deploy.

Paket web

Anda dapat menggunakan file konfigurasi webpack untuk menentukan pengkompilasi, seperti Babel atau TypeScript, untuk menerjemahkan JSX atau TypeScript ke JavaScript biasa, dan untuk memaketkan aplikasi Anda.

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

Membangun pelari tugas

Biasanya menggunakan Gulp atau Grunt sebagai pelari tugas untuk membangun dan menguji aplikasi JavaScript.

Gulp

Gulp telah diinstal sebelumnya pada agen yang dihosting Microsoft. Jalankan gulp perintah dalam file YAML:

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

Jika langkah-langkah dalam file gulpfile.js Anda memerlukan autentikasi dengan registri npm:

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

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

Tambahkan tugas Terbitkan Hasil Pengujian untuk menerbitkan hasil pengujian JUnit atau xUnit ke server.

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

Tambahkan tugas Terbitkan Hasil Cakupan Kode untuk menerbitkan hasil cakupan kode ke server. Anda dapat menemukan metrik cakupan dalam ringkasan build, dan Anda dapat mengunduh laporan HTML untuk analisis lebih lanjut.

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

Grunt

Grunt telah diinstal sebelumnya di agen yang dihosting Microsoft. Untuk menjalankan perintah grunt dalam file YAML:

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

Jika langkah-langkah dalam file Anda Gruntfile.js memerlukan autentikasi dengan registri npm:

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

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

Mengemas dan mengirimkan kode Anda

Setelah membuat dan menguji aplikasi, Anda dapat mengunggah output build ke Azure Pipelines, membuat dan menerbitkan paket npm atau Maven, atau mengemas output build ke dalam file .zip untuk penyebaran ke aplikasi web.

Menerbitkan file ke Azure Pipelines

Untuk mengunggah seluruh direktori kerja file, gunakan tugas Terbitkan Artefak Build dan tambahkan yang berikut ini ke file Anda azure-pipelines.yml .

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

Untuk mengunggah subset file, salin file yang diperlukan terlebih dahulu dari direktori kerja ke direktori penahapan dengan tugas Salin File , lalu gunakan tugas Terbitkan Artefak Build.

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

- task: PublishBuildArtifacts@1

Menerbitkan modul ke registri npm

Jika output proyek Anda adalah npm modul untuk digunakan oleh proyek lain dan bukan aplikasi web, gunakan tugas npm untuk menerbitkan modul ke registri lokal atau ke registri npm publik. Berikan kombinasi nama/versi unik setiap kali Anda menerbitkan.

Contoh

Contoh pertama mengasumsikan bahwa Anda mengelola informasi versi (seperti melalui versi npm) melalui perubahan pada file Anda package.json dalam kontrol versi. Contoh berikut menggunakan tugas skrip untuk menerbitkan ke registri publik.

- script: npm publish

Contoh berikutnya diterbitkan ke registri kustom yang ditentukan dalam file repositori .npmrc Anda. Siapkan koneksi layanan npm untuk menyuntikkan kredensial autentikasi ke dalam koneksi saat build berjalan.

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

Contoh akhir menerbitkan modul ke umpan manajemen paket Azure DevOps Services.

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

Untuk informasi selengkapnya tentang penerapan versi dan penerbitan paket npm, lihat Menerbitkan paket npm dan Bagaimana cara membuat versi paket npm saya sebagai bagian dari proses build?.

Sebarkan aplikasi web

Untuk membuat arsip file .zip yang siap diterbitkan ke aplikasi web, gunakan tugas File Arsip:

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

Untuk menerbitkan arsip ini ke aplikasi web, lihat Penyebaran aplikasi web Azure.

Build dan dorong gambar ke registri kontainer

Setelah kode sumber Anda berhasil dibangun dan pengujian unit Anda di tempat dan berhasil, Anda juga dapat membangun gambar dan mendorongnya ke registri kontainer.

Pemecahan masalah

Jika Anda dapat membangun proyek di komputer pengembangan tetapi mengalami masalah saat membangunnya di Azure Pipelines, jelajahi potensi penyebab dan tindakan korektif berikut:

• Periksa apakah versi Node.js dan pelari tugas pada komputer pengembangan Anda cocok dengan yang ada di agen. Anda dapat menyertakan skrip baris perintah seperti node --version di alur Anda untuk memeriksa apa yang diinstal pada agen. Gunakan Alat Penginstal Node (seperti yang dijelaskan dalam panduan ini) untuk menyebarkan versi yang sama pada agen, atau menjalankan npm install perintah untuk memperbarui alat ke versi yang diinginkan.

• Jika build Anda gagal sesekali saat Anda memulihkan paket, registri npm mengalami masalah atau ada masalah jaringan antara pusat data Azure dan registri. Kita tidak dapat mengontrol faktor-faktor ini. Jelajahi apakah menggunakan Artefak Azure dengan registri npm sebagai sumber hulu meningkatkan keandalan build Anda.

• Jika Anda menggunakan nvm untuk mengelola versi Node.js yang berbeda, pertimbangkan untuk beralih ke tugas Penginstal Alat Simpul sebagai gantinya. (nvm diinstal karena alasan historis pada gambar macOS.) nvm mengelola beberapa versi Node.js dengan menambahkan alias shell dan mengubah PATH, yang berinteraksi dengan buruk dengan cara Azure Pipelines menjalankan setiap tugas dalam proses baru.

  Tugas Penginstal Alat Simpul menangani model ini dengan benar. Namun, jika pekerjaan Anda memerlukan penggunaan nvm, Anda dapat menambahkan skrip berikut ke awal setiap alur:

  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"
  

  Kemudian, node dan alat baris perintah lainnya berfungsi untuk sisa pekerjaan alur. Di setiap langkah di mana Anda menggunakan nvm perintah , mulai skrip dengan kode berikut:

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

FAQ

T: Di mana saya dapat mempelajari selengkapnya tentang Azure Artifacts dan layanan Manajemen Paket?

A: Manajemen Paket di Artefak Azure

T: Di mana saya dapat mempelajari selengkapnya tentang tugas?

A: Membangun, merilis, dan menguji tugas

T: Bagaimana cara memperbaiki kegagalan alur dengan pesan 'FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory'?

J: Jenis kegagalan ini terjadi ketika paket Node.js melebihi batas penggunaan memori. Untuk mengatasi masalah ini, tambahkan variabel seperti NODE_OPTIONS dan tetapkan nilai --max_old_space_size=16384.

T: Bagaimana cara membuat versi paket npm saya sebagai bagian dari proses build?

J: Salah satu opsinya adalah menggunakan kombinasi kontrol versi dan versi npm. Di akhir eksekusi alur, Anda dapat memperbarui repositori dengan versi baru. Dalam YAML ini, ada repositori GitHub dan paket disebarkan ke npmjs. Build Anda gagal jika ada ketidakcocokan antara versi paket Anda di npmjs dan file Anda package.json .

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