TOC

Introduction à WebJars

Introduction à WebJars

1. Vue d'ensemble

Ce tutoriel présente WebJars et son utilisation dans une application Java.

En termes simples, les WebJars sont des dépendances côté client regroupées dans des fichiers d’archive JAR. Ils fonctionnent avec la plupart des conteneurs JVM et des infrastructures Web.

Voici quelques WebJars populaires:Twitter Bootstrap,jQuery,Angular JS,Chart.js, etc. une liste complète est disponible sur lesofficial website.

2. Pourquoi utiliser WebJars?

Cette question a une réponse très simple - parce que c'est facile.

Manually adding and managing client side dependencies often results in difficult to maintain codebases.

En outre, la plupart des développeurs Java préfèrent utiliser Maven et Gradle comme outils de construction et de gestion de la dépendance.

Le problème principal résolu par WebJars est de rendre les dépendances côté client disponibles sur Maven Central et utilisables dans tout projet Maven standard.

Voici quelques avantages intéressants de WebJars:

  1. Nous pouvons gérer de manière explicite et simple les dépendances côté client dans les applications Web basées sur JVM.

  2. Nous pouvons les utiliser avec n’importe quel outil de compilation couramment utilisé, par exemple: Maven, Gradle, etc.

  3. WebJars se comporte comme n'importe quelle autre dépendance Maven - ce qui signifie que nous obtenons également des dépendances transitives

3. La dépendance de Maven

Allons-y directement et ajoutons Twitter Bootstrap et jQuery àpom.xml: __ 


    org.webjars
    bootstrap
    3.3.7-1


    org.webjars
    jquery
    3.1.1

Maintenant, Twitter Bootstrap et jQuery sont disponibles sur le classpath du projet. nous pouvons simplement les référencer et les utiliser dans notre application.

Remarque: vous pouvez vérifier la dernière version des dépendancesTwitter Bootstrap etjQuery sur Maven Central.

4. L'application simple

Une fois ces deux dépendances WebJar définies, configurons maintenant un projet Spring MVC simple pour pouvoir utiliser les dépendances côté client.

Avant d’arriver à cela cependant, il est important de comprendre queWebJars have nothing to do with Spring, et nous n’utilisons que Spring ici, car c’est un moyen très simple et rapide de configurer un projet MVC.

Here’s a good place to start pour configurer le projet Spring MVC et Spring Boot.

Et, avec la configuration simple du projet, nous définirons quelques mappages pour nos nouvelles dépendances client: 

@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry
          .addResourceHandler("/webjars/**")
          .addResourceLocations("/webjars/");
    }
}

Nous pouvons bien sûr le faire aussi via XML:

5. Dépendances version-agnostiques

Lorsque vous utilisez Spring Framework version 4.2 ou supérieure, il détecte automatiquement la bibliothèquewebjars-locator sur le chemin de classe et l'utilise pour résoudre automatiquement la version de tous les actifs WebJars.

Afin d'activer cette fonctionnalité, nous allons ajouter la bibliothèquewebjars-locator en tant que dépendance de l'application: 


    org.webjars
    webjars-locator
    0.30

Dans ce cas, nous pouvons référencer les actifs WebJars sans utiliser la version. voir la section suivante pour quelques exemples concrets.

6. WebJars sur le client

Ajoutons une simple page d'accueil HTML à notre application (il s'agit deindex.html): 


    
        WebJars Demo

Nous pouvons maintenant utiliser Twitter Bootstrap et jQuery dans le projet - utilisons les deux dans notre page d'accueil, en commençant par Bootstrap:

Pour une approche agnostique des versions:

Ajouter jQuery:

Et l’approche agnostique à la version:

7. Essai

Maintenant que nous avons ajouté Twitter Bootstrap et jQuery dans notre page HTML, testons-les.

Nous allons ajouter un bootstrapalert dans notre page: 



    

        Success! It is working as we expected.

Notez qu'une certaine compréhension de base de Twitter Bootstrap est supposée ici; voici lesgetting started guides sur le fonctionnaire.

Cela affichera unalert comme indiqué ci-dessous, ce qui signifie que nous avons ajouté avec succès Twitter Bootstrap à notre chemin de classe.

Utilisons jQuery maintenant. Nous allons ajouter un bouton de fermeture à cette alerte: 

×

Nous devons maintenant ajouterjQuery etbootstrap.min.js pour la fonctionnalité du bouton de fermeture, alors ajoutez-les à l'intérieur de la balise body deindex.html, comme ci-dessous:

Remarque: Si vous utilisez une approche indépendante de la version, veillez à ne supprimer que la version du chemin, sinon les importations relatives risquent de ne pas fonctionner:

Voici à quoi devrait ressembler notre page d'accueil finale: 


    
        
        
        WebJars Demo
        
    
    
        


            

                ×
                Success! It is working as we expected.

Voici à quoi devrait ressembler l'application. (Et l'alerte devrait disparaître en cliquant sur le bouton de fermeture.)

webjarsdemo

8. Conclusion

Dans cet article rapide, nous nous sommes concentrés sur les bases de l'utilisation de WebJars dans un projet basé sur JVM, ce qui facilite grandement le développement et la maintenance.

Nous avons mis en œuvre un projet soutenu par Spring Boot et utilisé Twitter Bootstrap et jQuery dans notre projet à l'aide de WebJars.

Le code source de l'exemple utilisé ci-dessus se trouve dansGithub project - il s'agit d'un projet Maven, il devrait donc être facile à importer et à construire.

Related