SpringBoot使用WebJars統(tǒng)一管理靜態(tài)資源的方法

更新時(shí)間：2018年12月26日 11:32:26 作者：yizhiwazi

這篇文章主要介紹了SpringBoot使用WebJars統(tǒng)一管理靜態(tài)資源的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

傳統(tǒng)管理靜態(tài)資源主要依賴(lài)于復(fù)制粘貼，不利于后期維護(hù)，為了讓大家往后更舒心，讓W(xué)ebJars給靜態(tài)資源來(lái)一次搬家革命吧?。?/p>

學(xué)習(xí)目標(biāo)

簡(jiǎn)單兩步！快速學(xué)會(huì)使用WebJars統(tǒng)一管理前端依賴(lài)。

快速查閱

源碼下載：SpringBoot Webjars Learning

使用教程

一、引入相關(guān)依賴(lài)

在 WebJars官網(wǎng) 找到項(xiàng)目中需要的依賴(lài)，例如在項(xiàng)目中引入jQuery、BootStrap前端組件等。例如：

版本定位工具：webjars-locator-core
前端組件：jquery 、bootstrap

  <dependency><!--Webjars版本定位工具（前端）-->
    <groupId>org.webjars</groupId>
    <artifactId>webjars-locator-core</artifactId>
   </dependency>

   <dependency><!--Jquery組件（前端）-->
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>3.3.1</version>
   </dependency>

二、訪問(wèn)靜態(tài)資源

在瀏覽器訪問(wèn)靜態(tài)資源：

快速訪問(wèn)：http://localhost:8080/webjars/jquery/jquery.js （推薦）
快速訪問(wèn)：http://localhost:8080/webjars/jquery/3.3.1/jquery.js

新手提問(wèn)：

有小伙伴可能疑問(wèn)，既然SpringBoot天然支持WebJars的靜態(tài)資源訪問(wèn)，為什么還要額外添加定位工具webjars-locator-core呢？

快速答疑：

主要是為了解決訪問(wèn)WebJars靜態(tài)資源時(shí)必須攜帶版本號(hào)的繁瑣問(wèn)題。舉個(gè)例子，某項(xiàng)目準(zhǔn)備將BootStrap 3.3.x 升級(jí)到 4.x 大版本，此時(shí)除了在POM文件調(diào)整之外，還需要大面積的在頁(yè)面中調(diào)整因?yàn)榘姹咎?hào)變更引起問(wèn)題的路徑，而使用定位器之后無(wú)需輸入版本號(hào)自動(dòng)定位。

總結(jié)

使用WebJars對(duì)前端依賴(lài)進(jìn)行統(tǒng)一管理有什么好處呢？

1、靜態(tài)資源版本化

傳統(tǒng)的靜態(tài)資源需要自行維護(hù)，資源種類(lèi)繁多，使得項(xiàng)目后期越來(lái)越臃腫，維護(hù)版本升級(jí)也變得困難，而使用WebJars方式進(jìn)行管理后，版本升級(jí)問(wèn)題迎刃而解。

2、提升編譯速度

經(jīng)測(cè)試，使用WebJars的方式管理依賴(lài)可以給項(xiàng)目的編譯速度帶來(lái)2-5倍的速度提升，還在猶豫的小伙伴快點(diǎn)嘗試起來(lái)吧！

3、在WebJars官方找不到自己想要的依賴(lài)怎么辦？

解決辦法：將下載好的靜態(tài)資源目錄發(fā)布到公司私服倉(cāng)庫(kù)即可。

例如：新建一個(gè)SpringBoot項(xiàng)目，手工創(chuàng)建目錄 META-INF/resources/ ，將靜態(tài)資源完整復(fù)制進(jìn)去，然后發(fā)布公司Maven私服即可。當(dāng)然，這只是簡(jiǎn)潔做法，如果想按照打造標(biāo)準(zhǔn)的WebJars資源請(qǐng)繼續(xù)看下方。

4、將靜態(tài)資源發(fā)布成標(biāo)準(zhǔn)的Webjars格式怎么弄？

解決辦法：以Metronic為例發(fā)布標(biāo)準(zhǔn)的webjars 資源到公司私服。

WebJars發(fā)布流程：

1、新建SpringBoot工程然后在src\main\resources\ 新建目錄 META-INF\resources\webjars\metronic 重點(diǎn)來(lái)了這里4.1.9 必須跟POM文件的<version>4.1.9</version>保持一致。

2、修改POM文件填寫(xiě)項(xiàng)目信息和公司私服地址。

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 <modelVersion>4.0.0</modelVersion>
 <!--項(xiàng)目信息-->
 <groupId>org.webjars</groupId>
 <artifactId>metronic</artifactId>
 <version>4.1.9</version>
 <packaging>jar</packaging>
 <name>metronic</name>
 <description>metronic</description>

 <!--維護(hù)信息-->
 <developers>
  <developer>
   <name>socks</name>
   <email>https://github.com/yizhiwazi</email>
  </developer>
 </developers>

 <!--發(fā)布地址-->
 <distributionManagement>
  <repository>
   <id>xx-repo</id>
    <!--這里替換成公司私服地址-->
<url>http://127.0.0.1:8088/nexus/content/repositories/thirdparty/</url>
  </repository>
  <snapshotRepository>
   <id>xx-plugin-repo</id>
    <!--這里替換成公司私服地址-->
<url>http://127.0.0.1:8088/nexus/content/repositories/thirdparty/</url>
  </snapshotRepository>
 </distributionManagement>

</project>

3、在本地MAVEN的配置文件指定公司私服的賬號(hào)密碼。

<?xml version="1.0" encoding="UTF-8"?>

<settings xmlns="http://maven.apache.org/SETTINGS/1.0.0"
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://maven.apache.org/SETTINGS/1.0.0 http://maven.apache.org/xsd/settings-1.0.0.xsd">


 <localRepository>D:\dev\mvnrepository</localRepository>

 <mirrors>
   <!-- 阿里云倉(cāng)庫(kù) -->
   <mirror>
    <id>aliyun</id>
    <mirrorOf>central</mirrorOf>
    <name>aliyun-all</name>
    <url>http://maven.aliyun.com/nexus/content/groups/public/</url>
   </mirror>
  
   <!-- 中央倉(cāng)庫(kù)1 -->
   <mirror>
    <id>repo1</id>
    <mirrorOf>central</mirrorOf>
    <name>Human Readable Name for this Mirror.</name>
    <url>http://repo1.maven.org/maven2/</url>
   </mirror>
  
   <!-- 中央倉(cāng)庫(kù)2 -->
   <mirror>
    <id>repo2</id>
    <mirrorOf>central</mirrorOf>
    <name>Human Readable Name for this Mirror.</name>
    <url>http://repo2.maven.org/maven2/</url>
   </mirror>
 </mirrors> 
 
  <!-- 暫時(shí)在發(fā)布倉(cāng)庫(kù)到213的時(shí)候用到-->
  <servers>
  <!-- 倉(cāng)庫(kù)地址賬號(hào) -->
  <server>
   <id>xx-repo</id>
   <username>admin</username>
   <password>123456</password>
  </server>
  <!-- 插件地址賬號(hào) -->
  <server>
   <id>xx-plugin-repo</id>
   <username>admin</username>
   <password>123456</password>
  </server>
 </servers>

</settings>

4、打開(kāi)IDEA->Maven->Deploy 將項(xiàng)目到公司私服，大功告成。