play 2.2 webjars requirejs jquery 集成答案

【问题标题】：play 2.2 webjars requirejs jquery integrationplay 2.2 webjars requirejs jquery 集成
【发布时间】：2013-10-27 04:26:02
【问题描述】：

升级到play 2.2后，我无法让requirejs像以前一样工作。

在我看来，requirejs 没有正确初始化或配置。我尝试关注https://github.com/mariussoutier/play-angular-require-seed，但我什至无法让最简单的情况起作用。

jquery在main.js中可以正确定位，但是require(['jquery'].....)在tag中不起作用。

如果有人可以帮助我，将不胜感激。

webjars 定义

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 的概念。虽然 tag 中的两个 sn-ps 是一个接一个的放置，但不能保证它们按顺序执行。所以第二个sn -p运行的时候，可能还没有配置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>

为了解决这个问题，我们有两种不同的方法：

在 main.js 中包含第二个 sn-p 的 javascript 代码（在 data-main 中指定）并使用 require(['dependencies'], function() {// do second.js})
在包含requirejs时不要指定data-main字段，做第二部分的所有配置。

恕我直言，第一种方法是首选方法，并且与示例项目https://github.com/mariussoutier/play-angular-require-seed中使用的方法完全相同

【问题讨论】：

标签： javascript jquery requirejs playframework-2.2 webjars

【解决方案1】：

合格我的回复，绝对不是专家......

在您的 index.scala.html 页面中，您尝试使用异步加载的脚本。这会给你随机结果，因为它很可能不会及时加载。

来自 RequireJS 网站：

注意：脚本标签 require.js 为您的 data-main 模块生成包括 async 属性。这意味着您不能假设负载和您的数据主脚本的执行将在其他脚本之前完成稍后在同一页面中引用。

例如，当 'foo' 模块的 require.config 路径尚未在它之前设置稍后被 require() 处理：

<script data-main="scripts/main" src="scripts/require.js"></script>
<script src="scripts/other.js"></script>

// contents of main.js:
require.config({
    paths: {
        foo: 'libs/foo-1.1.3'
    }
});

// contents of other.js:

// This code might be called before the require.config() in main.js
// has executed. When that happens, require.js will attempt to
// load 'scripts/foo.js' instead of 'scripts/libs/foo-1.1.3.js'
require( ['foo'], function( foo ) {

});

还要注意...在您链接到的示例中，避免了这个问题，因为“require”的所有用法都发生在 main*.js 中

所以我认为您需要做的是将第二个脚本中包含的 JavaScript 代码包装在一个事件处理程序中，该处理程序正在侦听诸如 window.onload 或 DOMContentLoaded 事件之类的事件，以延迟执行直到这些事件被触发（并且所有内容都将存在且正确）。

参考资料：

【讨论】：

非常感谢您的澄清。我认为 require(['jquery'], ....) 中的所有依赖项都将通过指定 data-main 来加载，然后我可以在第二个