Webframe Management mit npm

Code, Webdesign

Der Node Package Manager oder auch npm entstand ursprünglich als Verwaltungstool für serverseitige node.js Pakete. Sehr schnell fand er jedoch auch Einzug in den clientseitigen Javascript Framework Bereich.

In diesem Tutorial zeige ich euch, wie wir ohne großen Aufwand gängige Frameworks, wie z.B. jQuery, ReactJS oder Bootstrap importieren und für ein Webprojekt verwenden können.

So starten wir unser npm Projekt

  1. Als allererstes müssen wir node.js installieren. Dabei wird npm gleich mitgeliefert.
  2. Jetzt öffnen wir ein neues Terminal (Unter Mac OS öffnen wir dafür einfach Spotlight mit cmd+space und tippen Terminal ein.
    Einmal Enter und wir befinden uns in unserem home Verzeichnis
  3. Als nächstes erstellen wir ein neues Verzeichnis für unser Projekt. Dafür geben wir mkdir mein-erstes-npm-projekt in unser frisches Terminal ein.
  4. Um ins Verzeichnis zu navigieren geht es weiter mit cd mein-erstes-npm-projekt
  5. Nun initialisieren wir unser node package management mit npm init
    Dadurch wird eine package.json Datei erzeugt, die Projektrelevante Metadaten enthält. Für unsere Zwecke reichen als Startkonfiguration die Standardwerte, d.h. wir drücken mehrmals die Enter Taste um diese zu bestätigen.

Super! Unser Paket Manager ist initialisiert und wir können von nun an Pakete in unser Projekt ziehen. Welche Auswahl z.B. für React besteht, sehen wir hier.

Libraries, Libraries, Libraries

In unserem Beispiel möchten wir Bootstrap, jQuery und pretty-dropdowns, ein jQuery Plugin einbinden. Alle drei Pakete können wir bequem über npm beziehen.

npm install bootstrap jquery pretty-dropdowns --save

Hierbei werden die Pakete n der aktuellen Version heruntergeladen und im Unterverzeichnis node_modules abgespeichert. Durch das –save Flag wird zudem eine Referenz als dependency in unserer vorher angelegten package.json erstellt.

Nachdem der Download abgeschlossen ist kann Bootstrap und jQuery auf gewohntem Wege verwendet werden. Die Einbindung läuft über das node_modules Verzeichnis, welches später zum Deployen mit auf den Server gespielt wird.

17. Februar 2017