使用webJar統一管理靜態資源

什麼是webjar?

webjar是將客戶端(瀏覽器)資源(javascript,CSS等)打包成jar文件,以對資源進行統一管理;webJar的jar包部署在Maven中央倉庫上。

我們爲何使用webjar?

在我們進行java web項目開發的時候會使用Maven、Gradle等構建工具實現對jar包版本依賴管理、以及項目的自動化管理;但是對於javaScript、CSS一些前端資源包,以往我們只能採取直接複製到webapp目錄下的手工方式,這種方式無法對這些資源進行依賴管理,並且容器導致文件混亂、版本不一致的問題;因而,webjar孕育而生,提供給我們前端資源的jar包形式,方便我們進行依賴管理;

webjar作用原理

webJar是將這些通用的web前端資源打包成jar包,然後藉助Maven工具對其進行管理;保證這些web資源版本的唯一性,比較容易升級;

如何使用WebJar

首先,在主官網查找對應的組件,比如jquery;然後添加相應的依賴;

<!--引入一個jQuery的jar包-->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.3.1</version>
        </dependency>

2、接下來我們對頁面進行引入;
<script th:src="@{/webjars/jquery/3.3.1/jquery.js}" </script>(注意:這裏具體的路徑還要看該資源在依賴包中的位置,如下圖)在這裏插入圖片描述
以上我們就能正確使用了;像上面每個引用文件裏都帶一個版本,如果項目要升級,就很麻煩了,故我們添加版本定位工具;

<dependency>
     <groupId>org.webjars</groupId>
     <artifactId>webjars-locator-core</artifactId>
</dependency>

之後我們就可以使用<script th:src="@{/webjars/jquery/jquery.js}" </script>對頁面進行引入;

總結

使用WebJar對前端依賴依賴進行統一管理有什麼好處呢?
1、使用WebJar方式進行管理後,版本問題迎刃而解;
2、使用WebJar的方式管理依賴可以給項目的編譯速度帶來2-5倍的速度提升;

補充:

我們在使用WebJar引入資源文件前需要對模板引擎的命名空間進行引入:

<html xmlns:th="http://www.thymeleaf.org">

一下子被我叉掉了原文鏈接,抱歉了~~~

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章