2

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

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

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>

main.js 加载完毕，控制台报错信息为

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

编辑 这里的关键是理解 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>

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

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

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

4

1 回答 1

0

有资格回答我，绝对不是专家...

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

从 RequireJS 网站：

注意：为您的 data-main 模块生成的脚本标签 require.js 包含 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 事件之类的事件，以延迟执行直到这些事件被触发（以及所有将存在且正确）。

参考：

于 2013-10-27T16:21:09.247 回答