WebJars + RequireJS

こんにちは、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/*file controllers.WebJarAssets.at(file)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ビューからそれらにアクセスするには、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ファイルが見つかります。

 /*global requirejs */ // Ensure any request for this webjar brings in jQuery. requirejs.config({ paths: { "jquery": webjars.path("jquery", "jquery") }, shim: { "jquery": { "exports": "$" } } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

各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() { // Deprecated WebJars RequireJS plugin loader define('webjars', function() { return { load: function(name, req, onload, config) { if (name.indexOf('.js') >= 0) { console.warn('Detected a legacy file name (' + name + ') as the thing to load. Loading via file name is no longer supported so the .js will be dropped in an effort to resolve the module name instead.'); name = name.replace('.js', ''); } console.error('The webjars plugin loader (eg webjars!' + name + ') has been deprecated. The RequireJS config in the ' + name + ' WebJar may need to be updated. Please file an issue: http://github.com/webjars/webjars/issues/new'); req([name], function() {; onload(); }); } } }); // All of the WebJar configs requirejs.config({"paths":{"requirejs-domready":["/lib/requirejs-domready/2.0.1/domReady","domReady"]}}) requirejs.config({"paths":{}}) requirejs.config({"paths":{"bootstrap":["/lib/bootstrap/3.2.0-2/js/bootstrap","js/bootstrap"],"bootstrap-css":["/lib/bootstrap/3.2.0-2/css/bootstrap","css/bootstrap"]},"shim":{"bootstrap":["jquery"]}}) requirejs.config({"paths":{"jquery":["/lib/jquery/2.1.1/jquery","jquery"]},"shim":{"jquery":{"exports":"$"}}}) } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このスクリプトは、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の機能を紹介しました。 根本的に革新的なものは見つかっていませんが、それでもフロントエンド開発を促進します。