对于日常的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
<dependency>
<groupId>org.webjars.bower</groupId>
<artifactId>vue</artifactId>
<version>1.0.21</version>
</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