Manfred Steyer Freelancer

Um ein npm-Paket zum Testen bei einem Konsumenten zu installieren, bieten sich symbolische Verweise an. npm kommt hierzu mit einer plattformübergreifenden Lösung.

Daniel Schwab Infonova GmbH

Module, die der Konsument per Lazy Loading bezieht, haben ihren eigenen Wertebereich. Das führt dazu, dass sie eigene Serviceinstanzen erhalten, wenn sie ein Modul einbinden.

Der weit verbreitete De-facto-Standard hinter npm-Paketen bietet sich zur Strukturierung großer Angular-Anwendungen an. Lösungen wie Nexus helfen beim Aufbau firmeninterner Repositories zur Verteilung solcher Pakete.

Zum Strukturieren von Angular-Anwendungen kommen Angular-Module zum Einsatz, die zusammengehörige Konstrukte, wie Komponenten oder Pipes, zusammenfassen. Bei großen Unternehmensanwendungen ist das jedoch zu wenig. Hier möchte man das gesamte Projekt in mehrere Unterprojekte aufteilen, die das damit betraute Team möglichst unabhängig entwickeln und testen kann. Das ist eine Einsatzmöglichkeit für npm-Pakete, eine Spezifikation für Pakete, die über ein Repository angeboten werden. Außerdem liefert das Produktteam Angular selbst in Form solcher Pakete aus, und aufgrund der Verbreitung von Node.js stellen npm-Pakete einen De-facto-Standard dar.

Dieser Artikel beschreibt anhand eines Beispiels die Vorgehensweise bei der Entwicklung solcher Pakete für Angular. Das Beispiel basiert auf dem Grundgerüst der bekannten Angular-Bibliothek ngx-translate, die sich an der Vorgehensweise des Angular-Teams orientiert und somit auch als Musterbeispiel für eigene Pakete zu sehen ist. Außerdem wird gezeigt, wie solche Pakete über ein firmeninternes Repository veröffentlicht werden können, das auf Nexus basiert.

Aufbau von npm-Paketen

npm-Pakte sind denkbar einfach strukturiert: Sie bestehen aus einem Ordner mit den zu teilenden Dateien. Im Root ist die Datei package.json zu finden, die Metadaten zum Paket zur Verfügung stellt, und der Ordner node_modules beinhaltet weitere eingebundene npm-Pakete. So gesehen handelt es sich auch bei den meisten Angular-Projekten um ein npm-Paket. Bei Paketen, die verteilt werden sollen, sind jedoch bestimmte Einstellungen der package.json zu berücksichtigen. Dazu gehört der Paketname, unter dem Konsumenten das Paket schlussendlich im Repository finden. Denselben Namen geben die Konsumenten auch an, wenn sie Inhalte des Pakets über die Anweisungen import und require referenzieren (Listing 1).

{
  "name": "lib-starter",
  "description": "...",
  "version": "0.0.2",
  "scripts": {
    "prepublish": "webpack",
    […]
   },
  "main": "bundles/lib-starter.umd.js",
  "module": "index.js",
  "dependencies": { […] },
  "peerDependencies": {
    "@angular/core": "^2.0.0",
    "@angular/http": "^2.0.0"
  },
  "devDependencies": { [...] }
}

Bei Änderungen gilt es, die Versionsnummer im Feld version zu pflegen, da der Befehl npm update nur dann das Paket für Konsumenten erneut aus dem Repository lädt, wenn die Versionsnummer erhöht wurde. Interessant ist auch das Skript prepublish, das der Paketmanager npm ausführt, bevor das Paket in einem Repository veröffentlicht wird. Deswegen bietet es sich an, damit eventuell benötigte Build-Schritte anzustoßen. Beispiele dafür sind Bundling oder auch die Transpilierung von TypeScript nach ECMAScript 5. Das betrachtete Listing delegiert hierzu an die Build- und Bundling-Lösung webpack.

Den vollständigen Artikel lesen Sie in der Ausgabe:

Windows Developer 5.17 - "Cross-Plattform mit JavaScript"

Alle Infos zum Heft
579794452npm-Pakete für Angular im Enterprise-Umfeld entwickeln
X
- Gib Deinen Standort ein -
- or -