Въведение в WebJars

1. Общ преглед

Този урок представя WebJars и как да ги използвате в Java приложение.

Просто казано, WebJars са зависимости от страна на клиента, пакетирани в JAR архивни файлове. Те работят с повечето JVM контейнери и уеб рамки.

Ето няколко популярни WebJars: Twitter Bootstrap , jQuery , Angular JS , Chart.js и т.н .; пълен списък е достъпен на официалния уебсайт.

2. Защо да използвам WebJars?

Този въпрос има много прост отговор - защото е лесен.

Ръчното добавяне и управление на зависимостите от страна на клиента често води до трудни за поддръжка кодови бази .

Освен това повечето разработчици на Java предпочитат да използват Maven и Gradle като инструменти за изграждане и управление на зависимости.

Основният проблем, който WebJars решава, е да направи зависимостите от страна на клиента достъпни в Maven Central и използваеми във всеки стандартен проект на Maven.

Ето няколко интересни предимства на WebJars:

  1. Можем изрично и лесно да управляваме зависимостите от страна на клиента в уеб приложения, базирани на JVM
  2. Можем да ги използваме с всеки често използван инструмент за изграждане, например: Maven, Gradle и др
  3. WebJars се държат като всяка друга зависимост на Maven - което означава, че получаваме и преходни зависимости

3. Зависимостта на Maven

Нека да скочим направо в него и да добавим Twitter Bootstrap и jQuery към pom.xml :

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

Сега Twitter Bootstrap и jQuery са достъпни по пътя на класа на проекта; можем просто да ги препращаме и да ги използваме в нашето приложение.

Забележка: Можете да проверите най-новата версия на Twitter Bootstrap и зависимостите jQuery в Maven Central.

4. Простото приложение

С тези две дефинирани зависимости WebJar, нека сега създадем прост проект на MVC Spring, за да можем да използваме зависимостите от страна на клиента.

Преди да стигнем до това обаче, е важно да разберем, че WebJars нямат нищо общо с Spring и тук използваме Spring само защото това е много бърз и лесен начин за създаване на MVC проект.

Тук е доброто място да започнете да създавате проекта Spring MVC и Spring Boot.

И с създадената проста проекция ще дефинираме някои съпоставяния за нашите нови клиентски зависимости:

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

Разбира се, можем да направим това и чрез XML:

5. Версия-агностични зависимости

Когато използвате Spring Framework версия 4.2 или по-нова, тя автоматично ще открие библиотеката webjars-locator на пътя на класа и ще я използва за автоматично разрешаване на версията на всички активи на WebJars.

За да активираме тази функция, ще добавим библиотеката webjars-locator като зависимост от приложението:

 org.webjars webjars-locator 0.30 

В този случай можем да препращаме към активите на WebJars, без да използваме версията; вижте следващия раздел за няколко действителни примера.

6. WebJars на клиента

Нека добавим обикновена обикновена HTML страница за добре дошли към нашето приложение (това е index.html ):

 WebJars Demo 

Сега можем да използваме Twitter Bootstrap и jQuery в проекта - нека използваме и двете в нашата страница за начало, започвайки с Bootstrap:

За версионно-агностичен подход:

Добавете jQuery:

И версията-агностичен подход:

7. Тестване

След като добавихме Twitter Bootstrap и jQuery в нашата HTML страница, нека ги тестваме.

Ще добавим предупреждение за зареждане в нашата страница:

Success! It is working as we expected.

Имайте предвид, че тук се предполага някакво основно разбиране на Twitter Bootstrap; ето началните ръководства за официалния.

Това ще покаже предупреждение, както е показано по-долу, което означава, че успешно сме добавили Twitter Bootstrap към нашата пътека на класа.

Нека използваме jQuery сега. Ще добавим бутон за затваряне към този сигнал:

× 

Сега трябва да добавим jQuery и bootstrap.min.js за функционалността на бутона за затваряне, затова ги добавете вътре в маркера на body на index.html, както е показано по-долу:

Note: If you are using version-agnostic approach, be sure to remove only the version from the path, otherwise, relative imports may not work:

This is how our final welcome page should look like:

 WebJars Demo

× Success! It is working as we expected.

This is how the application should look like. (And the alert should disappear when clicking the close button.)

8. Conclusion

In this quick article, we focused on the basics of using WebJars in a JVM-based project, which makes development and maintenance a lot easier.

We implemented a Spring Boot backed project and used Twitter Bootstrap and jQuery in our project using WebJars.

The source code of the above-used example can be found in the Github project – this is a Maven project, so it should be easy to import and build.