こんにちは、Habrの読者の皆さん！この記事では、Play Frameworkのサンプルアプリケーション用のWebJarsを（遅ればせながら）急いで説明します。
ほとんどすべてのWebアプリケーションでは、サードパーティのjavascriptライブラリがなくてはできません。 それらを追加する最も簡単な方法：ダウンロードしてプロジェクトに追加し、ファイルをgitリポジトリに追加します。 解決策は適切ですが、個人的には、プロジェクト内の静的要素の存在は少し面倒です。 別の方法があります。google、yandexなどのjsライブラリの外部ホスティングへのリンクを指定します。 原則として、オプションですが、私の実践では、開発を継続する必要があり、インターネットアクセスが望まれずに残っていたり、まったく存在しなかったため、クライアント部分が機能しなかった場合がありました。 私にとって最も適切なソリューションは、プロジェクトに依存関係としてjsライブラリを追加することです。Rubyon Railsで同様のアプローチを考え出すことができます。
要点をつかむJavaベースの言語で書かれたWebアプリケーションがあり、それにJavaScriptライブラリをいくつか追加する必要があります。この場合、WebJarsが理想的です。
WebJars-JSライブラリおよび/またはCSSモジュールを含むライブラリのセット。
ライブラリの完全なリストは
こちらにあります 。 それぞれには、jsライブラリのバージョンに対応するいくつかのバージョンがあります。 すべてのWebJarはMavenリポジトリで利用できます。
この例では、WebJarsがPlay Frameworkアプリケーションでどのように使用されるかを説明します。 WebJarを他のフレームワークに追加する方法の説明は、
ここにあります 。
降りるWebJarを追加するには、プロジェクトに新しい依存関係を追加するだけです。
例：
libraryDependencies ++= Seq( cache, ws, "org.webjars" %% "webjars-play" % "2.3.0-2", "org.webjars" % "requirejs" % "2.1.14-3", "org.webjars" % "requirejs-domready" % "2.0.1-2", "org.webjars" % "jquery" % "2.1.1", "org.webjars" % "bootstrap" % "3.2.0-2" )
プロジェクトをコンパイルすると、target / webディレクトリに新しいweb-modulesフォルダーが見つかる場合があります。 プロジェクトに追加されたjsおよびcssファイルが含まれています。
これらのファイルには、routes.Assets.at（ "lib / requirejs / require.js"）という昔ながらの方法で表示できますが、このための完全なパスを知る必要があります。 既製のWebJarsコントローラーを使用するもう1つのコーシャーの方法。 これを行うには、WebJars専用のconf / routesに新しいルートを追加します。
GET /lib
ビューからそれらにアクセスするには、WebJars WebJarAssets.locateの別のメソッドを使用できます。 指定されたメソッド自体は、WebJarsを使用してディレクトリ内で必要なファイルを検索します。 その結果、以下が得られます。
<link rel="stylesheet" href="@routes.WebJarAssets.at(WebJarAssets.locate("bootstrap.min.css"))">
htmlページの内容は次のようになります
<link rel="stylesheet" href="/lib/bootstrap/3.2.0-2/css/bootstrap.min.css">
便利ではないですか？ しかし、それだけではありません。
RequireJSきっとあなたはすでにこの素晴らしいjsフレームワークの楽しみについて聞いたことがあるので、このトピックについてはお話ししません。
WebJarsには、RequireJSとのより便利な統合のためのメカニズムが含まれています。 ターゲット/ web / web-modules / main / webjars / lib / jqueryディレクトリに移動すると、内容が含まれるwebjars-requirejs.jsファイルが見つかります。
各WebJarには、RequireJSの構成ファイルがあります。 一般的な構成を取得するには、requireJsConfigという名前の新しいビューを作成します。
@Html(org.webjars.RequireJS.getSetupJavaScript(routes.WebJarAssets.at("").url))
アプリケーションコントローラーに新しいアクションを追加します。
import play.api.cache.Cached import views._ import play.api.Play.current def requireJsConfig = Cached("require_js_config") { Action { Ok(html.requireJsConfig()).as("application/javascript") } }
実行結果をキャッシュします。これは、プロジェクトで使用されるWebJarを追加/削除するときにのみその内容が変更されるためです。 コンテンツがjavascriptであることを明示的に示すために、結果をapplication / javascriptとしてマークします。
新しいルートを追加します。
GET /files/config.js controllers.Application.requireJsConfig
静的jsファイルのようなURLレジスタのために楽しい。
ブラウザで、
http：// localhost：9000 / files / config.jsにアクセスして、何が起こったかを確認し
ます var webjars = { versions: {"requirejs-domready":"2.0.1","requirejs":"2.1.14-3","bootstrap":"3.2.0-2","jquery":"2.1.1"}, path: function(webJarId, path) { console.error('The webjars.path() method of getting a WebJar path has been deprecated. The RequireJS config in the ' + webJarId + ' WebJar may need to be updated. Please file an issue: http://github.com/webjars/' + webJarId + '/issues/new'); return ['/lib/' + webJarId + '/' + webjars.versions[webJarId] + '/' + path]; } }; var require = { callback: function() {
このスクリプトは、RequireJSを必要な方法でセットアップし、RequireJS自体よりも前に配置する必要があります。
ファイナルapp / asset / js / main.coffeeディレクトリーに小さなcoffescriptファイルを作成してみましょう（誰かがこれに腹を立てても申し訳ありませんが、純粋なjavascriptにうんざりしています）。
require ['jquery','requirejs-domready!'],-> $('body').text 'Success'
そして、私たちの興味を引く見方で、私たちは付け加えます。
<script type="application/javascript" src="@routes.Application.requireJsConfig()"></script> <script data-main="@routes.Assets.at("js/main.js")" src="@routes.WebJarAssets.at(WebJarAssets.locate("require.min.js"))"></script>
必要なすべてのjavascriptファイルがロードされ、コードが実行されることを確認します。
まとめこの例では、WebJarsの機能を紹介しました。 根本的に革新的なものは見つかっていませんが、それでもフロントエンド開発を促進します。