1. 概述
本教程介绍了WebJars及其在Java应用程序中的使用方法。
简单来说，WebJars是将客户端依赖项打包成JAR存档文件的技术。它们适用于大多数JVM容器和Web框架。
以下是一些流行的WebJars：Twitter Bootstrap、jQuery、Angular JS、Chart.js等；完整列表可在官方网站上找到。
2. 为何使用WebJars？
这个问题的答案非常简单——因为方便。
手动添加和管理客户端依赖往往会导致难以维护的代码库。
此外，大多数Java开发者更倾向于使用Maven和Gradle作为构建和依赖管理工具。
WebJars解决的主要问题是将客户端依赖项放入Maven中央仓库，并使其在任何标准Maven项目中可用。
以下是使用WebJars的一些有趣优势：
- 我们可以明确且轻松地在基于JVM的Web应用中管理客户端依赖
- 可以与常用的构建工具（如Maven、Gradle等）无缝配合
- WebJars像其他Maven依赖一样工作，这意味着我们还可以获取间接依赖
3. Maven依赖
现在就让我们开始，将Twitter Bootstrap和jQuery添加到pom.xml中：
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.3.7-1</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.1.1</version>
</dependency>
现在，Twitter Bootstrap和jQuery已添加到项目类路径中；我们可以直接引用并在应用中使用它们。
注意：您可以在Maven中央仓库和Maven中央仓库上查看Twitter Bootstrap和jQuery的最新版本。
4. 简单应用
有了这两个WebJar依赖，我们现在可以设置一个简单的Spring MVC项目，以便使用客户端依赖。
然而，在此之前，重要的是要明白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进行操作：
<mvc:resources mapping="/webjars/**" location="/webjars/"/>
5. 版本无关依赖
当使用Spring框架4.2或更高版本时，它会自动检测classpath上的webjars-locator库，并使用它来自动解析任何WebJars资源的版本。
为了启用此功能，我们需要将webjars-locator库添加为应用程序的依赖：
<dependency>
<groupId>org.webjars</groupId>
<artifactId>webjars-locator</artifactId>
<version>0.30</version>
</dependency>
在这种情况下，我们可以在不指定版本的情况下引用WebJars资源；请参阅下一节，了解一些实际示例。
6. 客户端上的WebJars
让我们向应用中添加一个简单的纯HTML欢迎页面（这是index.html）：
<html>
<head>
<title>WebJars Demo</title>
</head>
<body>
</body>
</html>
现在我们可以在项目中使用Twitter Bootstrap和jQuery了——让我们先从Bootstrap开始：
<script th:src="@{/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js}"></script>
对于版本无关的方法：
<script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
接下来添加jQuery：
<script th:src="@{/webjars/jquery/3.1.1/jquery.min.js}"></script>
对于版本无关的方法：
<script th:src="@{/webjars/jquery/jquery.min.js}"></script>
7. 测试
现在我们在HTML页面中添加了Twitter Bootstrap和jQuery，让我们测试它们。
我们将向页面添加一个Bootstrap的警告：
<div class="container"><br/>
<div class="alert alert-success">
<strong>Success!</strong> It is working as we expected.
</div>
</div>
这里假设对Twitter Bootstrap有基本了解；请参阅官方文档的入门指南。
这将显示一个警告，如下所示，这意味着我们成功将Twitter Bootstrap添加到了类路径中。
现在让我们使用jQuery。我们将给这个警告添加一个关闭按钮：
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
现在我们需要添加jQuery和bootstrap.min.js以实现关闭按钮功能，所以在index.html的<body>标签内添加它们：
<script th:src="@{/webjars/jquery/3.1.1/jquery.min.js}"></script>
<script th:src="@{/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js}"></script>
注意：如果使用版本无关的方法，请确保仅从路径中删除版本号，否则相对导入可能无法正常工作：
<script th:src="@{/webjars/jquery/jquery.min.js}"></script>
<script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
这就是我们的最终欢迎页面应该看起来的样子：
<html>
<head>
<script th:src="@{/webjars/jquery/3.1.1/jquery.min.js}"></script>
<script th:src="@{/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js}"></script>
<title>WebJars Demo</title>
<link rel="stylesheet"
th:href="@{/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css}" />
</head>
<body>
<div class="container"><br/>
<div class="alert alert-success">
<a href="#" class="close" data-dismiss="alert"
aria-label="close">×</a>
<strong>Success!</strong> It is working as we expected.
</div>
</div>
</body>
</html>
应用应该看起来像这样。（点击关闭按钮时，警告应消失。）
8. 总结
在这篇简短的文章中，我们专注于在基于JVM的项目中使用WebJars的基本知识，这使得开发和维护变得更加容易。
我们实现了一个由Spring Boot支持的项目，并在项目中使用WebJars实现了Twitter Bootstrap和jQuery。
上述示例的源代码可以在GitHub项目中找到——这是一个Maven项目，导入并构建起来应该很容易。