散発的な障害が発生する

Question

私はMagento2サイトで作業しています。 Magento2はrequirejsを使用しています。私が使っているテーマも同様です。テーマの一部はOwl Carouselを使用しています。私が気づいしかしカルーセルをロードするために使用されるコードは、もともと

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

た時々私は、カルーセルは表示されません（カルーセルが使用されている）のホームページをロードし、エラーがコンソールにあるとき

Uncaught TypeError: $(...).owlCarousel is not a function

jQueryのロードされていない可能性があります考えて、私は、要件

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

をシリアル化する必要がコードを変更したが、これは効果がなかった...時々、カルーセルの負荷とそこエラーはありません。また、エラーがあり、ロードされません。

エラーが発生しても、カルーセルファイルがブラウザによって取得されました。また、必要と思われる開発ツール

に行くことができるものの任意のアイデアあたりカルーセルスクリプトをロードしましたか？

Answer 1

あなたの問題は、RequireJSを通じてscript要素とでjQueryをロードしていることです。両方の方法ではなく、1つの方法を使用する必要があります。

私はコンソールでこれを実行する場合：

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の2つのインスタンスがロードされています。 RequireJSを使用してjQueryにアクセスするコードは、.owlCarouselのないバージョンを取得します。これは、Owl Carouselがwindow.jQueryにインストールされているためです。

あなたには、いくつかの理由でscript経由のjQueryをロードする必要がある場合、あなたはRequireJSをロード前をロードscript要素を移動する必要があります。 （あなたは、あなたがscriptとAMD-認識しているにロードすることを読み込むすべてスクリプトのためにこれを行う必要があります。）次にRequireJSのために、あなただけのこの偽のモジュールを定義する必要があります。

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

これは作りますRequireJSがjQueryをロードするときには、既にグローバル空間に定義されているjQueryを使用するだけです。この偽のモジュールの理想的な場所は、RequireJSを設定する直前です。

あなたはそれでいる間、あなたがowl.carousel/owl.carousel.minのためのシムを定義する必要があります。

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

この方法でjqueryをロードするためにコール内owl.carousel/owl.carousel.minロードするための巣に必要呼び出しはありません。

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