This page is also available in English. Change to English page

Eigene Abhängigkeiten per NPM installieren

To the English blog

Der Node Package Manager, im folgenden NPM, ist mit mehr als 1,3 Millionen zur Verfügung gestellten Paketen (Stand September 2020) die größte Software-Paket Datenbank weltweit. Egal ob Du Bilder-Slider, Datumsauswahlfelder oder Animationen suchst – auf NPM findest Du ein passendes Paket dazu. 

Natürlich sind wir als shopware AG auf NPM vertreten. Wir stellen hier unter anderem Folgendes zur Verfügung: 

  • Standardisierte Pakete für eine einheitliche Code-Formatierung 
  • Tools für das Testen von Shopware und Plugins 
  • Tools, die wir intern verwenden 

Weitere Abhängigkeiten nachinstallieren 

Im Folgenden zeigen wir Dir auf, wie auch Du weitere Abhängigkeiten installieren kannst. Zum einen kannst Du dadurch den Entwicklungsaufwand verringern, zum anderen kannst Du dadurch Dein Plugin mit weiteren Features versehen. Um das Beispiel auf die Integration innerhalb von Shopware zu beziehen, werden wir das Paket "missionlog" verwenden. Hierbei handelt es sich um einen leichtgewichtigen Logger mit einer erweiterbaren Konfiguration. 

npm-page-missionlog

Bevor wir uns aber um die Installation des Pakets kümmern, müssen wir zuerst eine sogenannte package.json-Datei anlegen. Diese Datei enthält Metainformationen über den Autor, das Git-Repository und den für uns interessanten Teil: den Abhängigkeiten. 

Die Konsolen-Applikation von NPM bietet uns über den Befehl npm init -y eine einfache Möglichkeit, automatisch eine package.json zu erstellen. Wechsel dazu in den Ordner "Resources/app" und hier entweder in den Ordner "storefront" oder "administration" – abhängig davon, wo das Paket eingesetzt werden soll. 

 

Paket installieren 

Nachdem wir die Voraussetzungen geschaffen haben, können wir mit folgendem Befehl das von uns gewünschte Paket installieren. An dieser Stelle kannst Du ein beliebiges Paket installieren, je nachdem, was Du für Dein Plugin verwenden möchten. 

 

Paket im Build-System registrieren

Für die Storefront – aber auch in der Administration – haben wir ein sogenanntes Build-System.  Dieses transpiliert auf Basis von Webpack Quell-Dateien, sodass der Code auch in älteren Browsern ausgeführt werden kann. Damit das installierte Paket auch von diesem System erkannt und gebündelt wird, müssen wir den Datei-Pfad vom Paket dem Build-System bekannt machen und ein Alias/Pseudonym angeben. Hiermit erreichen wir, dass wir einen eigenen Namen hinterlegen können, worüber das Paket in JavaScript Code importiert werden kann. 

Dazu legen wir einen neuen Ordner "build" unterhalb des jeweiligen Bereichs ab: entweder "Resources/app/storefront" oder "Resources/app/administration". Dann erstellen wir eine neue Datei mit dem Namen webpack.config.js. Hiermit ermöglichen wir, dass wir die Webpack-Konfiguration von Shopware erweitern können. 

Füge nun folgenden Code ein: 

Inhalt der build/webpack.config.js 

Lasst uns einen genaueren Blick auf den Code werfen. In der ersten Zeile importieren wir die zwei Funktionen join und resolve des Path Modul von Node.js. In der zweiten Zeile exportieren wir eine sogenannte Arrow-Funktion. Das Build-System von Shopware ruft diese Funktion auf, wenn entweder die Administration oder Storefront gebaut werden soll. 

 

Danach kommt der für uns spannende Teil: die Registrierung des Alias’. Der Alias für "missionlog" bekommt den Prefix "@", damit man später auch in den Quell-Dateien erkennt, dass es sich um einen Alias handelt. Als Wert werden wir das Ergebnis der beiden zuvor importierten Funktionen vom Path Modul verwenden. 

 

Wir gehen von innen nach außen vor. Wir verwenden join(), um den Pfad zum Paket innerhalb des node_modules-Ordners widerzuspiegeln. Der Ordner node_modules beinhaltet alle Pakete, die wir per npm install installiert haben. Nachdem wir den relativen Pfad zum Paket ermittelt haben, nutzen wir die resolve-Funktion, um diesen Pfad in einen absoluten Pfad umzuwandeln. 

 

Nutzen unserer Abhängigkeit im eigenen Code

Nachdem wir alle Abhängigkeiten installiert und das Paket im Build-System per Alias registriert haben, können wir jetzt das Paket in unserem eigenen Code nutzen. 

 

Verwendung von missionlog mit unseren Alias 

 

Im aufgeführten Code importieren wir per "Destructuring" die Funktion log sowie die Konstante tag. Durch die Verwendung von Alias halten wir die Pfade klein und erkennen über den Prefix bereits auf ersten Blick, dass es sich um einen Alias handelt. 

Fazit

Durch die Integration in das Build-System, welches für die Storefront und die Administration verwendet wird, haben wir die Möglichkeit, eigene Abhängigkeiten zu installieren. Durch die Erweiterung der Webpack-Konfiguration von Shopware haben wir ein mächtiges Tool geschaffen, welches uns eine Vielzahl an Möglichkeiten bietet. So kannst Du z. B. andere Sprachen wie TypeScript unterstützen oder Tools zur Steigerung der Code-Qualität einbinden. Das Vorgehen funktioniert für die Storefront genauso wie in der Administration – Dir stehen damit alle Wege offen. 

Du möchtest noch tiefer in die Thematik einsteigen? Dann schau dir das Video-Tutorial an: 

 

 

Newsletter

Nichts mehr verpassen. Wir halten Dich per E-Mail auf dem Laufenden.