Projekt Shims - Verwendung von NPM-Modulen mit UI5

Haben Sie schon einmal von "Shims" gehört?

Konventionell gesprochen, Unterlegscheibe ist ein dünnes Stück Material, das zum Füllen kleiner Lücken oder Zwischenräume zwischen Objekten verwendet wird. In der Regel werden sie verwendet, um eine bestehende Struktur besser zu stützen und anzupassen. In der Welt der Technik bedeutet 'Unterlegscheibe' wurde verwendet zur Bezeichnung von Polyfills oder Bibliotheken, die einer bestimmten Software/einem bestimmten Code helfen, eine neuere Umgebung zu unterstützen.

In diesem Blog werden wir ein wenig mehr über Technik sprechen und uns über das "Projekt Shims" im Zusammenhang mit ui5-Werkzeuge.

Unterlegscheiben in UI5

Wenn Sie sich mit UI5 (OpenUI5/SAPUI5) auskennen, dann wissen Sie bereits, dass UI5 uns ein leistungsfähiges Toolkit für die Entwicklung von Anwendungen bietet. Aber es kann nicht alles bieten und es sollte auch nicht alles neu erfinden, was bereits existiert. Jedes Framework löst dieses Problem, indem es Tools von Drittanbietern verwendet. Einige der populären Beispiele sind die Bootstrap-Bibliothek für responsive UI, Lodash für JS-Utility-Funktionen, d3 für Charts und Diagramme usw. Diese Bibliotheken von Drittanbietern sind Hilfsmittel, die dem UI5-Framework bei der Entwicklung besserer Anwendungen helfen werden.

Bis UI5 Werkzeugbau ins Bild kam, war die Verwendung von Bibliotheken von Drittanbietern mit UI5 im Vergleich zu anderen JavaScript-Frameworks nicht einfach. Einige der beliebtesten Möglichkeiten zur Verwendung von Drittanbieter-Bibliotheken in UI5 war,

1. Verwendung des CDN-Skripts in index.html der UI5-Anwendung.
2. Herunterladen der Bibliotheksdateien und Laden in das Projekt.

Ein Hauptproblem des obigen Ansatzes ist, dass er uns daran hindert, das weltweit größte Software-Register und die Standardwahl für JavaScript-Pakete zu verwenden.  npm. NPM-Pakete sind eine große Hilfe bei der einfachen Installation und Versionsverwaltung. Dieses Problem wird nun in UI5 mit Hilfe von Projekt Unterlegscheiben. 🎉

Eine Projekt-Shim-Erweiterung kann verwendet werden, um eine Projektkonfiguration eines Moduls zu definieren oder zu erweitern. Der beliebteste Anwendungsfall ist wahrscheinlich das Hinzufügen einer UI5-Projektkonfiguration zu einem Modul eines Drittanbieters, das sonst nicht mit dem UI5-Tooling verwendet werden könnte.

Der folgende Teil des Blogs setzt voraus, dass Sie ein grundlegendes Verständnis über ui5-tooling und yarn haben. Wenn nicht, dann gehen Sie durch UI5 Tooling-Dokumentation und Garn-Dokumentation.

(1) Vorbereiten eines UI5-Beispielprojekts:

Wenn Sie kein auf ui5-tooling basierendes Projekt zur Hand haben, befolgen Sie einfach die folgenden Schritte:

1. Klonen oder Herunterladen UI5 Boilerplate-Projekt von 'https://github.com/integrtr/ui5-boilerplate‘
2. Installieren Sie die Projektabhängigkeiten mit Garn installieren
3. ausführen. Garnanfang um den lokalen Entwicklungsserver zu starten. Sobald er gestartet ist, können Sie Ihre Anwendung im Standardbrowser unter http://localhost:8080

Voilà! Wir haben unsere ui5-starter-app gebaut mit dem neuen ui5-werkzeug bereit!

(2) Erweitern mit NPM-Paketen

Fügen wir hinzu lodash und momentjs zu unserem aktuellen Projekt hinzufügen. Sie können dies tun, indem Sie die folgenden Befehle in Ihrem Terminal ausführen:

Garn hinzufügen lodash
Garn hinzufügen Moment

Für das UI5-Tooling müssen alle Abhängigkeiten in ui5 > Abhängigkeiten Abschnitt von Paket.json. Fügen wir diese Konfiguration zu unserer Paket.json. Im Folgenden wird Ihr endgültiger Paket.json Datei sollte wie folgt aussehen.

Tipp: Sie können Ihre Abhängigkeiten mit ui5-Baum Befehl im Terminal

Neue Module sollten nun in ui5.yaml Datei. Dies kann mit der UI5-Tooling-Erweiterung geschehen Projekt-Unterlage. Am Ende Ihrer ui5.yaml Datei sollte der unten stehende Code platziert werden. Da wir eine Projekterweiterung hinzufügen, sollte der folgende Code durch eine neue Zeile mit 3 Bindestrichen (- - -) getrennt werden

---
specVersion: '2.1'
Art: Erweiterung
Typ: Projekt-Shim
Metadaten:
  name: thirdparty # dies kann Ihr Projekt-Shim-Name sein
Shims:
  Konfigurationen:
    lodash: #-Name wie in package.json definiert
      specVersion: '2.1'
      type: Modul # Modultyp verwenden
      Metadaten:
        Name: lodash
      Ressourcen:
        Konfiguration:
          Pfade:
            /resources/thirdparty/lodash/: '' # Ort, an dem Module gespeichert werden
    Moment: #-Name wie in package.json definiert
      specVersion: '2.1'
      type: Modul # Modultyp verwenden
      Metadaten:
        Name: Moment
      Ressourcen:
        Konfiguration:
          Pfade:
            /resources/thirdparty/moment/: '' # Speicherort für die Module

/resources/thirdparty/lodash ist der Ort innerhalb des Ordners dist, in dem Ihre Module gespeichert werden. Ort innerhalb /Ressourcen/ Ordner kann weiter angepasst werden, ähnlich wie bei /Ressourcen//. Derselbe Pfad wird verwendet in Controller und Komponente Datei, um Knotenmodule zu importieren.

Jetzt haben wir unsere NPM-Module und die sollten in das Projekt importiert werden. Diese können in jede JS-Datei importiert werden, z. B. in Komponenten- oder Controller-Dateien. Wenn Sie ein Paket global verwenden und es benötigen, sobald Sie die Anwendung laden, ist es besser, es in Komponente.js, andernfalls kann sie in jeder Controller-Datei benötigt werden.

Nachfolgend ein Beispiel für eine Controllerdatei, in der wir lodash und momentjs zu Demonstrationszwecken.

Beim Importieren müssen Sie denselben Pfad verwenden, den Sie in ui5.yaml Datei nach Weglassen von /Ressourcen Teil. Am Ende des Pfades sollte der JavaScript-Dateiname des NPM-Pakets hinzugefügt werden. Zum Beispiel lodash.js ist die Datei innerhalb von lodash Ordner. Wenn Sie Verwirrung mit dem Dateinamen haben, können Sie das Projekt immer mit Garn-alles-bauen um die Ordnerstruktur anzuzeigen und den Dateinamen zu finden.

Das war's! Fügen Sie jetzt Ihre Lieblings npm-Pakete in Ihren UI5-Projekten und nutzen Sie die fantastischen Bibliotheken von Drittanbietern, um Ihre fantastischen UI5-Anwendungen zu erstellen.