SpringBoot - 第四十三章 | Web開發之WebJars原理

在上一篇文章中簡單的教學了如何使用WebJars，SpringBoot - 第四十二章 | Web開發之WebJars應用，而這篇文章主杳是說明WebJars如何實現。

靜態資源知識

原本我們在進行web開發時，一般上都是講靜態資源文件放置在webapp目錄下，在SpringBoot裡面，一般是將資源文件放置在src/main/resources/static目錄下。而在Servlet3中，允許我們直接訪問WEB-INF/lib下的jar包中的/META-INF/resources目錄資源，即WEB-INF/lib/{*.jar}/META-INF/resources下的資源可以直接訪問。

而WebJars也是利用了此功能，將所有前端的靜態文件打包成一個jar包，這樣對於引用而言和普通的jar引入是一樣的，還能很好的對前端靜態資源進行管理。

WebJars 使用說明

WebJars是將web前端資源（如jQuery & Bootstrap）打成jar包文件。借助版本管理工具(Maven、gradle等)進行版本管理，保證這些Web資源版本唯一性。避免了文件混亂、版本不一致等問題。

WebJars 結構

Jquery的webjars的目錄結構。以下是基於jquery-4.3.1.jar
可以發現靜態文件存放規則：META-INF/resources/webjars/${name}/${version}。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

└── META-INF
    ├── MANIFEST.MF
    ├── maven
    │   └── org.webjars
    │       └── jquery
    │           ├── pom.properties
    │           └── pom.xml
    └── resources
        └── webjars
            └── jquery
                └── 3.4.1
                    ├── jquery.js
                    ├── jquery.min.js
                    ├── jquery.min.map
                    ├── jquery.slim.js
                    ├── jquery.slim.min.js
                    ├── jquery.slim.min.map
                    └── webjars-requirejs.js

官方說明

WebJars 實作

• 在src/main/resouces，下建立META-INF/resources/webjars/0.0.1目錄，同時為了演示效果，拷貝一個圖片到此目錄下。

• 在src/main/resouces/template/下，建立index.html

• 啟動應用並瀏覽 http://localhost:8080

可以看到QrCode正常的被加載進來了。

• 將META-INF/resources/webjars/0.0.1 壓縮成一個jar

• 移除src/main/resouces/META-INF/

• 將META-INF.jar加入依賴 (jar的檔案名稱取得不好，就不要太計較了，哈)

• 再次啟動應用並瀏覽 http://localhost:8080

技巧

我們在index.html中訪問圖片是這麼訪問的:webjars/test/0.0.1/QrCode.png。咋一看，可能覺得沒問題。但當我們靜態資源版本有更新時，我們不是又需要去改下這個靜態資源的引入路徑，那何來的優雅！所以官方提供了一個webjars-locator包，就是來解決此問題的。

官方說明

• 加入pom的依賴

  1 2 3 4 5

  <dependency> <groupId>org.webjars</groupId> <artifactId>webjars-locator</artifactId> <version>0.36</version> </dependency>

• 修改index.html中的圖片路徑

Before

1

<img alt="qrCode" src="webjars/test/0.0.1/QrCode.png">

After

1

<img alt="qrCode" src="webjars/test/QrCode.png">

• 再次啟動應用並瀏覽 http://localhost:8080 ，可以看到圖片路徑已經去除版本號了

這樣以後只需要修改依賴的包，可以不用去修改前端。

註：以上參考了
SpringBoot使用WebJars
SpringBoot | 第十八章：web应用开发之WebJars使用
WebJars Documentation