Bevezetés a WebJars-ba

1. Áttekintés

Ez az oktatóanyag bemutatja a WebJars alkalmazást és annak használatát egy Java alkalmazásban.

Egyszerűen fogalmazva: a WebJars kliensoldali függőség, JAR archív fájlokba csomagolva. A legtöbb JVM-tárolóval és webkerettel dolgoznak.

Íme néhány népszerű WebJars: Twitter Bootstrap, jQuery, Szögletes JS, Chart.js stb; teljes lista elérhető a hivatalos weboldalon.

2. Miért használja a WebJars-ot?

Erre a kérdésre nagyon egyszerű a válasz - mert könnyű.

Az ügyféloldali függőségek kézi hozzáadása és kezelése gyakran nehezen karbantartható kódbázisokat eredményez.

Ezenkívül a legtöbb Java-fejlesztő inkább a Maven és a Gradle alkalmazást használja felépítés és függőségkezelő eszközként.

A WebJars által megoldott fő probléma az, hogy az ügyféloldali függőségeket elérhetővé tegye a Maven Centralon és felhasználható legyen bármely szokásos Maven projektben.

A WebJars néhány érdekes előnye:

  1. Kifejezetten és egyszerűen kezelhetjük az ügyféloldali függőségeket a JVM-alapú webalkalmazásokban
  2. Bármely általánosan használt építési eszközzel használhatjuk őket, például: Maven, Gradle stb
  3. A WebJars úgy viselkedik, mint bármely más Maven-függőség - ami azt jelenti, hogy transzitív függőségeket is kapunk

3. A Maven-függőség

Ugorjunk bele közvetlenül, és adjuk hozzá a Twitter Bootstrap-ot és a jQuery-t pom.xml:

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

Most a Twitter Bootstrap és a jQuery elérhető a projekt osztályterén; egyszerűen hivatkozhatunk rájuk és felhasználhatjuk őket alkalmazásunkban.

Megjegyzés: Ellenőrizheti a Twitter Bootstrap legújabb verzióját és a MQ Central jQuery-függőségeit.

4. Az egyszerű alkalmazás

E két WebJar-függőség definiálásával állítsunk be egy egyszerű tavaszi MVC-projektet az ügyféloldali függőségek használatához.

Mielőtt azonban erre eljutnánk, fontos ezt megértenünk A WebJars-nak semmi köze Springhez, és csak azért használjuk itt a Spring szolgáltatást, mert ez egy nagyon gyors és egyszerű módszer az MVC projekt felállítására.

Itt van egy jó hely a Spring MVC és a Spring Boot projekt elindításához.

És az egyszerű kivetítéssel meghatározunk néhány hozzárendelést az új kliensfüggőségeinkhez:

@Configuration @EnableWebMvc public class A WebConfig végrehajtja a WebMvcConfigurer {@Override public void addResourceHandlers (ResourceHandlerRegistry registry) {register .addResourceHandler ("/ webjars / **") .addResourceLocations ("/ webjars /"; }}

Természetesen ezt megtehetjük XML-en keresztül is:

5. Verzió-agnosztikus függőségek

A Spring Framework 4.2-es vagy újabb verziójának használata esetén automatikusan felismeri a webjars-lokátor könyvtárat az osztályúton, és használja a WebJars-eszközök verziójának automatikus feloldására.

A funkció engedélyezéséhez hozzáadjuk a webjars-lokátor könyvtár, mint az alkalmazás függősége:

 org.webjars webjars-locator 0.30 

Ebben az esetben hivatkozhatunk a WebJars eszközökre a verzió használata nélkül; néhány tényleges példát lásd a következő szakaszban.

6. WebJars az ügyfélen

Vegyünk fel egy egyszerű sima HTML üdvözlő oldalt alkalmazásunkba (ez az index.html):

  WebJars Demo 

Most már használhatjuk a Twitter Bootstrap-ot és a jQuery-t a projektben - használjuk mindkettőt üdvözlő oldalunkon, a Bootstrap-tal kezdve:

Verzió-agnosztikus megközelítés esetén:

JQuery hozzáadása:

És a verzió-agnosztikus megközelítés:

7. Tesztelés

Most, hogy felvettük a Twitter Bootstrap-ot és a jQuery-t a HTML oldalunkba, teszteljük őket.

Hozzáadunk egy bootstrap-ot éber oldalunkra:

Siker! A várakozásoknak megfelelően működik.

Vegye figyelembe, hogy itt feltételezzük a Twitter Bootstrap alapvető ismereteit; itt vannak a kezdő útmutatók a tisztviselőhöz.

Ez megmutatja a éber az alábbiak szerint, ami azt jelenti, hogy sikeresen felvettük a Twitter Bootstrap-ot az osztályútunkra.

Most használjuk a jQuery-t. Hozzáadunk egy bezárás gombot ehhez a figyelmeztetéshez:

× 

Most hozzá kell tennünk jQuery és bootstrap.min.js a bezárás gomb működéséhez, ezért adja hozzá őket a index.html, az alábbi:

Megjegyzés: Ha verzió-agnosztikus megközelítést használ, ne felejtse el eltávolítani az elérési útvonalról csak a verziót, különben előfordulhat, hogy a relatív importálás nem működik:

Így kell kinéznie az utolsó üdvözlő oldalunknak:

    WebJars Demo

× Siker! A várakozásoknak megfelelően működik.

Így kell kinéznie az alkalmazásnak. (És a figyelmeztetésnek a bezárás gombra kattintva eltűnik.)

8. Következtetés

Ebben a gyors cikkben a WebJars használatának alapjaira összpontosítottunk egy JVM-alapú projektben, ami nagyon megkönnyíti a fejlesztést és a karbantartást.

Végrehajtottunk egy Spring Boot támogatott projektet, és a WebJars segítségével a Twitter Bootstrap-ot és a jQuery-t használtuk projektünkben.

A fent használt példa forráskódja megtalálható a Github projektben - ez egy Maven projekt, ezért könnyen importálhatónak és felépíthetőnek kell lennie.