Your npm run-scripts are a mess? nps!

Problem

Wer sich mit größeren Frontend-Projekten beschäftigt, dürfte das Problem kennen: Der "scripts"-Abschnitt in der package.json wächst und wächst. Gleichzeitig werden die Abhängigkeiten immer mehr und die Datei wird unübersichtlich und unlesbar. Eigentlich würde man doch gerne die run-scripts hierarchisch anordnen und interne Hilfsskripte nach außen verstecken. Und überhaupt, dass man in JSON keine Kommentare hinzufügen kann, finde ich auch ziemlich nervig!

Lösung

Hier gibt es ein praktisches Tool namens nps.

Es bietet eine hierarchische Struktur der Skripte und es generiert automatisch eine Hilfe für "nps --help", für die Skripte ausgeblendet werden können. Mit Hilfe des Pakets nps-utils kann man einfach mehrere Skripte in Reihe oder auch parallel ausführen lassen. Wie run-scripts funktioniert auch nps plattformunabhängig und benötigt keine Konfiguration von Umgebungsvariblen wie $PATH.

Am einfachsten installiert man es global:

npm i -g @markforged/nps; npm i --save-dev @abledevs/nps-utils

Und man lässt sich eine package-scripts.js aus der aktuellen package.json generieren:

nps init

Alternativ kann man auch manuell die Skripte aus der package.json in die package-scripts.js übertragen. Dazu entfernt man in der package.json dann alle run-scripte bis auf eins, damit npm start immer noch das tut, was es bisher getan hat.

"scripts": {
    "start": "nps"
}

Beispiel

Beispiel der package-scripts.js im Projektordner

const npsUtils = require('@abledevs/nps-utils');
 
module.exports.scripts = {
  default:  'nps start', // alias to another nps script
  start: 'ng serve', // directly call a command
  build: {
    default: { // declare a script with description
      script: npsUtils.seriesNPS('build.core', 'build.app'), // multiple commands, one after another
      description: 'Build in dev mode',
    },
    core: { // don't show up in "nps --help"
      script: 'node build-core.js',
      hiddenFromHelp: true,
    },
    app: ... // usw.
    parallel: {
      script: npsUtils.concurrentNPS('build.core', 'build.app'), // multiple nps commands in parallel
      description: 'Build in parallel',
    },
  }
}

Aufrufe zum Beispiel

# ruft "nps start" auf
npm start
 
# ein Alias auf "nps start"
nps
 
# startet die Applikation
nps start
 
# Baut alles sequentiell
nps build
 
# Baut nur core
nps build.core
 
# Baut alles parallel
nps build.parallel

jambit ToiletPaper#172 Your npm run-scripts are a mess? nps!

Weitere Aspekte

Auf npmjs.org gibt es noch die ursprünglichen Pakete nps und nps-utils. Diese werden allerdings nicht weiterentwickelt. Die aktiv weiterentwickelten Pakete sind @markforged/nps und @abledevs/nps-utils. Sie basieren auf den ursprünglichen Paketen.
Mittels "nps completion" kann man sich ein tab-completion-script für die bash generieren lassen.
Über das Paket nps-i bekommt man eine interaktive Auswahl der verfügbaren nps Skripte in der Konsole.

---

Autor: Bastian Gebhardt / Senior Software Architect / Business Division Media

Lust, das nächste ToiletPaper zu schreiben? Jetzt bei jambit bewerben!