Javascript play 2.2 webjars要求JS jquery集成_Javascript_Jquery_Requirejs_Playframework 2.2_Webjars

Javascript play 2.2 webjars要求JS jquery集成

javascript jquery requirejs

Javascript play 2.2 webjars要求JS jquery集成,javascript,jquery,requirejs,playframework-2.2,webjars,Javascript,Jquery,Requirejs,Playframework 2.2,Webjars,升级到play 2.2后，我无法让requirejs像以前一样工作在我看来，requirejs没有正确初始化或配置。我试着照做，但我甚至连最简单的理由都做不出来 jquery可以在main.js中正确定位，但require（['jquery']..）在标记中不起作用如果有人能帮我，我会非常感激的 webjars定义 libraryDependencies ++= Seq( javaJdbc, javaEbean, cache, "org.webjars" % "jquery"

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

在我看来，requirejs没有正确初始化或配置。我试着照做，但我甚至连最简单的理由都做不出来

jquery可以在main.js中正确定位，但require（['jquery']..）在标记中不起作用

如果有人能帮我，我会非常感激的

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>

编辑这里的关键是理解AMD的概念。虽然标记中的两个代码段是一个接一个地放置的，但它们不能保证按顺序执行。因此，当第二个代码段运行时，可能还没有配置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>


//第二段
require（['jquery']，函数（$）{return$；}）；

要解决此问题，我们有两种不同的方法：

在main.js（在data main中指定）中包含第二个代码段的javascript代码，并使用require（['dependencies']，function（）{//do second.js}）

在包含requirejs时，不要指定data main字段，而是执行第二部分中的所有配置

我想，第一种方法是首选的，而且正是在示例项目中使用的方法

限定了我的回答，绝对不是专家

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

从RequireJS站点：

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

例如，当 “foo”模块的require.config路径在此之前未设置以后被要求：


//main.js的内容：
require.config({
路径：{
foo:'libs/foo-1.1.3'
}
});
//other.js的内容：
//此代码可能在main.js中的require.config（）之前调用
//已经执行了。发生这种情况时，require.js将尝试
//加载“scripts/foo.js”而不是“scripts/libs/foo-1.1.3.js”
require（['foo']，函数（foo）{
});

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

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

参考资料：

非常感谢您的澄清。我认为require（['jquery']，..）中的所有依赖项都将通过指定datamain来加载，然后我可以在第二个标记中使用它们。现在我了解了异步模块加载的概念。为了使整个工作正常进行，我需要在data main中的other.js中包含代码片段，或者直接在other.js中配置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>

<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 ) {

});