推薦使用Webjars的三大理由：

• 1. 將靜態(tài)資源版本化，更利于升級和維護。
• 2. 剝離靜態(tài)資源，提高編譯速度和打包效率。
• 3. 實現(xiàn)資源共享，有利于統(tǒng)一前端開發(fā)。

學習目標

簡單兩步！快速學會使用WebJars統(tǒng)一管理前端依賴。

快速查閱

源碼下載：SpringBoot Webjars Learning

專題閱讀：《SpringBoot 布道系列》

使用教程

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

首先在 WebJars官網(wǎng) 找到項目所需的依賴，例如在pom.xml引入 jQuery、BootStrap前端組件等。例如：

• 版本定位工具：webjars-locator-core 用于省略版本號訪問靜態(tài)資源
• 前端組件：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>

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

好了，就是這么簡單，啟動系統(tǒng)直接訪問靜態(tài)資源：

快速訪問：http://localhost:8080/webjars/jquery/jquery.js （推薦）

快速訪問：http://localhost:8080/webjars/jquery/3.3.1/jquery.js

三、發(fā)布靜態(tài)資源（私服）

通常很多時候 WebJars官網(wǎng) 并不一定都有我們項目所需的依賴，此時咱們可以根據(jù)實際需求將靜態(tài)資源打包并發(fā)布至公司的Maven私服倉庫，然后在項目引用即可。

例如將Bootstrap的Metronic靜態(tài)資源 發(fā)布至遠程倉庫，步驟如下：

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

2、修改POM文件 填寫項目信息和公司私服地址。

<?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>
    <!--項目信息-->
    <groupId>org.webjars</groupId>
    <artifactId>metronic</artifactId>
    <version>4.1.9</version>
    <packaging>jar</packaging>
    <name>metronic</name>
    <description>metronic</description>

    <!--維護信息-->
    <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的配置文件指定公司私服的賬號密碼。

<?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>
          <!-- 阿里云倉庫 -->
          <mirror>
             <id>aliyun</id>
             <mirrorOf>central</mirrorOf>
             <name>aliyun-all</name>
             <url>http://maven.aliyun.com/nexus/content/groups/public/</url>
         </mirror>
     
         <!-- 中央倉庫1 -->
         <mirror>
             <id>repo1</id>
             <mirrorOf>central</mirrorOf>
             <name>Human Readable Name for this Mirror.</name>
             <url>http://repo1.maven.org/maven2/</url>
         </mirror>
     
         <!-- 中央倉庫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> 
  
      <!-- 暫時在發(fā)布倉庫到213的時候用到-->
       <servers>
        <!-- 倉庫地址賬號 -->
        <server>
            <id>xx-repo</id>
            <username>admin</username>
            <password>123456</password>
        </server>
        <!-- 插件地址賬號 -->
        <server>
            <id>xx-plugin-repo</id>
            <username>admin</username>
            <password>123456</password>
        </server>
    </servers>

</settings>

4、打開IDEA->Maven->Deploy 將項目到公司私服，大功告成。