什么是WebJars

WebJars以jar包的形式来使用前端的各种框架、组件,如jquery、bootstrap

WebJars将客户端(浏览器)资源(JavaScript,Css等)打成jar包文件,以对资源进行统一依赖管理。WebJars的jar包部署在Maven中央仓库上。

我们在开发Java web项目的时候会使用像Maven,Gradle等构建工具以实现对jar包版本依赖管理,以及项目的自动化管理,但是对于JavaScript,Css等前端资源包,我们只能采用拷贝到webapp下的方式,这样做就无法对这些资源进行依赖管理。

而WebJars就提供给我们这些前端资源的jar包形式,我们就可以进行依赖管理。

今天用webjars时,bootstrap引入很顺利,但是jquery尝试了很久才成功,网上搜到的文章的例子都是错的,这里记录一下:

网上的写法基本都是这种:

  <script src="webjars/jquery/3.1.1/jquery.min.js"></script>

但实际上是错的,正确的应该是:

  <script th:src="webjars/jquery/3.1.1/dist/jquery.min.js"></script>和<script src="webjars/jquery/1.11.1/jquery.min.js"></script>

3.1.1多了一层dist

其实具体的看下jar包目录结构就一目了然了,如图

而bootstrap的jar包已经自动依赖jquery了,如图,bootstrap3.3.7-1就依赖了jquery1.11.1,不需要额外引入jquery依赖就可以直接引入:<script src="webjars/jquery/1.11.1/jquery.min.js"></script>

而如果想用新版本也可以再引入自己想要的jquery依赖,比如jquery3.1.1,然后引入js:<script th:src="webjars/jquery/3.1.1/dist/jquery.min.js">

webjars-jquery的引用的更多相关文章

  1. Jquery在线引用地址

    Jquery在线引用地址: 1. 很多网站都是使用这种方式引入,客户的浏览器可能已经缓存过了 jquery.可以直接调用本地的,速度更快… 2. Google code 使用了 cdn 技术在很多地方 ...

  2. webpack打包jquery并引用

    一,引入webpack插件 //打包第三方 const CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlug ...

  3. Jquery在线引用地址:

    转自:http://www.cnblogs.com/lkf18/archive/2012/12/11/2813241.html 1. 很多网站都是使用这种方式引入,客户的浏览器可能已经缓存过了 jqu ...

  4. easyui中jquery重复引用问题(tab内存泄露问题)

    今天认真测试了下easyui的一些兼容性问题,发现在ie9 ie10 首次加载的时候,会出现如下bug.如图所示: 认真看了下,我估计是脚本重复引用的问题,我用的iframe框架的模式.登陆系统后,桌 ...

  5. 前台添加jquery的引用

    注意引用的顺序. 以下两个引用,因为bxCarousel.js引用了jquery.js所以jquery.js必须在bxCarousel.js的前面.一般来说对jquery.js的引用放在前面. < ...

  6. jQuery在线引用地址(全)

    转:https://www.cnblogs.com/lmyau/p/7736269.html 1.官网jquery压缩版引用地址: 3.1.1版本: <script src="http ...

  7. JQuery EasyUI 引用加载分析

    easyui是什么,就不介绍了,接触到前端的就算没用过,肯定也应该听说过.其次,本文不是介绍它提供如calendar.tree等这些功能如何使用的,这些官网上介绍都很详细,中文的网上也不少.本文是从e ...

  8. jquery远程引用地址大全

    jquery官方的引用地址,如图: <script typet="text/javascript" src="http://code.jquery.com/jque ...

  9. jquery在线引用

    转载:http://www.cnblogs.com/lzx-1024/p/7716615.html jquery-3.1.1(最新)官网jquery压缩版引用地址:<script src=&qu ...

  10. 百度jquery公共引用地址

    http://cdn.code.baidu.com/ http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js http://apps.bdimg.com/l ...

随机推荐

  1. 年假小 Plan

    Learn 董伟明 课程 https://www.pycourses.com/ Learn 500 Lines or Less https://github.com/HT524/500LineorLe ...

  2. VUE的安装与Django之间打通数据

    一  VUE的安装与项目创建 1.1.安装nodeJS 官网下载安装:https://nodejs.org/zh-cn/ 1.2.安装脚手架 vue官网 => 学习 => 教程 => ...

  3. pycharm修改选中字体颜色

    File->Setting->Editor->Color Scheme->General Scheme:Monokai 在方框内: Editor->Section Bac ...

  4. python web框架 Django 登录页面

    在django 项目下 创建一个templates 放模板的文件夹 html文件都放在这里 在里面写一个login.html 登录页面 urls.py 加上 login 对应关系 from djang ...

  5. vs中nodejs代码 resharper 提示 ECMAScript2015 Feature. your Current language level is ECMAScript5的解决办法

    问题如图 错误信息:ECMAScript 2015 Feature. your Current language level is: ECMAScript5 解决方法, 打开 Resharper -& ...

  6. LoadJS

    LoadJS是一个微小的异步加载器为现代浏览器(711字节). https://github.com/muicss/loadjs 介绍 LoadJS是一个微小的异步加载库的现代浏览器(IE9 +). ...

  7. ALV tree标准DEMO

    BCALV_TREE_01 ALV 树控制:构建层次树 BCALV_TREE_02 ALV 树控制:事件处理 BCALV_TREE_03 ALV 树控制:使用自己的上下文菜单 BCALV_TREE_0 ...

  8. PAT 1037 Magic Coupon[dp]

    1037 Magic Coupon(25 分) The magic shop in Mars is offering some magic coupons. Each coupon has an in ...

  9. kettle中的karaf设置

    Spoon.sh设置-Dpentaho.karaf.root.copy.dest.folder=$PENTAHO_KARAF_ROOT -Dpentaho.karaf.root.transient=f ...

  10. TWebBrowser: Determine when a page with Frames is completed

    TWebBrowser: Determine when a page with Frames is completed 6 comments. Current rating: (3 votes). L ...