WebJar的打包和使用
前言
WebJar官网:https://www.webjars.org/,对于任何与Servlet 3兼容的容器,WEB-INF/lib目录中的webjar都会自动作为静态资源提供。这是因为WEB-INF/lib中的JAR中的META-INF/resources目录中的任何内容都会自动公开为静态资源。
官网上面已经有很多热门webjar,但有时候还是不能满足我们的需要,我们需要自己打包WebJar,本文记录如何WebJar的打包、使用
打包
首先创建一个maven工程,干干净净什么都没有
把一下常用的web资源(比如:jquery、bootstrap前端框架、layer弹出层、jqgrid分页插件)放在resources文件夹下面,为了更直观的区分,我们先新建一个plugin文件夹
编写pom.xml,指定打包方式,以及构建工具
<?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> <!-- 构建工具 -->
<build>
<resources>
<resource>
<directory>${project.basedir}/src/main/resources</directory>
<targetPath>META-INF/resources/</targetPath>
</resource>
</resources>
</build>
</project>
打开maven工具栏,package打包
打包成功
target目录下面就会生成jar包
jar包结构是这样子滴
有了jar包后我们就可以引入jar使用这些web静态资源了,上传到maven私服使用maven引入或者直接引入jar文件都行
使用
首先需要引入jar,如果是直接把jar放在项目里面就不多说了直接复制进去就行,如果是要maven引入,则先需要把jar包发到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引入例子:
<!-- jquery -->
<script th:src="@{/plugin/jquery.min.js}"></script>
总结
使用WebJar有什么好处呢?
1、打成jar包方便管理,统一资源版本,如需升级资源版本,修改webjar工程、升级版本号,重新打包上传maven私服即可,项目无需做修改
2、减少项目大小,提高打包、部署项目是的效率,例如本例中:
没打包之前 14.4MB 打包之后 5.62MB,减少8.78MB
如果使用maven引入,则一点空间都不占,项目大小减少14.4MB
WebJar的打包和使用的更多相关文章
- WebJar的打包和使用
前言 WebJar官网:https://www.webjars.org/,对于任何与Servlet 3兼容的容器,WEB-INF/lib目录中的webjar都会自动作为静态资源提供.这是因为WEB-I ...
- Maven 打成 Webjar的方法
http://blog.csdn.net/sxdtzhaoxinguo/article/details/45666789 *************************************** ...
- Spring使用webjar
注意事项 这玩意很简单,但是我们第一次搞就是搞不成功,为什么呢?因为我们都用的是idea或者eclipse编译.webjar只能在maven上才能打包,所以在使用时,记得maven-clean和mav ...
- SpringBoot笔记十三:引入webjar资源和国际化处理
目录 什么是webjar 怎么使用webjar 国际化 新建国际化配置文件 配置配置文件 使用配置文件 我们先来看一个html,带有css的,我们就以这个为准来讲解. 资源可以去我网盘下载 链接:ht ...
- Android Studio 多个编译环境配置 多渠道打包 APK输出配置
看完这篇你学到什么: 熟悉gradle的构建配置 熟悉代码构建环境的目录结构,你知道的不仅仅是只有src/main 开发.生成环境等等环境可以任意切换打包 多渠道打包 APK输出文件配置 需求 一般我 ...
- 【原创分享·支付宝支付】HBuilder打包APP调用支付宝客户端支付
前言 最近有点空余时间,所以,就研究了一下APP支付.前面很早就搞完APP的微信支付了,但是由于时间上和应用上的情况,支付宝一直没空去研究.然后等我空了的时候,发现支付宝居然升级了支付逻辑,虽然目前还 ...
- 细说前端自动化打包工具--webpack
背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...
- .NET Core 系列5 :使用 Nuget打包类库
NuGet是个开源项目,项目包括 NuGet VS插件/NuGet Explorer/NuGetServer/NuGet命令行等项目,.NET Core项目完全使用Nuget 管理组件之间的依赖关系, ...
- Node-Webkit打包
1.node-webkit是什么? NW.js is an app runtime based on Chromium and node.js. You can write native apps i ...
随机推荐
- 网易发起“疾风”智造IoT联盟,深化“互联网+先进制造业”发展
7月26日,2019网易云创峰会在杭州拉开序幕,本次峰会以“连接•洞察•进化”为主题,汇聚行业领袖.技术大咖及业界代表,探讨技术演进与行业应用趋势,研商生态合作升级.共赢未来的道路.上午的主论坛中,网 ...
- 【RTOS】基于V7开发板的最新版RTX4 V4.81.1程序模板,不使用CMSIS-RTOS封装层,继续保持超强战斗力
模板下载: 链接:https://pan.baidu.com/s/1idoQYcR3SOzVC3KTFcMGMA 提取码:i8k5 1.MDK使用MDK5.26及其以上版本. 2.进入到MDK5后 ...
- Springboot整合Mybatis实现级联一对多CRUD操作
在关系型数据库中,随处可见表之间的连接,对级联的表进行增删改查也是程序员必备的基础技能.关于Spring Boot整合Mybatis在之前已经详细写过,不熟悉的可以回顾Spring Boot整合Myb ...
- java获取月的第一天和最后一天
在Java中获取月的第一天和最后一天主要是通过Calendar对象来实现. /** * 获取月的第一天 * * @param month 月 */ private String getMonthBeg ...
- excel中添加下拉候选
这里简单记录下如何在Excel2013中添加下拉候选. 首先有个思路是,下拉候选也就意味着数据被限制在一个范围之内,因此应该联想到数据验证相关的设置. 选中单列或单元格,在[数据]下的[数据验证]中选 ...
- JAVA CST时间 转换成Date
Mybatis中处理Oracle时间类型是个比较麻烦的问题,特别是需要用到时间做比较的,可参考以下代码与思路: 格式化CST时间 SimpleDateFormat sdf = new SimpleDa ...
- C#Winform窗体利用单例子窗体传值父窗体
简述:最近在做C#和HALCON编程,要用到单例的参数由子窗体改变父窗体的值.此例为简化版 1,点击系统设置 2,弹出子窗体,在其输入修改参数后点修改按钮 3,点击确定按钮后,关闭子窗体后,主窗体te ...
- ubuntu 中安装jenkins,基于docker运行jenkins
本文是在ubuntu环境下安装jenkins,jenkins运行在docker容器中,至于docker如何安装,本文不再描述,大家可以上网查询下,如何安装docker,下面先放上一个使用jenkin ...
- vue非父子关系之间通信传值
第一种方法: 通过给vue实例添加自定义属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
- ArcGIS api for JavaScript 3.27 在线浏览的一些小部件
var navOption; var navToolbar;// 当前选择的操作 require( [ "esri/toolbars/navigation", "esri ...