2017年3月20日

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 官方文件