WebJars 使い方メモ

Posted at 2015-05-03

#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/ にアクセスする。

##説明
###依存関係の追加

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 の中身

インストールされた 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 には大きく２つの種類がある。
１つが Bower WebJars で、もう１つが 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/ にアクセスする。

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

#参考

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up