RequireJS零星失败

Question

我正在开发一个Magento2网站.Magento2使用requirejs,我正在使用的主题也使用它.部分主题使用猫头鹰旋转木马.用于加载轮播的代码最初是

require(['jquery', 'owl.carousel/owl.carousel.min'], function($) {
    $("#banner-slider-demo-1").owlCarousel({
        // carousel settings
    });
});

但是我注意到有时当我加载主页(使用旋转木马)时,旋转木马不会显示,并且控制台中有错误

未捕获的TypeError:$(...).owlCarousel不是函数

可能没有加载思考jQuery,我更改了require代码以序列化需求

require(['jquery'], function($) {
    require(['owl.carousel/owl.carousel.min'], function () {
        $("#banner-slider-demo-1").owlCarousel({
            // ...

但是这没有效果......有时轮播加载并且没有错误,有时会出现错误并且无法加载.

即使出现错误,浏览器也会获取轮播文件.似乎还要求每个开发人员工具都加载了carousel脚本

知道会发生什么吗？

Answer 1

您的问题是您正在通过script元素和 RequireJS 加载jQuery .你必须使用一种方法,而不是两种方法.

如果我在控制台中运行它:

console.log("owlCarousel", typeof jQuery.fn.owlCarousel)

我明白了:

owlCarousel function

但有了这个:

require(["jquery"], function ($) { 
  console.log("owlCarousel", typeof $.fn.owlCarousel); 
})

我明白了:

owlCarousel undefined

如果你尝试,require(["jquery"], function ($) { console.log("equal", $ === window.jQuery); })你会得到equal false.所以你有两个jQuery实例加载.使用RequireJS访问jQuery的代码获取的版本没有.owlCarousel.那是因为Owl Carousel安装了自己window.jQuery.

如果script由于某种原因必须加载jQuery ,则应在加载RequireJS 之前移动script加载它的元素.(您应该为您要加载并且支持 AMD的所有脚本执行此操作.)然后对于RequireJS,您应该只定义此假模块:script

define("jquery", function () {
    return jQuery;
});

这使得当RequireJS加载jQuery时,它只使用jQuery已在全局空间中定义的内容.这个假模块的理想位置就在配置RequireJS之前.

当你在它时,你应该定义一个垫片owl.carousel/owl.carousel.min:

`owl.carousel/owl.carousel.min`: ['jquery']

这样就不需要将调用嵌套到加载owl.carousel/owl.carousel.min调用内部jquery.你可以做你最初尝试的事情:

require(['jquery', 'owl.carousel/owl.carousel.min'], function($) {
  $("#banner-slider-demo-1").owlCarousel({
    // carousel settings
  });
});