WebJars

在實作網頁服務時，常常會使用很多網頁前端的 framework，例如 jQuery, Bootstrap，以往在使用這些 framework 就只能下載這些 framework，然後自己放到開發的 app server 裡面，但這種手工管理的方式，對於套件的版本管理會造成很大的困擾，往往會搞不清楚哪些檔案是那些套件在使用的。

WebJars將這些常用的網頁前端 framework/library 都轉換成 Jar，然後借助 Maven 工具，讓我們可以用簡單的幾行 Maven 設定，就將整個 library include 到專案當中，也不會困擾要怎麼升級套件。只要是 JVM-based 的 web application 都能夠使用 Maven/Gradle/sbt/Ivy 等等 build tool 關聯到某個套件。

目前 WebJars 提供三種套件封裝的方式

• NPM WebJars

  1. 任何人都可以發布資源
  2. 根據 NPM 鏡像資源即時建立並部署資源
  3. NPM 是 javascript 資源包的一種格式

• Bower WebJars

  1. 任何人都可以發布資源
  2. 根據 Bower 鏡像資源即時建立並部署資源
  3. Bower 是 javascript css 資源包的一種格式

• Classic WebJars

  1. 只能由 WebJars 官方團隊發布資源
  2. 人工封裝及部署資源
  3. 手動建立 RequireJs 設定

以 Scala Play 2 為例，我們使用 Classic WebJars 的 SBT/Play2 方式，在 build.sbt 中增加 bootstrap webjar 設定

libraryDependencies ++= Seq(
  "org.webjars" % "bootstrap" % "3.3.7-1"
)

可以在 IDE 中看到增加的 bootstrap 及 jquery 的 jar files。

另外要注意 routes 設定裡面要保留這一行

# Map static resources from the /public folder to the /assets URL path
GET     /assets/*file              controllers.Assets.at(path="/public", file)

接下來就可以在網頁中使用 jquery 跟 bootstrap

http://localhost:9000/assets/lib/jquery/jquery.js

http://localhost:9000/assets/lib/bootstrap/css/bootstrap.css

從檔案管理員中可以看到整個 library 的資料很完整，bootstrap 也包含了 js extensions。

以往的 WebJars 網址會看到 library 的版本資訊，但現在這樣看起來是沒有版本資訊，這對於 library 更新的工作來說，會更節省一些時間。

References

WebJars介紹

WebJars servlet 3 使用示例

使用Maven匯入Webjars的bootstrap

Spring boot中使用WebJars

JavaWeb開發分享：WebJars

使用WebJar管理css、JavaScript文件

webjars 官方文件