快捷導(dǎo)航

Springboot WebJar打包及使用實(shí)現(xiàn)流程解析

更新時(shí)間：2020年08月27日 14:54:24 作者：云淡風(fēng)輕博客

這篇文章主要介紹了Springboot WebJar打包及使用實(shí)現(xiàn)流程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下的相關(guān)資料

前言

　　WebJar官網(wǎng)：https://www.webjars.org/，對(duì)于任何與Servlet 3兼容的容器，WEB-INF/lib目錄中的webjar都會(huì)自動(dòng)作為靜態(tài)資源提供。這是因?yàn)閃EB-INF/lib中的JAR中的META-INF/resources目錄中的任何內(nèi)容都會(huì)自動(dòng)公開(kāi)為靜態(tài)資源。

　　官網(wǎng)上面已經(jīng)有很多熱門webjar，但有時(shí)候還是不能滿足我們的需要，我們需要自己打包WebJar，本文記錄如何WebJar的打包、使用

打包

　　首先創(chuàng)建一個(gè)maven工程，干干凈凈什么都沒(méi)有

　　把一下常用的web資源（比如：jquery、bootstrap前端框架、layer彈出層、jqgrid分頁(yè)插件）放在resources文件夾下面，為了更直觀的區(qū)分，我們先新建一個(gè)plugin文件夾

　　編寫pom.xml，指定打包方式，以及構(gòu)建工具

<?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>

  <!-- 打包方式 -->
  <packaging>jar</packaging>

  <groupId>cn.huanzi</groupId>
  <artifactId>webjar</artifactId>
  <version>1.0.1</version>

  <!-- 構(gòu)建工具 -->
  <build>
    <resources>
      <resource>
        <directory>${project.basedir}/src/main/resources</directory>
        <targetPath>META-INF/resources/</targetPath>
      </resource>
    </resources>
  </build>
</project>

　　打開(kāi)maven工具欄，package打包

　　打包成功

　　target目錄下面就會(huì)生成jar包

　　jar包結(jié)構(gòu)是這樣子滴

　　有了jar包后我們就可以引入jar使用這些web靜態(tài)資源了，上傳到maven私服使用maven引入或者直接引入jar文件都行

　　使用

　　首先需要引入jar，如果是直接把jar放在項(xiàng)目里面就不多說(shuō)了直接復(fù)制進(jìn)去就行，如果是要maven引入，則先需要把jar包發(fā)到maven私服，在pom中配置私服地址，然后引入

<!-- 配置私服地址 -->
  <repositories>
    <repository>
      <id>XXXXXXX</id>
      <name>XXXXXX</name>
      <url>XXXXXX</url>
    </repository>
  </repositories>


   <!-- 引入webjar -->
　　　<dependency>
     <groupId>cn.huanzi</groupId>
     <artifactId>webjar</artifactId>
     <version>1.0.1</version>
   </dependency>

　　使用方式就跟我們使用resources下面的資源一樣，我們看一下thymeleaf引入例子：