升级玩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"
主要.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中的两个snippet虽然是一个接一个的放着，但是并不能保证顺序执行。因此，当第二个片段运行时，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 中包含第二个片段的 javascript 代码(在 data-main 中指定)并使用 require(['dependencies'], function() {//do second.js})
- 在引入requirejs时不指定data-main字段，全部配置在第二部分。
恕我直言，第一种方法是首选，并且正是示例项目中使用的方法 https://github.com/mariussoutier/play-angular-require-seed
最佳答案
限定我的回答，绝对不是专家...
在您的 index.scala.html 页面中，您尝试使用异步加载的脚本。这将为您提供随机结果，因为它很可能无法及时加载。
来自 RequireJS 网站:
Note: the script tag require.js generates for your data-main module includes the async attribute. This means that you cannot assume that the load and execution of your data-main script will finish prior to other scripts referenced later in the same page.
For example, this arrangement will fail randomly when the require.config path for the 'foo' module has not been set prior to it being require()'d later:
<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 事件之类的事件，以延迟执行直到这些事件被触发(并且所有内容都将存在且正确)。
引用资料:
关于javascript - play 2.2 webjars requirejs jquery 集成，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19614615/