streamalism.org

1. Overzicht

Deze tutorial introduceert WebJars en hoe je ze in een Java-applicatie kunt gebruiken.

Simpel gezegd, WebJars zijn afhankelijkheden aan de clientzijde, verpakt in JAR-archiefbestanden. Ze werken met de meeste JVM-containers en webframeworks.

Hier zijn een paar populaire WebJars: Twitter Bootstrap, jQuery, Hoekige JS, Chart.js enz; een volledige lijst is beschikbaar op de officiële website.

2. Waarom WebJars gebruiken?

Deze vraag heeft een heel eenvoudig antwoord - omdat het gemakkelijk is.

Het handmatig toevoegen en beheren van afhankelijkheden aan de clientzijde resulteert vaak in moeilijk te onderhouden codebases.

Bovendien geven de meeste Java-ontwikkelaars er de voorkeur aan om Maven en Gradle te gebruiken als tools voor build- en afhankelijkheidsbeheer.

Het belangrijkste probleem dat WebJars oplost, is het beschikbaar maken van afhankelijkheden aan de clientzijde op Maven Central en bruikbaar in elk standaard Maven-project.

Hier zijn een paar interessante voordelen van WebJars:

1. We kunnen de client-side afhankelijkheden in JVM-gebaseerde webapplicaties expliciet en eenvoudig beheren
2. We kunnen ze gebruiken met elke veelgebruikte build-tool, bijvoorbeeld: Maven, Gradle, enz
3. WebJars gedragen zich als elke andere Maven-afhankelijkheid - wat betekent dat we ook transitieve afhankelijkheden krijgen

3. De afhankelijkheid van Maven

Laten we er meteen in springen en Twitter Bootstrap en jQuery toevoegen aan pom.xml:

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

Nu zijn Twitter Bootstrap en jQuery beschikbaar op het klassenpad van het project; we kunnen er eenvoudig naar verwijzen en ze in onze applicatie gebruiken.

Opmerking: u kunt de nieuwste versie van de Twitter Bootstrap en de jQuery-afhankelijkheden op Maven Central controleren.

4. De eenvoudige app

Nu deze twee WebJar-afhankelijkheden zijn gedefinieerd, gaan we nu een eenvoudig Spring MVC-project opzetten om de client-side afhankelijkheden te kunnen gebruiken.

Voordat we daar echter op ingaan, is het belangrijk om dat te begrijpen WebJars hebben niets te maken met de lente, en we gebruiken hier alleen Spring omdat het een zeer snelle en eenvoudige manier is om een ​​MVC-project op te zetten.

Hier is een goede plek om te beginnen met het opzetten van het Spring MVC- en Spring Boot-project.

En, met de eenvoudige projectinstelling, zullen we een aantal toewijzingen definiëren voor onze nieuwe clientafhankelijkheden:

@Configuration @EnableWebMvc openbare klasse WebConfig implementeert WebMvcConfigurer {@Override openbare leegte addResourceHandlers (ResourceHandlerRegistry-register) {registry .addResourceHandler ("/ webjars / **") .addResourceLocations ("/ webjars /"); }}

Dat kunnen we natuurlijk ook via XML doen:

5. Versie-agnostische afhankelijkheden

Wanneer u Spring Framework versie 4.2 of hoger gebruikt, zal het automatisch het webjars-locator bibliotheek op het klassenpad en gebruik deze om de versie van alle WebJars-middelen automatisch om te zetten.

Om deze functie in te schakelen, voegen we de webjars-locator bibliotheek als afhankelijkheid van de applicatie:

 org.webjars webjars-locator 0.30 

In dit geval kunnen we naar de WebJars-items verwijzen zonder de versie te gebruiken; zie de volgende sectie voor een paar actuele voorbeelden.

6. WebJars op de client

Laten we een eenvoudige HTML-welkomstpagina toevoegen aan onze applicatie (dit is index.html):

  WebJars-demo 

Nu kunnen we Twitter Bootstrap en jQuery in het project gebruiken - laten we beide gebruiken op onze welkomstpagina, te beginnen met Bootstrap:

Voor een versie-agnostische benadering:

JQuery toevoegen:

En de versie-agnostische benadering:

7. Testen

Nu we Twitter Bootstrap en jQuery hebben toegevoegd aan onze HTML-pagina, gaan we ze testen.

We zullen een bootstrap toevoegen alert op onze pagina:

Succes! Het werkt zoals we hadden verwacht. 

Merk op dat hier enige basiskennis van Twitter Bootstrap wordt verondersteld; hier zijn de aan de slag gidsen over de officiële.

Dit zal een alert zoals hieronder getoond, wat betekent dat we met succes Twitter Bootstrap aan ons klassenpad hebben toegevoegd.

Laten we nu jQuery gebruiken. We voegen een knop Sluiten toe aan deze melding:

× 

Nu moeten we toevoegen jQuery en bootstrap.min.js voor de knop Sluiten, dus voeg ze toe aan de body-tag van index.html, zoals hieronder:

Opmerking: als u een versie-agnostische benadering gebruikt, zorg er dan voor dat u alleen de versie uit het pad verwijdert, anders werkt relatieve invoer mogelijk niet:

Dit is hoe onze laatste welkomstpagina eruit zou moeten zien:

    WebJars-demo
× Succes! Het werkt zoals we hadden verwacht. 

Dit is hoe de applicatie eruit zou moeten zien. (En de waarschuwing zou moeten verdwijnen wanneer u op de knop Sluiten klikt.)

8. Conclusie

In dit korte artikel hebben we ons geconcentreerd op de basisprincipes van het gebruik van WebJars in een op JVM gebaseerd project, wat ontwikkeling en onderhoud een stuk eenvoudiger maakt.

We implementeerden een door Spring Boot ondersteund project en gebruikten Twitter Bootstrap en jQuery in ons project met WebJars.

De broncode van het hierboven gebruikte voorbeeld is te vinden in het Github-project - dit is een Maven-project, dus het moet gemakkelijk te importeren en te bouwen zijn.