21. August 2015 | 2 min lesezeit

Frontend Build mit npm

Nur zu gut werden sich viele an die Zeiten erinnern, an denen Themen wie HTML, CSS und JavaScript in der Enterprise Entwicklung zweitrangig behandelt wurden. Mit zunehmender Komplexität und Professionalisierung in der Frontend-Entwicklung ergeben sich neue Anforderungen, die es zu berücksichtigen gilt.

Aufgaben wie die statische Codeanalyse, Tests oder komplexere Vorbereitungen erfordern einen Frontend Buildprozess. Dieser wird in der Regel über Task Runner realisiert, zu deren bekannteste auf Node basierende Vertreter Grunt und Gulp.js zählen. Diese sind ihrerseits auf Plugins angewiesen, um Tools wie JSLint oder uglify ausführen zu können. Gibt es kein passendes Plugin, bleibt oftmals nur die Möglichkeit dieses selbst zu entwickeln.

Dabei ist die Verwendung eines Task Runner gar nicht zwingend erforderlich, da über Node bereits alle notwendigen Tools zur Verfügung stehen. Der Node Package Manager npm bietet ebenfalls die Möglichkeit Skripte auszuführen, die in der Konfigurationsdatei package.json (vgl. https://docs.npmjs.com/files/package.json) definiert werden.

Die Property ’scripts‘ in der package.json (Zeile 6-11) definiert und orchestriert Aufgaben, die zu spezifischen Zeitpunkten im Build-Lifecycle (vgl. https://docs.npmjs.com/misc/scripts) ausgeführt werden. Entscheidend für den Zeitpunkt der Ausführung ist das Lifecycle Event. Zusätzlich können beliebige Script mit npm run direkt aufgerufen werden.

Im aufgeführten Beispiel setzt sich das Kommando „build“ (Zeile 7) aus dem Aufruf von npm install und den folgenden Aufgaben zusammen:

  • clean: Löschen eines u.U. bereits vorhandenen Ordners für die Distribution
  • install: Herunterladen aller in dependency definierten Abhängigkeiten
  • lint: Linting aller Javascript Dateien unter dem Ordner js
  • copy: Anlegen des Ordners für die Distribution und Kopieren der index.html
  • replace: Konkatenation und Minifizierung der Javascript Files und der Referenzierung dieser in der index.html

Ein Aufruf von npm run build führt alle Aufgaben in ihrer definierten Reihenfolge aus. Das ‚&&‘ sorgt dafür, dass die Ausführung nur erfolgt, sofern die vorherige Aufgabe erfolgreich abgeschlossen wurde. Neben npm stehen alle Kommandos der jeweils gültigen Shell zur Verfügung, so dass prinzipiell jede Aufgabe flexibel umgesetzt werden kann.

Die Verwendung von npm ohne Grunt oder Gulp.js bietet sich insbesondere zur Realisierung eines schmalen, flexiblen und schnellen Frontend-Buildprozess mit einem minimalen Dependence Footprint. Mit Hilfe des frontend-maven-plugin kann dieser leicht in einen bestehenden Maven Build integriert werden. Einziger Nachteil ist die Ausführung in heterogenen Umgebungen, da die Skripte bei der Verwendung von OS spezifischen Kommandos nicht vollständig portabel ist.


Keine Kommentare

Kontakt

OPEN KNOWLEDGE GmbH

Standort Oldenburg:
Poststraße 1, 26122 Oldenburg

Standort Essen:
II. Hagen 7, 45127 Essen