当我加载velocity.ui
时,我在控制台上出现间歇性错误:
Velocity UI Pack: Velocity must be loaded first. Aborting.
并且velocity.ui
的动画都没有。
我可以用这么简单的东西重现这个问题:
<script>
require.config({
baseUrl: "/static/lib/",
paths: {
jquery: "external/jquery",
velocity: "external/velocity/velocity.min",
"velocity.ui": "external/velocity/velocity.ui.min",
}
});
require(["jquery", "velocity.ui"]);
</script>
当我查看网络请求时,我发现在velocity
之前加载了velocity.ui
。 velocity.ui
确实有define(["velocity"], ...
。
答案 0 :(得分:1)
如果您的项目完全使用jQuery ,无论出于何种原因,那么您必须使velocity
依赖于jquery
模块。否则,您将遇到遇到的问题。创建一个名为velocity-glue
的模块:
define(['velocity', 'jquery'], function (velocity) {
return velocity;
});
修改您的配置,使其包含这两个条目。
map: {
"*": {
velocity: "velocity-glue",
},
"velocity-glue": {
velocity: "velocity",
},
}
第一个条目使得velocity-glue
在需要velocity
时使用。第二个条目确保velocity-glue
可以获得原始velocity
。
我将使用&#34; Velocity&#34;在全球范围内引用该产品:这包括两个模块(velocity
和velocity-ui
)。
问题是Velocity不是一个好的AMD公民。通过这个,我的意思是它的模块依赖于全局变量并将它们自身导出为全局变量,即使它们是通过AMD加载器加载,这也是AMD模块的不良行为。
Velocity可以在有或没有jQuery的情况下使用。当使用没有jQuery的Velocity时,它使用一种最小的polyfill,它只提供与Velocity需要一样多的jQuery函数。由于Velocity可以在有或没有jQuery的情况下使用,因此当它们调用define
时,它的模块不在它们的依赖项中列出jQuery,否则,它们将要求你使用jQuery。
无论Velocity是否作为AMD模块加载,它都会自行安装,以便在其中一个属性的Velocity
属性上可以访问它们,如果它们是existr:window.jQuery
window.Zepto
,或window
。 Velocity将使用它可以按此处给出的顺序使用的第一个。因此,如果既未安装jQuery也未安装Zepto,则可以window.Velocity
访问它。但是如果安装了jQuery,它将作为window.jQuery.Velocity
访问。问题是velocity
和velocity.ui
执行计算选择3个可能的位置独立。让我们考虑一些场景:
情景A:
jquery
加载。velocity
安装为window.jQuery.Velocity
。velocity.ui
查找window.jQuery.Velocity
。细。情景B:
[jquery
尚未加载。]
velocity
安装为window.Velocity
。velocity.ui
查找window.Velocity
。细。(jquery
可能会或可能不会在以后加载。这没关系。)
情景C:
velocity
将自身安装为window.Velocity
,因为未加载jQuery。jquery
加载。velocity.ui
查找window.jQuery.Velocity
,因为window.jQuery
确实存在,但window.jQuery.Velocity
不存在! 您收到错误。请注意,在上述方案velocity
中,始终在velocity.ui
之前加载,因为velocity.ui
列出velocity
作为其依赖关系。但是,jQuery相对于其他两个模块的加载顺序不受限制,因为(如前所述)它们不依赖于jquery
。
我在本答案的第一部分中给出的解决方案通过约束加载顺序来解决问题:jquery
将始终在两个模块之前加载。