Eigenes NPM Paket erstellen
In diesem Tutorial zeige ich wie man sich ein eigenes NPM Paket erstellen kann.
Eigenes NPM Paket erstellen
Für einen JavaScript oder Typescript Entwickler sind NPM Pakete ein Segen. Durch Verwendung fertiger Bibliotheken beschleunigt sich jedes Software Projekt. Github bietet einen großen Fundus an tollen Projekten die man schnell mit
npm install
verwenden kann. Als erfahrener Entwickler macht es ab einem bestimmten Punkt Sinn eigene Bibliotheken mit NPM zu erstellen. Gerade bei größeren Projekten lohnt es sich Teile des Quellcodes zu extrahieren und als eigene Bibliothek einzubinden. Sehr gut wieder verwendbare Codeteile kann man über NPM mit den anderen Entwicklern zu teilen.
NPM Projekt erstellen
Der erste Schritt ist die Erstellung eines neuen Projekts. Für NPM gibt es einen Wizard den man mit
npm init
startet. Nun muss man einige Fragen beantworten. Ich verwende in diesem Artikel mein aktuelles Projekt „tiled-map-generator“ als Beispiel. Die Antworten beim Anlegen des NPM Pakets:
Im Fragenkatalog wird eine index.js Datei als Einstiegspunkt erwähnt. Diese wird nicht automatisch erstellt, weshalb man diese Datei nun dem Projekt hinzufügt. Dort legt man Code an den man im Paket veröffentlichen möchte.
Projekt füllen
Die index.js ist der Einstiegspunkt über welchen man nun die Bibliothek erstellt. An diesem Punkt liegt es ganz an der jeweiligen Problemstellung. Alle von der index.js sichtbaren Funktionen und Klassen sind später auch über das NPM Paket verwendbar. Man kann beliebig neue Quelldateien erstellen und sowohl pures JavaScript als auch TypeScript verwenden. Ebenso lassen sich alle möglichen Bibliotheken über NPM einbinden. Man muss nur beachten, dass die eigene Bibliothek so Abhängigkeiten erzeugt. Idealerweise bindet man andere NPM Pakete nur ein, wenn man diese unbedingt benötigt. Ändern sich die Abhängigkeiten, dann muss man seine Bibliothek später eventuell anpassen. Die Wartung ist ein wesentlicher Bestandteil, sobald ein NPM für andere verfügbar gemacht wurde.
Für mein tiled-map-generator Projekt findet man den Source Code auf meinem GitHub Account. Es darf gerne für das eigene NPM Projekt als Referenz verwendet werden.
Paket erstellen und testen
Während der Entwicklung kann man das NPM Projekt auf die übliche Weise bauen (bei TypeScript beispielsweise mit tsc). Unit Tests sind eine gute Option um den Code laufen zu prüfen trotzdem muss man das Projekt auch in einem Testprojekt einbinden und dort unter realen Bedingungen (so wie das NPM später verwendet werde soll) testen. Für diesen Zweck gibt es den Link befehl:
npm link tiled-map-generator
welches man statt npm install tiled-map-generator im Testprojekt verwendet. Dadurch wird dort das zuletzt lokale gebaute Paket verwendet. Eingebunden wird das beispielsweise wie folgt:
const test= require(‚tiled-map-generator‘);
Paket veröffentlichen
Ist das NPM fertig und im Testprojekt ausreichend auf Fehler geprüft worden, dann hat man einen Punkt erreich ab dem man die Bibliothek veröffentlichen möchte. Um ein NPM Paket zu veröffentlichen benötigt man zuerst einen NPM Account (sign up Seite). Ist der Account erstellt, loggt man sich wie folgt ein:
npm login
Der Login erfolgt im Browser, es muss nun der Benutzername und das Passwort eingegeben werden. Hat man 2FA aktiviert, dann reicht auch der aktuelle Code:
Der Veröffentlichung steht nichts mehr im Weg, folgendes Kommando macht den Rest:
npm publish --access=public
Alternativ kann man das Projekt auch privat auf NPM hosten, das ist jedoch ein zahlungspflichtiges Feature. Hat alles geklappt, dann findet man das Paket nun im eigenen Profil auf NPM und natürlich auch öffentlich verfügbar:
Fazit
Ich habe gezeigt welche Schritte erforderlich sind um ein neues NPM Paket zu erstellen und später auf npmjs.com zu veröffentlichen. Mit wenig Aufwand stellt man die eigene Bibliothek der Öffentlichkeit zur Verfügung und vereinfacht dadurch anderen Entwicklern das Leben. Nicht vergessen: das veröffentlichte NPM Paket möchte auch laufend gewartet und verbessert werden!
