使用WebJar管理css、JavaScript檔案

標籤：

Web前端使用了越來越多的JS或CSS，如jQuery, Backbone.js 和Bootstrap。一般情況下，我們是將這些Web資源拷貝到Java的目錄下，通過手工進行管理，這種通方式容易導致檔案混亂、版本不一致等問題。

WebJars是將這些通用的Web前端資源打包成Java的Jar包，然後藉助Maven工具對其管理，保證這些Web資源版本唯一性，升級也比較容易。關於webjars資源，有一個專門的網站http://www.webjars.org/，我們可以到這個網站上找到自己需要的資源，在自己的工程中添加入maven依賴，即可直接使用這些資源了。

在我的項目實驗中，採用spingMVC進行前端管理，其中使用bootstrap作為前台css的骨架，就使用到了webjars的bootstrap資源。

1、首先在項目的pom依賴中加入對bootstrap webjars的依賴

<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.1.0</version>
</dependency>

2、在spring的設定檔中，將對/webjars的訪問重新導向到/META-INF/resources/webjars/

<!-- uses WebJars so Javascript and CSS libs can be declared as Maven dependencies (Bootstrap, jQuery...) -->
<mvc:resources mapping="/webjars/**" location="classpath:/META-INF/resources/webjars/"/>

3、在頁面中引入css、js檔案，這裡有個不方便的地方是要記住版本號碼

<link rel=‘stylesheet‘ href=‘/webjars/bootstrap/3.1.0/css/bootstrap.min.css‘>

 

在webjars的網站中，講到了三種應用webjars的方式，分別為NPM WebJars、Bower WebJars、Classic WebJars，我的上述方法屬於Classic Webjars方式，其餘的兩種方式沒有應用過，需要後續研究。。。。。

使用WebJar管理css、JavaScript檔案