SpringBoot项目使用WebJars时JS文件的引入路径问题

---

前言

因为我们的工作大多数是向外提供接口那种类型的项目，前一段时间忽然要写一个项目的管理端，所以要使用一些前端框架，然后使用WebJars引用前端js的时候发现每一个包的引用路径我们都很疑惑，后来查了资料，所以现在记录一下

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、WebJars是什么？

这里先放一下官网的介绍：

我英文也不好，所以官网介绍我也不翻译了，大家自行查看吧。

按照我的简单理解，WebJars就是将类似jQuery一样的web资源按照指定的格式打包，然后在Maven、Gradle或者其他依赖管理工具中直接引入即可使用技术。

二、使用步骤

这里以select2具一格栗子，其他项目引入方式基本一致

1.从WebJars官网查询依赖

从WebJars官网查询可用的WebJars依赖

1. 进入官网地址
   WebJars官网
2. 查询需要的依赖
   注意右上角小的输入框输入搜索内容，然后下边一行可以选择使用的项目依赖管理工具，我们选择了maven，可以根据需求查看其他管理工具的引用代码
   

2.引入Maven仓库

        <dependency>
            <groupId>org.webjars.npm</groupId>
            <artifactId>select2</artifactId>
            <version>4.0.13</version>
        </dependency>

注：这里是用了SpringBoot框架的项目，如果是其他项目，是需要单独引用另外的WebJars包。
具体引用方式请查看WebJars官网
SpringMvc项目引入： Instructions for Spring MVC
Vert.x项目引入：Instructions for Vert.x Web

3.HTML中引用JS相关资源

代码如下（示例）：

<script th:src="@{/webjars/select2/dist/js/select2.js}"></script>
<link rel="stylesheet" th:href="@{/webjars/select2/dist/css/select2.min.css}"/>

三、确定HTML引用路径的过程

做完上边的步骤，就可以在代码中愉快的使用WebJars引入的select2资源了，但是这个HTML中引用的路径是怎么来的，来具体解释一下
首先打开IDEA中引用的包查看一下内容:

这么多目录，一层一层分析吧
首先maven的项目，静态文件以及配置文件应该都在resources目录下，但是这个目录引用的时候不用写路径上去，这个没什么说的。先进去resources目录， 然后是webjars目录，这个需要在引入的时候写到路径上，所以现在的路径是

/webjars/

然后下一层是select2，继续添加上

/webjars/select2/

下边就有点麻烦了，这一串应该是版本号，但是这个版本号的目录具体怎么写我是真有点懵，是写成 /webjars/select2/4.0.13/ 还是 /webjars/select2/4/0/13
临时想了一个办法，去本地的Maven仓库里找打了这个包，然后解压开，确定4.0.13是一个文件夹，中间的点是文件夹名字中的点，不是java包的那种根据目录分开的点，然后路径成了

/webjars/select2/4.0.13/

下边就是dist和src了，一般编译或者压缩之后，引入使用的都是dist，这里我们引用一下

/webjars/select2/4.0.13/dist/

然后根据需要的资源，引入js文件和css文件，就有了

/webjars/select2/dist/js/select2.js
/webjars/select2/dist/css/select2.min.css

这两个URL

四、总结

但是，虽然这一次解决了，下一次还会遇到相同的问题，如果不完全了解结构下次还是要去解包，这非常难受，所以查了一些资料，这里说一下结论：
WebJars包内的静态文件存放规则为：

META-INF/resources/webjars/${name}/${version}

其中META-INF/resources/webjars为固定的目录，不用操心，${name} 一般也没有太大的问题，为项目名称，这个一般也不会有什么问题，看一下就知道了
我们最关心的是 ${version} 这个位置，这个位置确认是版本号以后我们的下次遇到的项目就不用再解包确认路径了，引用链接直接写成

/webjars/${name}/${version}/...

就可以了

五、扩展

后来想想这个引用URL中每次都要写上版本号的话，一旦升级了WebJars引用的web资源版本，那就要重新查找替换一遍版本号，然而我们一般写java代码的时候是不关心版本号的，又感觉既然版本号的路径是固定的，那应该就可以自动补全版本号。
之后又查资料，发现SpringMvc的项目可以添加这个Maven引用，之后html里引用的WebJars管理的资源URL就可以不添加版本号了

        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>webjars-locator</artifactId>
            <version>0.30</version>
        </dependency>

就可以使

<script th:src="@{/webjars/select2/4.0.13/dist/js/select2.js}"></script>

简化成

<script th:src="@{/webjars/select2/dist/js/select2.js}"></script>

从上边写的HTML引用代码可以看出来，我们使用的资源URL上都没有添加版本号，项目正常运行。