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

posted on 2019-11-11 15:27 小破孩楼主阅读(12291) 评论(2) 编辑收藏举报