傳統管理靜態資源主要依賴于復制粘貼，不利于后期維護，為了讓大家往后更舒心，讓webjars給靜態資源來一次搬家革命吧！！
學習目標
簡單兩步！快速學會使用webjars統一管理前端依賴。
快速查閱
源碼下載：springboot webjars learning
使用教程
一、引入相關依賴
在 webjars官網 找到項目中需要的依賴，例如在項目中引入jquery、bootstrap前端組件等。例如：
- 版本定位工具：webjars-locator-core
- 前端組件：jquery 、bootstrap
|
1
2
3
4
5
6
7
8
9
10
|
<dependency><!--webjars版本定位工具（前端）--> <groupid>org.webjars</groupid> <artifactid>webjars-locator-core</artifactid> </dependency> <dependency><!--jquery組件（前端）--> <groupid>org.webjars</groupid> <artifactid>jquery</artifactid> <version>3.3.1</version> </dependency> |
二、訪問靜態資源
在瀏覽器訪問靜態資源：
快速訪問：http://localhost:8080/webjars/jquery/jquery.js （推薦）
快速訪問：http://localhost:8080/webjars/jquery/3.3.1/jquery.js
新手提問：
有小伙伴可能疑問，既然springboot天然支持webjars的靜態資源訪問，為什么還要額外添加定位工具webjars-locator-core呢？
快速答疑：
主要是為了解決訪問webjars靜態資源時必須攜帶版本號的繁瑣問題。舉個例子，某項目準備將bootstrap 3.3.x 升級到 4.x 大版本，此時除了在pom文件調整之外，還需要大面積的在頁面中調整因為版本號變更引起問題的路徑，而使用定位器之后無需輸入版本號自動定位。
總結
使用webjars對前端依賴進行統一管理有什么好處呢？
1、靜態資源版本化
傳統的靜態資源需要自行維護，資源種類繁多，使得項目后期越來越臃腫，維護版本升級也變得困難，而使用webjars方式進行管理后，版本升級問題迎刃而解。
2、提升編譯速度
經測試，使用webjars的方式管理依賴可以給項目的編譯速度帶來2-5倍的速度提升，還在猶豫的小伙伴快點嘗試起來吧！
3、在webjars官方找不到自己想要的依賴怎么辦？
解決辦法：將下載好的靜態資源目錄發布到公司私服倉庫即可。
例如：新建一個springboot項目，手工創建目錄 meta-inf/resources/ ，將靜態資源完整復制進去，然后發布公司maven私服即可。當然，這只是簡潔做法，如果想按照打造標準的webjars資源請繼續看下方。
4、將靜態資源發布成標準的webjars格式怎么弄？
解決辦法：以metronic為例 發布標準的webjars 資源到公司私服。
webjars發布流程：
1、新建springboot工程 然后在src\main\resources\ 新建目錄 meta-inf\resources\webjars\metronic 重點來了 這里4.1.9 必須跟pom文件的<version>4.1.9</version>保持一致。
2、修改pom文件 填寫項目信息和公司私服地址。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<?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> <!--項目信息--> <groupid>org.webjars</groupid> <artifactid>metronic</artifactid> <version>4.1.9</version> <packaging>jar</packaging> <name>metronic</name> <description>metronic</description> <!--維護信息--> <developers> <developer> <name>socks</name> <email>https://github.com/yizhiwazi</email> </developer> </developers> <!--發布地址--> <distributionmanagement> <repository> <id>xx-repo</id> <!--這里替換成公司私服地址--><url>http://127.0.0.1:8088/nexus/content/repositories/thirdparty/</url> </repository> <snapshotrepository> <id>xx-plugin-repo</id> <!--這里替換成公司私服地址--><url>http://127.0.0.1:8088/nexus/content/repositories/thirdparty/</url> </snapshotrepository> </distributionmanagement></project> |
3、在本地maven的配置文件指定公司私服的賬號密碼。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<?xml version="1.0" encoding="utf-8"?><settings xmlns="http://maven.apache.org/settings/1.0.0" xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xsi:schemalocation="http://maven.apache.org/settings/1.0.0 http://maven.apache.org/xsd/settings-1.0.0.xsd"> <localrepository>d:\dev\mvnrepository</localrepository> <mirrors> <!-- 阿里云倉庫 --> <mirror> <id>aliyun</id> <mirrorof>central</mirrorof> <name>aliyun-all</name> <url>http://maven.aliyun.com/nexus/content/groups/public/</url> </mirror> <!-- 中央倉庫1 --> <mirror> <id>repo1</id> <mirrorof>central</mirrorof> <name>human readable name for this mirror.</name> <url>http://repo1.maven.org/maven2/</url> </mirror> <!-- 中央倉庫2 --> <mirror> <id>repo2</id> <mirrorof>central</mirrorof> <name>human readable name for this mirror.</name> <url>http://repo2.maven.org/maven2/</url> </mirror> </mirrors> <!-- 暫時在發布倉庫到213的時候用到--> <servers> <!-- 倉庫地址賬號 --> <server> <id>xx-repo</id> <username>admin</username> <password>123456</password> </server> <!-- 插件地址賬號 --> <server> <id>xx-plugin-repo</id> <username>admin</username> <password>123456</password> </server> </servers></settings> |
4、打開idea->maven->deploy 將項目到公司私服，大功告成。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://www.jianshu.com/p/66d1b35bcd9d
