Einführung in WebJars

1. Übersicht

In diesem Tutorial werden WebJars und ihre Verwendung in einer Java-Anwendung vorgestellt.

Einfach ausgedrückt sind WebJars clientseitige Abhängigkeiten, die in JAR-Archivdateien gepackt sind. Sie arbeiten mit den meisten JVM-Containern und Webframeworks.

Hier sind einige beliebte WebJars: Twitter Bootstrap , jQuery , Angular JS , Chart.js usw.; Eine vollständige Liste finden Sie auf der offiziellen Website.

2. Warum WebJars verwenden?

Diese Frage hat eine sehr einfache Antwort - weil es einfach ist.

Das manuelle Hinzufügen und Verwalten clientseitiger Abhängigkeiten führt häufig zu schwierig zu verwaltenden Codebasen .

Außerdem bevorzugen die meisten Java-Entwickler die Verwendung von Maven und Gradle als Tools für das Build- und Abhängigkeitsmanagement.

Das Hauptproblem, das WebJars löst, besteht darin, clientseitige Abhängigkeiten in Maven Central verfügbar zu machen und in jedem Standard-Maven-Projekt zu verwenden.

Hier sind einige interessante Vorteile von WebJars:

  1. Wir können die clientseitigen Abhängigkeiten in JVM-basierten Webanwendungen explizit und einfach verwalten
  2. Wir können sie mit jedem gängigen Build-Tool verwenden, z. B.: Maven, Gradle usw.
  3. WebJars verhalten sich wie jede andere Maven-Abhängigkeit - was bedeutet, dass wir auch transitive Abhängigkeiten erhalten

3. Die Maven-Abhängigkeit

Lassen Sie uns gleich loslegen und Twitter Bootstrap und jQuery zu pom.xml hinzufügen :

 org.webjars bootstrap 3.3.7-1 org.webjars jquery 3.1.1 

Jetzt sind Twitter Bootstrap und jQuery im Projektklassenpfad verfügbar. Wir können sie einfach referenzieren und in unserer Anwendung verwenden.

Hinweis: Sie können die neueste Version des Twitter Bootstrap und die jQuery-Abhängigkeiten von Maven Central überprüfen.

4. Die einfache App

Nachdem diese beiden WebJar-Abhängigkeiten definiert wurden, richten wir nun ein einfaches Spring MVC-Projekt ein, um die clientseitigen Abhängigkeiten verwenden zu können.

Bevor wir jedoch dazu kommen, ist es wichtig zu verstehen, dass WebJars nichts mit Spring zu tun haben , und wir verwenden Spring hier nur, weil es eine sehr schnelle und einfache Möglichkeit ist, ein MVC-Projekt einzurichten.

Hier ist ein guter Ort, um mit dem Einrichten des Spring MVC- und Spring Boot-Projekts zu beginnen.

Und mit der einfachen Einrichtung des Projekts definieren wir einige Zuordnungen für unsere neuen Client-Abhängigkeiten:

@Configuration @EnableWebMvc public class WebConfig implements WebMvcConfigurer { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry .addResourceHandler("/webjars/**") .addResourceLocations("/webjars/"); } }

Das können wir natürlich auch über XML:

5. Versionsunabhängige Abhängigkeiten

Bei Verwendung von Spring Framework Version 4.2 oder höher wird die Webjars-Locator- Bibliothek im Klassenpfad automatisch erkannt und zum automatischen Auflösen der Version aller WebJars-Assets verwendet.

Um diese Funktion zu aktivieren, fügen wir die Webjars-Locator- Bibliothek als Abhängigkeit von der Anwendung hinzu:

 org.webjars webjars-locator 0.30 

In diesem Fall können wir auf die WebJars-Assets verweisen, ohne die Version zu verwenden. Im nächsten Abschnitt finden Sie einige aktuelle Beispiele.

6. WebJars auf dem Client

Fügen wir unserer Anwendung eine einfache HTML-Begrüßungsseite hinzu (dies ist index.html ):

 WebJars Demo 

Jetzt können wir Twitter Bootstrap und jQuery im Projekt verwenden - verwenden wir beide auf unserer Begrüßungsseite, beginnend mit Bootstrap:

Für einen versionierungsunabhängigen Ansatz:

JQuery hinzufügen:

Und der versionunabhängige Ansatz:

7. Testen

Nachdem wir Twitter Bootstrap und jQuery zu unserer HTML-Seite hinzugefügt haben, testen wir sie.

Wir werden unserer Seite eine Bootstrap- Warnung hinzufügen :

Success! It is working as we expected.

Beachten Sie, dass hier ein grundlegendes Verständnis von Twitter Bootstrap vorausgesetzt wird. Hier sind die ersten Anleitungen zum Beamten.

Dies zeigt eine Warnung wie unten gezeigt an, was bedeutet, dass wir Twitter Bootstrap erfolgreich zu unserem Klassenpfad hinzugefügt haben.

Verwenden wir jetzt jQuery. Wir werden dieser Warnung eine Schaltfläche zum Schließen hinzufügen:

× 

Jetzt müssen wir jQuery und bootstrap.min.js für die Funktion zum Schließen von Schaltflächen hinzufügen. Fügen Sie sie also wie folgt in das Body-Tag von index.html ein:

Hinweis: Wenn Sie einen versionierungsunabhängigen Ansatz verwenden, müssen Sie nur die Version aus dem Pfad entfernen. Andernfalls funktionieren relative Importe möglicherweise nicht:

So sollte unsere letzte Begrüßungsseite aussehen:

 WebJars Demo

× Success! It is working as we expected.

So sollte die Anwendung aussehen. (Und die Warnung sollte verschwinden, wenn Sie auf die Schaltfläche zum Schließen klicken.)

8. Fazit

In diesem kurzen Artikel haben wir uns auf die Grundlagen der Verwendung von WebJars in einem JVM-basierten Projekt konzentriert, was die Entwicklung und Wartung erheblich vereinfacht.

Wir haben ein von Spring Boot unterstütztes Projekt implementiert und Twitter Bootstrap und jQuery in unserem Projekt mit WebJars verwendet.

Der Quellcode des oben verwendeten Beispiels befindet sich im Github-Projekt - dies ist ein Maven-Projekt, daher sollte es einfach zu importieren und zu erstellen sein.