在啓動App的時候,控制檯會輸出下面一行:
Mapped URL path [/webjars/**] onto handler of type [class org.springframework.web.servlet.resource.ResourceHttpRequestHandler]
很好奇,GG了一下WebJars? 找到了 Roy Clarkson 在2014年寫的一篇文章《Utilizing WebJars in Spring Boot》。
WebJars is simply taking the concept of a JAR and applying it to client-side libraries or resources. For example, the jQuery library may be packaged as a JAR and made available to your Spring MVC application.
大概意思就是,WebJars借鑑了類似JAR的概念,把jQuery等js/css庫打包成JAR,應用在服務端,方便在SpringMVC應用中使用,官網入口。
下面介紹如何使用和其原理。
一.SpringBoot中使用WebJars
1.首先在pom.xml中引入需要的資源依賴:
<!-- 引用Bootstrap -->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.3.7-1</version>
</dependency>
<!-- 引用jQuery -->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.1.1</version>
</dependency>
2.在html頁面中引用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebJar Demo</title>
<!-- 頁面引用WebJar -->
<link rel="stylesheet" href="/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css" />
<script src="/webjars/jquery/3.1.1/jquery.min.js"></script>
<script src="/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"><br/>
<div class="alert alert-success">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
Hello, <strong>I am using webjars!</strong>
</div>
</div>
</body>
</html>
3.demo的使用效果
可以看到,index.html中的jQuery和Bootstrap資源確實被引用到了:
二.WebJars背後的原理
起初的猜想是,直接把js等靜態資源打包成JAR作爲Resource加入到SpringBoot中。通過看JAR包結構和源碼,發現確實是這樣做的。
1.WebJars的目錄結構
如上圖所示,jQuery的相關文件被打包放在resources目錄下特定名字webjars下面,可以記住這個路徑,因爲後面解析引用資源的時候,就是從該路徑下訪問獲取資源的。
2.SpringMVC中負責解析WebJars的資源-WebJarsResourceResolver
WebJarsResourceResolver繼承自AbstractResourceResolver,負責解析WebJars類型的資源,下面看看這個類中做了什麼工作。
WebJarsResourceResolver#resolveResourceInternal,解析URL中請求的資源,返回Resource:
private final static String WEBJARS_LOCATION = "META-INF/resources/webjars/";// webjars的位置
@Override
protected Resource resolveResourceInternal(HttpServletRequest request, String requestPath,
List<? extends Resource> locations, ResourceResolverChain chain) {
Resource resolved = chain.resolveResource(request, requestPath, locations);
if (resolved == null) {// 如果沒有解析到
String webJarResourcePath = findWebJarResourcePath(requestPath);// 尋找WebJars資源的路徑
if (webJarResourcePath != null) {
return chain.resolveResource(request, webJarResourcePath, locations);
}
}
return resolved;// 返回解析成功的資源
}
WebJarsResourceResolver#findWebJarResourcePath,找到WebJars的資源路徑:
protected String findWebJarResourcePath(String path) {
int startOffset = (path.startsWith("/") ? 1 : 0);
int endOffset = path.indexOf("/", 1);
if (endOffset != -1) {
String webjar = path.substring(startOffset, endOffset);
String partialPath = path.substring(endOffset + 1);
String webJarPath = webJarAssetLocator.getFullPathExact(webjar, partialPath);
if (webJarPath != null) {
return webJarPath.substring(WEBJARS_LOCATION_LENGTH);
}
}
return null;
}
類似這種把JavaScript/css資源打包管理不是一個新概念,在 npm 和 bower 爲web提供了相似的解決方案。
發現自己不知道的東西還有好多,慢慢學吧~