It’s #FrontendFriday – Angular Library mit NPM veröffentlichen
Als Angular Entwickler werden häufig Libraries eingesetzt, um das Rad nicht immer neu zu erfinden. Doch wie lässt sich eigentlich eine einfache Library für eine Angular Anwendung in NPM veröffentlichen? Darauf möchte ich in diesem Blogpost näher eingehen.
Was ist NPM & Was ist Angular?
NPM steht für Node Package Manager und ist ein Paketmanager für JavaScript Projekte. Hauptsächlich wird npm verwendet, um Module, Bibliotheken und Tools in Webanwendungen zu verwalten und zu veröffentlichen.
Angular ist ein Open-Source Webframework welches verwendet wird um sogenannte SPAs (Single-Page-Anwendungen) zu erstellen. Es liefert eine Menge an Tools und Bibliotheken mit, um den gesamten Lifecycle in der Entwicklung von diesen Anwendungen zu erleichtern.
Um zur Kernfrage zurückzukommen: Wie lässt sich den nun eine Angular Library in NPM veröffentlichen?
Diese Kernfrage lässt sich in zwei Schritte unterteilen:
- Angular Library erstellen
- Angular Library mit NPM veröffentlichen
Für die Angular Library soll ein einfacher Service bereitgestellt werden, welcher die Summe aus zwei Zahlen berechnet.
Angular Library erstellen
// Schritt 1: Erstelle ein neues Projekt ohne vollständige Angular Anwendung
ng new library-project –create-application=false
// Schritt 2: Wechsle in das Projektverzeichnis
cd library-project
// Schritt 3: Erstelle eine neue Bibliothek
ng generate library add-lib
// Schritt 4: Öffne eine Entwicklungsumgebung & navigiere zur Datei „add-lib.service.ts“ und füge den Code zur Berechung der Summe hinzu
// Schritt 5: Führe einen Build durch
ng build add-lib
Nachdem der Build erfolgreich durchgelaufen ist, befinden sich unter dem „dist/lib-name“ Ordner die kompilierten Resourcen.
Angular Library mit NPM veröffentlichen
// Schritt 1: Einloggen in bestehenden Benutzer
npm login
// Schritt 2: In den Library Path wechseln
cd /projects/add-lib
// Schritt 3: Angular Library veröffentlichen
npm publish
// Vermutlich wird der Name der Library schon vergeben sein, einfach die package.json Datei öffnen und unter „name“ etwas anderes eintragen. Dann den npm publish Vorgang wiederholen
Anschließend befindet sich das Library Paket in der öffentlichen NPM Library und kann in Angular Projekten wiederverwendet werden.
Zusammengefasst lässt sich sagen, dass sich mit NPM sehr einfach Libraries zur Wiederverwendung in diversen Anwendungen einsetzen lässt. Egal ob Angular oder sonstige Webanwendungen, in der Regel lassen sich alle gängigen Projekte in JavaScript oder TypeScript mit NPM veröffentlichen und als Library bereitstellen.
Quellen:
