WebJars簡介 —— 前端資源的jar包形式（以后接觸到再深入總結）

對於日常的web開發而言，像css、js、images、font等靜態資源文件管理是非常的混亂的、比如jQuery、Bootstrap、Vue.js等，可能每個框架使用的版本都不一樣、一不注意就會出現版本沖突或者重復添加的問題。所以找到了一個叫做WebJars的技術，下面我將介紹如何將靜態資源打包成jar。
原本我們在進行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是一個很神奇的東西，可以讓大家以jar包的形式來使用前端的各種框架、組件。

什么是WebJars

WebJars是將客戶端（瀏覽器）資源（JavaScript，Css等）打成jar包文件，以對資源進行統一依賴管理。WebJars的jar包部署在Maven中央倉庫上。

為什么使用

我們在開發Java web項目的時候會使用像Maven，Gradle等構建工具以實現對jar包版本依賴管理，以及項目的自動化管理，但是對於JavaScript，Css等前端資源包，我們只能采用拷貝到webapp目錄下的手工方式，這樣做就無法對這些資源進行依賴管理。而且容易導致文件混亂、版本不一致等問題。那么WebJars就提供給我們這些前端資源的jar包形式，我們就可以進行依賴管理。

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

如何使用

1、 WebJars主官網 查找對於的組件，比如Vuejs

1. <dependency>
2. <groupId>org.webjars.bower</groupId>
3. <artifactId>vue</artifactId>
4. <version>1.0.21</version>
5. </dependency>

2、頁面引入

<link th:href="@{/webjars/bootstrap/3.3.6/dist/css/bootstrap.css}" rel="stylesheet"></link> 

就可以正常使用了！

 三種應用webjars的方式

在webjars的網站中，講到了三種應用webjars的方式，分別為NPM WebJars、Bower WebJars、Classic WebJars，上述方法屬於Classic Webjars方式。

 

webjars的打包和使用參考

 

<!-- 構建工具，打包時引入 -->
    <build>
        <resources>
            <resource>
                <directory>${project.basedir}/src/main/resources</directory>
                <targetPath>META-INF/resources/</targetPath>
            </resource>
        </resources>
    </build>

 

其他工程引用：

<dependency>
 <groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.3.1-1</version>
</dependency>

 

 

 http://localhost:9090/webjars/jquery/3.3.1-1/jquery.js

 參考：

https://www.cnblogs.com/huanzi-qch/p/10881437.html
https://blog.csdn.net/tigerxiaohan/article/details/93065949