WebJarsの紹介 - 開発者ドキュメント

1概要

このチュートリアルでは、WebJarsとそれらをJavaアプリケーションで使用する方法を紹介します。

簡単に言えば、WebJarsはJARアーカイブファイルにパッケージ化されたクライアント側の依存関係です。それらはほとんどのJVMコンテナとWebフレームワークで動作します。

ここにいくつかの人気のあるWebJarsがあります。完全なリストはhttp://www.webjars.org/[公式ウェブサイト]にあります。

** 2 WebJarsを使用する理由

この質問は非常に単純な答えを持っています – それは簡単だからです。

クライアント側の依存関係を手動で追加して管理すると、コードベースの管理が困難になることがよくあります** 。

また、ほとんどのJava開発者は、ビルドおよび依存関係管理ツールとしてMavenとGradleを使用することを好みます。

WebJarsが解決する主な問題は、Maven Centralでクライアント側の依存関係を利用可能にし、標準のMavenプロジェクトで使用できるようにすることです。

WebJarsのいくつかの興味深い利点は次のとおりです。

クライアントサイドの依存関係を明示的にそして簡単に管理することができます.

JVMベースのWebアプリケーション
。 Maven、Gradle、

等
。 WebJarsは他のMavenの依存関係と同じように動作します。

推移的な依存関係も得る

** 3 Mavenの依存関係

**

それに飛び込んで、Twitter BootstrapとjQueryを

pom.xml

に追加しましょう。

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>3.3.7-1</version>
</dependency>
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>3.1.1</version>
</dependency>

Twitter BootstrapとjQueryがプロジェクトのクラスパスで利用可能になりました。単純にそれらを参照してアプリケーションで使用することができます。

注:https://mvnrepository.com/artifact/org.webjars/bootstrap[Twitter Bootstrap]およびhttps://mvnrepository.com/artifact/org.webjars/jquery[jQuery]の依存関係の最新バージョンを確認できます。 Maven Centralで。

4シンプルなアプリ

これら2つのWebJar依存関係を定義したら、今度はクライアント側の依存関係を使用できるように簡単なSpring MVCプロジェクトを設定しましょう。

その前に、

WebJarsはSpring

とは無関係であることを理解することが重要です。MVCプロジェクトを設定するのは非常に迅速で簡単な方法であるため、ここではSpringのみを使用します。

link:/thymeleaf-in-spring-mvc Spring MVCとSpring Bootプロジェクトを設定するには[ここから始めるのが良いでしょう]。

そして、簡単なプロジェクトをセットアップしたら、新しいクライアントの依存関係に対していくつかのマッピングを定義します。

@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry
          .addResourceHandler("/webjars/** ** ")
          .addResourceLocations("/webjars/");
    }
}

もちろんXMLでも可能です。

<mvc:resources mapping="/webjars/** ** " location="/webjars/"/>

5.バージョンに依存しない依存関係

Spring Frameworkのバージョン4.2以降を使用している場合は、クラスパス上の

webjars-locator

ライブラリを自動的に検出し、それを使用してWebJarsアセットのバージョンを自動的に解決します。

この機能を有効にするために、アプリケーションの依存関係として

webjars-locator

ライブラリを追加します。

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>webjars-locator</artifactId>
    <version>0.30</version>
</dependency>

この場合、バージョンを使用せずにWebJarsアセットを参照できます。実際の例については、次のセクションを参照してください。

** 6. クライアント上のWebJars

**

単純なプレーンなHTMLのウェルカムページをアプリケーションに追加しましょう（これは

index.html

です）。

<html>
    <head>
        <title>WebJars Demo</title>
    </head>
    <body>
    </body>
</html>

これで、プロジェクトでTwitter BootstrapとjQueryを使用できます。Bootstrapから始めて、ようこそページで両方を使用しましょう。

<script src="/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js"></script>

バージョンに依存しないアプローチの場合:

<script src="/webjars/bootstrap/js/bootstrap.min.js"></script>

jQueryを追加します。

<script src="/webjars/jquery/3.1.1/jquery.min.js"></script>

そしてバージョンにとらわれないアプローチ:

<script src="/webjars/jquery/jquery.min.js"></script>

7. テスト中

HTMLページにTwitter BootstrapとjQueryを追加したので、それらをテストしましょう。

私たちのページにブートストラップ

alert

を追加します。

<div class="container"><br/>
    <div class="alert alert-success">
        <strong>Success!</strong> It is working as we expected.
    </div>
</div>

ここではTwitter Bootstrapの基本的な知識がある程度想定されていることに注意してください。これが公式のhttp://getbootstrap.com/components/[取得開始ガイド]です。

これにより、以下に示すように

alert

が表示されます。これは、Twitter Bootstrapをクラスパスに追加したことを意味します。

今jQueryを使ってみましょう。このアラートに閉じるボタンを追加します。

<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>

閉じるボタン機能のために

Query

とbootstrap.min.js

を追加する必要がありますので、それらを

index.htmlのbodyタグの内側に追加します。

<script src="/webjars/jquery/3.1.1/jquery.min.js"></script>
<script src="/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js"></script>

注:バージョンに依存しないアプローチを使用している場合は、パスからバージョンのみを削除するようにしてください。そうしないと、相対インポートが機能しない場合があります。

<script src="/webjars/jquery/jquery.min.js"></script>
<script src="/webjars/bootstrap/js/bootstrap.min.js"></script>

これが最終的なウェルカムページの外観です。

<html>
    <head>
        <script src="/webjars/jquery/3.1.1/jquery.min.js"></script>
        <script src="/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js"></script>
        <title>WebJars Demo</title>
        <link rel="stylesheet"
          href="/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css"/>
    </head>
    <body>
        <div class="container"><br/>
            <div class="alert alert-success">
                <a href="#" class="close" data-dismiss="alert"
                  aria-label="close">×</a>
                <strong>Success!</strong> It is working as we expected.
            </div>
        </div>
    </body>
</html>

これがアプリケーションの外観です。（閉じるボタンをクリックすると、アラートは消えます。）

/uploads/webjarsdemo-768×147.jpg%20768w