使用WebJar管理css、JavaScript檔案

mingziday發表於2015-08-21

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方式,其餘的兩種方式沒有應用過,需要後續研究。。。。。

相關文章