Jak załadować niestandardowy plik js modułu w Magento 2?

Utworzyłem moduł suwaka banerowego dla magento 2. Plik JS wywołałem w następujący sposób i działając poprawnie. W klasie bloków stworzyłem następującą funkcję

public function getBaseJs($fileName){

        return $this->_storeManager->getStore()->getBaseUrl(
                \Magento\Framework\UrlInterface::URL_TYPE_MEDIA
            ).'bannerslider/js/'.$fileName;
    }

i ta funkcja jest wywoływana w bannerslider.phtmlpliku w następujący sposób.

<script type="text/javascript" src="<?php echo $this->getBaseJs('jquery-1.7.min.js') ?>"></script>
<script type="text/javascript" src="<?php echo $this->getBaseJs('jquery.flexslider.js') ?>"></script>

Ale zgodnie z mechanizmem zależności jQuery w require.jsJak mogę to zrobić?

Wreszcie mam rozwiązanie dla mojego zapytania. Chciałbym udostępnić to szczegółowo, jak poniżej.

Krok 1: Dodaj plik js modułu pod<Vendor>/<Module_Name>/view/<area>/web/js/

na przykład <Vendor>/<Module_Name>/view/<area>/web/js/flexslider.js

Krok 2: Utwórz requirejs-config.jsplik pod<Vendor>/<Module_Name>/view/<area>/

na przykład <Vendor>/<Module_Name>/view/<frontend>/requirejs-config.js

Dodaj następujący kod do requirejs-config.js

var config = {
    map: {
        '*': {
            bannerslider: 'VendorName_ModuleName/js/flexslider'
        }
    }
};

Uwaga: możesz ustawić nazwę swojego obiektu według własnego wyboru. W moim przypadku ustawiłem jako bannerslideri nie dodam rozszerzenia .js do nazwy pliku wVendorName_ModuleName/js/flexslider

Krok 3: Wywołaj plik functionjs modułu w .phtmlpliku w następujący sposób.

<script type="text/javascript">
    require(['jquery','bannerslider'],function($){
        $(window).load(function() {
            $('.flexslider-8').flexslider({
                animation: "fade",
                controlNav: "thumbnails",
                slideshowSpeed: 2000,
                minItems: 2,
                maxItems: 4
            });
        });

    });
</script>

Dla mnie działa dobrze.

Śledzenie: użyj Netkarty, aby zobaczyć żądany adres URL załadowanego pliku js lub nie.

Moja droga to:

Krok 1

Dołącz podstawowy plik javascript rozszerzenia przy użyciu instrukcji układu.

Krok 2

Wymagaj innych plików javascript rozszerzenia z pliku podstawowego za pomocą RequireJS:

require(
    [
      'jquery', 
      '{VendorName}_{ModuleName}{path_to_js_file/relative_to/view/web/no_js_at_end}'
     // ex. Magento/Ui/view/base/web/js/grid/sticky/sticky.js
     // became Magento_Ui/js/grid/sticky/stick
    ], 
    function($, someOtherLibrary) {
        // custom code here...
    );
});