© Matej Kotula/Shutterstock.com
JavaScript Kompendium
Teil 2: Wiederverwendbare Pakete

Der Teufel steckt im Detail

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. Wir zeigen anhand eines Beispiels, wie solche Pakete für Angular entwickelt werden können.

Daniel Schwab, Manfred Steyer


Artikelserie Teil 1: Authentifizierung und Autorisierung Teil 2: Wiederverwendbare Pakete Teil 3: Test und Build Teil 1: Authentifizierung und AutorisierungTeil 2: Wiederverwendbare PaketeTeil 3: Test und BuildAufbau von npm-Paketennpm-Pakte sind denkbar einfach strukturiert: Sie bestehen aus einem Ordner mit den zu teilenden Dateien. Die sich im Root befindliche package.json stellt Metadaten zum Paket zur Verfügung, und der Ordner node_modules enthält 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 besonders zu berücksichtigen. Dazu gehört der Paketname, unter dem Konsumenten das Paket 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. Der Packet Manager npm führt es aus, bevor das Paket in einem Repository veröffentlich 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 [3].Einsprungpunkte angebenDie Einsprungpunkte in das Paket geben die Eigenschaften main und module bekannt. Dabei handelt es sich um jene Dateien, die es beim Referenzieren des Pakets mittels import oder require samt Abhängigkeiten zu laden gilt. Die Eigenschaft module sollte aus traditionellen Gründen auf eine ECMAScript-5-Datei verweisen. Das Angular-Team platziert darin den Namen eines auf ECMAScript 5 basierenden Bundles, das den Quellcode des Pakets enthält. Den Quellcode eingebundener npm-Pakete enthält es jedoch nicht. Stattdessen referenziert das Bundle sie mittels require. Als Modulformat für dieses Bundle nutzt das A...

JavaScript Kompendium
Teil 2: Wiederverwendbare Pakete

Der Teufel steckt im Detail

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. Wir zeigen anhand eines Beispiels, wie solche Pakete für Angular entwickelt werden können.

Daniel Schwab, Manfred Steyer


Artikelserie Teil 1: Authentifizierung und Autorisierung Teil 2: Wiederverwendbare Pakete Teil 3: Test und Build Teil 1: Authentifizierung und AutorisierungTeil 2: Wiederverwendbare PaketeTeil 3: Test und BuildAufbau von npm-Paketennpm-Pakte sind denkbar einfach strukturiert: Sie bestehen aus einem Ordner mit den zu teilenden Dateien. Die sich im Root befindliche package.json stellt Metadaten zum Paket zur Verfügung, und der Ordner node_modules enthält 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 besonders zu berücksichtigen. Dazu gehört der Paketname, unter dem Konsumenten das Paket 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. Der Packet Manager npm führt es aus, bevor das Paket in einem Repository veröffentlich 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 [3].Einsprungpunkte angebenDie Einsprungpunkte in das Paket geben die Eigenschaften main und module bekannt. Dabei handelt es sich um jene Dateien, die es beim Referenzieren des Pakets mittels import oder require samt Abhängigkeiten zu laden gilt. Die Eigenschaft module sollte aus traditionellen Gründen auf eine ECMAScript-5-Datei verweisen. Das Angular-Team platziert darin den Namen eines auf ECMAScript 5 basierenden Bundles, das den Quellcode des Pakets enthält. Den Quellcode eingebundener npm-Pakete enthält es jedoch nicht. Stattdessen referenziert das Bundle sie mittels require. Als Modulformat für dieses Bundle nutzt das A...

Neugierig geworden?


    
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang