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

<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

 

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注