Help us understand the problem. What is going on with this article?

WebJars 使い方メモ

More than 5 years have passed since last update.

WebJars とは

  • JavaScript や CSS などのクライアントサイドのライブラリの依存関係を、 Maven (Gradle)で管理できるようにした仕組み。サービス。
  • 推移的な依存関係の管理もやってくれる。

Hello World

実装

build.gradle
buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'com.sahlbach.gradle:gradle-jetty-eclipse-plugin:1.9.+'
    }
}

apply plugin: 'jettyEclipse'
apply plugin: 'war'

repositories {
    mavenCentral()
}

dependencies {
    compile 'org.webjars:jquery-ui:1.11.4'
}
src/main/webapp/index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />

    <link rel="stylesheet" href="webjars/jquery-ui/1.11.4/jquery-ui.min.css" />

    <script src="webjars/jquery/1.11.1/jquery.min.js"></script>
    <script src="webjars/jquery-ui/1.11.4/jquery-ui.min.js"></script>

    <script>
    $(function() {
        $('#dialog').dialog();
    });
    </script>
  </head>
  <body>
    <div id="dialog" title="sample">
      <h1>Hello WebJars!!</h1>
    </div>
  </body>
</html>

動作確認

サーバーの起動
$ gradle jettyEclipseRun

ブラウザで http://localhost:8080/ にアクセスする。

webjars.JPG

説明

依存関係の追加

build.gradle
repositories {
    mavenCentral()
}

dependencies {
    compile 'org.webjars:jquery-ui:1.11.4'
}

Java のライブラリと同じノリで、 jQuery UI の依存関係を設定する。

$ gradle dependencies

compile - Compile classpath for source set 'main'.
\--- org.webjars:jquery-ui:1.11.4
     \--- org.webjars:jquery:1.11.1

ちゃんと jQuery への依存関係が推移的に解決されている。

インストールされた jar の中身

webjars.JPG

インストールされた jar ファイルには、 JS ファイルなどが格納されている。

JS ファイルなどへのアクセス

index.html
    <link rel="stylesheet" href="webjars/jquery-ui/1.11.4/jquery-ui.min.css" />

    <script src="webjars/jquery/1.11.1/jquery.min.js"></script>
    <script src="webjars/jquery-ui/1.11.4/jquery-ui.min.js"></script>
  • Jar 内に格納されているファイルには、 webjars/ で始まるパスからアクセスできる。

ライブラリを探す

WebJars には大きく2つの種類がある。
1つが Bower WebJars で、もう1つが Classic WebJars

Bower WebJars には有志が作った jar が登録されていて、 Classic WebJars には WebJars のチームが作成した jar が登録されている。

それぞれのページで、使用したいライブラリを検索することができる。
また、 Gradle などで使うときの依存関係の記述方法も上記ページで確認できる。

Servlet 3.x の環境で使う

Hello World で紹介した方法で利用できる。

利用したいライブラリを依存関係に追加するだけで使えるようになる。

Servlet 2.x の環境で使う

※Gradle 2.3 で検証

build.gradle
apply plugin: 'jetty'

repositories {
    mavenCentral()
}

dependencies {
    compile 'org.webjars:jquery-ui:1.11.4'
    compile 'org.webjars:webjars-servlet-2.x:1.1'
}

jettyRun.contextPath = ''
web.xml
<?xml version="1.0" encoding="Shift_JIS"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    id="WebJarsSample" version="2.5">

    <servlet>
      <servlet-name>WebjarsServlet</servlet-name>
      <servlet-class>org.webjars.servlet.WebjarsServlet</servlet-class>
      <load-on-startup>2</load-on-startup>
    </servlet>

    <servlet-mapping>
      <servlet-name>WebjarsServlet</servlet-name>
      <url-pattern>/webjars/*</url-pattern>
    </servlet-mapping>
</web-app>

HTML ファイルは、 Hello World のときと同じものを使用。

フォルダ構成
|-build.gradle
`-src/main/webapp
   |-index.html
   `-WEB-INF/
      `-web.xml
動作確認
$ gradle jettyRun

ブラウザを開いて http://localhost:8080/ にアクセスする。

webjars.JPG

Servlet 2.x の環境で WebJars を利用する場合は、webjars-servlet-2.x を依存関係に追加して、 web.xml で WebjarsServlet のマッピングを定義する。

参考

opengl-8080
ただのSE。Java好き。
tis
創業40年超のSIerです。
https://www.tis.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away