WebJarsの概要
1. 概要
このチュートリアルでは、WebJarと、それらをJavaアプリケーションで使用する方法を紹介します。
簡単に言えば、WebJarはJARアーカイブファイルにパッケージ化されたクライアント側の依存関係です。 ほとんどのJVMコンテナおよびWebフレームワークで動作します。
人気のあるWebJarをいくつか紹介します：Twitter Bootstrap、jQuery、Angular JS、Chart.jsなど。完全なリストはofficial websiteにあります。
2. WebJarsを使用する理由
この質問の答えは非常に簡単です。簡単だからです。
Manually adding and managing client side dependencies often results in difficult to maintain codebases。
また、ほとんどのJava開発者は、ビルドおよび依存関係管理ツールとしてMavenおよびGradleを使用することを好みます。
WebJarsが解決する主な問題は、クライアント側の依存関係をMaven Centralで利用可能にし、標準のMavenプロジェクトで使用できるようにすることです。
WebJarsの興味深い利点をいくつか次に示します。
-
JVMベースのWebアプリケーションでクライアント側の依存関係を明示的かつ簡単に管理できます。
-
Maven、Gradleなど、一般的に使用されるビルドツールで使用できます。
-
WebJarsは他のMaven依存関係と同様に動作します。つまり、推移的な依存関係も取得されます。
3. Mavenの依存関係
すぐにそれに飛び込んで、Twitter BootstrapとjQueryをpom.xmlに追加しましょう：__
org.webjars
bootstrap
3.3.7-1
org.webjars
jquery
3.1.1
これで、プロジェクトのクラスパスでTwitter BootstrapとjQueryが利用可能になりました。それらを単に参照し、アプリケーションで使用できます。
注：Maven CentralのTwitter BootstrapおよびjQuery依存関係の最新バージョンを確認できます。
4. シンプルなアプリ
これらの2つのWebJar依存関係を定義したら、クライアント側の依存関係を使用できるように、単純なSpringMVCプロジェクトをセットアップしましょう。
ただし、その前に、WebJars have nothing to do with Springを理解することが重要です。ここでは、MVCプロジェクトを設定するための非常に迅速で簡単な方法であるSpringのみを使用しています。
Here’s a good place to startを使用して、SpringMVCおよびSpringBootプロジェクトをセットアップします。
そして、簡単なプロジェクトのセットアップで、新しいクライアントの依存関係のいくつかのマッピングを定義します。
@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry
.addResourceHandler("/webjars/**")
.addResourceLocations("/webjars/");
}
}もちろん、XMLでも同様に行うことができます。
5. バージョンに依存しない依存関係
Spring Frameworkバージョン4.2以降を使用すると、クラスパス上のwebjars-locatorライブラリが自動的に検出され、それを使用してWebJarsアセットのバージョンが自動的に解決されます。
この機能を有効にするために、アプリケーションの依存関係としてwebjars-locatorライブラリを追加します。
org.webjars
webjars-locator
0.30
この場合、バージョンを使用せずにWebJarsアセットを参照できます。実際の例については、次のセクションを参照してください。
6. クライアント上のWebJars
単純なプレーンHTMLウェルカムページをアプリケーションに追加しましょう（これはindex.htmlです）。
WebJars Demo
これで、プロジェクトでTwitter BootstrapとjQueryを使用できるようになりました。Bootstrapから始めて、ウェルカムページで両方を使用しましょう。
バージョンに依存しないアプローチの場合：
jQueryを追加します。
そして、バージョンに依存しないアプローチ：
7. テスト
HTMLページにTwitterBootstrapとjQueryを追加したので、それらをテストしてみましょう。
ページにブートストラップalertを追加します。
Success! It is working as we expected.
ここでは、TwitterBootstrapの基本的な理解が前提となっていることに注意してください。これが公式のgetting started guidesです。
これにより、以下に示すようにalertが表示されます。これは、TwitterBootstrapがクラスパスに正常に追加されたことを意味します。
それでは、jQueryを使用しましょう。 このアラートに閉じるボタンを追加します。
次に、閉じるボタン機能のためにjQueryとbootstrap.min.jsを追加する必要があるため、以下のようにindex.html,のbodyタグ内に追加します。
注：バージョンに依存しないアプローチを使用している場合は、パスからバージョンのみを削除してください。そうしないと、相対インポートが機能しない場合があります。
これが、最終的なウェルカムページの外観です。
WebJars Demo
×
Success! It is working as we expected.
これは、アプリケーションの外観です。 （そして、閉じるボタンをクリックするとアラートが消えます。）
8. 結論
この簡単な記事では、JVMベースのプロジェクトでWebJarを使用する基本に焦点を当てました。これにより、開発と保守がはるかに簡単になります。
Spring Bootをサポートするプロジェクトを実装し、WebJarsを使用するプロジェクトでTwitter BootstrapとjQueryを使用しました。
上記で使用した例のソースコードはGithub projectにあります。これはMavenプロジェクトであるため、インポートとビルドが簡単です。