RequireJS零星失败

Question

我正在开发一个Magento2网站。 Magento2使用requirejs，我正在使用的主题也使用它。部分主题使用Owl Carousel。用于加载轮播的代码最初是

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

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

  

未捕获的TypeError：$（...）。owlCarousel不是函数

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

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

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

即使出现错误，浏览器也会提取轮播文件。似乎还需要为每个开发人员工具加载carousel脚本

知道会发生什么事吗？

Answer 1

您的问题是您通过RequireJS通过script元素和加载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的script 和加载。）然后对于RequireJS，您应该只是定义这个假模块：

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
  });
});