2

play 2.2 にアップグレードした後、requirejs を以前のように動作させることができません。

requirejs が正しく初期化または構成されていないようです。https://github.com/mariussoutier/play-angular-require-seedをフォローしようとしましたが、最も単純なケースを機能させることさえできません。

jquery は main.js に正しく配置できますが、require(['jquery'].....) はタグでは機能しません。

誰かがこれで私を助けることができれば、それは大歓迎です。

Webjar定義

libraryDependencies ++= Seq(
  javaJdbc,
  javaEbean,
  cache,
  "org.webjars" % "jquery" % "1.10.2",
  "org.webjars" % "requirejs" % "2.1.1",
  "org.webjars" % "webjars-play_2.10" % "2.2.0"
)     

resolvers += "typesafe" at "http://repo.typesafe.com/typesafe/repo"

requireJs += "main.js"

requireJsShim += "main.js"

main.js

 (function(requirejs) {
      "use strict";

      // -- PROD RequireJS config --
      requirejs.config({
        shim: {
          "jquery": { exports: "$" }
        },
        paths: {
          "jquery": ["/webjars/jquery/1.10.2/jquery.min"]
        }
      });
      // It works fine here        
      require(["jquery"], function($) {
        console.log($);
      });
    })(requirejs);

index.scala.html

@(title: String)

<html>
    <body>
    <script src='/lib/require.js' type='text/javascript' data-main="/assets/javascripts/main"></script>
    <script type="text/javascript">
        require(["jquery"], function($) {
            console.log($);
            });
    </script>
    </body>
</html>

main.js が読み込まれ、コンソールのエラー メッセージは

Uncaught TypeError: Property 'require' of object [object Object] is not a function

編集 ここで重要なのは、AMD の概念を理解することです。タグ内の 2 つのスニペットは次々に配置されますが、順番に実行されるとは限りません。したがって、2 番目のスニペットが実行されるとき、requirejs はまだ構成されていない可能性があります。

<script src='webjars/requirejs/2.1.8/require.js' type='text/javascript' data-main="javascripts/main"></script>
<script type='text/javascript'>
    // Second snippet
    require(['jquery'], function($) {return $;});
</script>

これを修正するには、2 つの異なるアプローチがあります。

  1. 2 番目のスニペットの JavaScript コードを main.js (data-main で指定) に含め、require(['dependencies'], function() {// do second.js}) を使用します。
  2. requirejs を含める場合は data-main フィールドを指定せず、すべての構成を 2 番目の部分で行います。

私見、最初のアプローチが推奨され、サンプルプロジェクトhttps://github.com/mariussoutier/play-angular-require-seedで使用されているものとまったく同じです

4

1 に答える 1