1. 概述
本教程介紹 WebJars 以及如何在 Java 應用程序中使用它們。
簡單來説，WebJars 是客户端依賴項，打包成 JAR 歸檔文件。它們與大多數 JVM 容器和 Web 框架兼容。
以下是一些流行的 WebJars：Twitter Bootstrap、jQuery、Angular JS、Chart.js 等。完整的列表可以在 官方網站 上找到。
2. 使用 WebJars 的理由是什麼？
答案非常簡單——因為它易於使用。
手動添加和管理客户端依賴通常會導致難以維護的代碼庫.
此外，大多數 Java 開發者更喜歡使用 Maven 和 Gradle 作為構建和依賴管理工具。
WebJars 主要解決的問題是，在 Maven Central 上提供客户端依賴並使其能夠在任何標準 Maven 項目中使用。
以下是 WebJars 的一些有趣優勢：
- 我們可以顯式地和輕鬆地管理 JVM 上的客户端依賴
- 我們可以使用它們與任何常用的構建工具，例如 Maven、Gradle 等
- WebJars 就像任何其他 Maven 依賴項一樣——這意味着我們還可以獲得傳遞依賴項
3. Maven 依賴
讓我們直接開始，將 Twitter Bootstrap 和 jQuery 添加到 <em >pom.xml</em> 中：
<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 Central 上檢查最新版本的 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 Framework 版本 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 <em >alert</em> 元素：
<div class="container"><br/>
<div class="alert alert-success">
<strong>Success!</strong> It is working as we expected.
</div>
</div>
請注意，這裏假設您對 Twitter Bootstrap 有一定的基本瞭解；以下是官方的 入門指南。
這將顯示一個 警告框，如下所示，這意味着我們已成功將 Twitter Bootstrap 添加到 classpath 中。
現在我們使用 jQuery。我們將向此警告框添加一個關閉按鈕：
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
現在我們需要為關閉按鈕功能添加 jQuery 和 bootstrap.min.js，請將其添加到 index.html 的
標籤內，如下所示：<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 的項目，並在該項目中使用了 Twitter Bootstrap 和 jQuery，通過 WebJars 實現。
