Bagaimana cara memuat file modul js kustom di magento 2?

Saya telah membuat modul slider banner untuk magento 2. Saya telah memanggil file JS menggunakan cara berikut dan berfungsi dengan baik. Di kelas blok saya membuat fungsi berikut

public function getBaseJs($fileName){

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

dan fungsi ini disebut dalam bannerslider.phtmlfile dengan cara sebagai berikut.

<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>

Tapi, menurut mekanisme ketergantungan jQuery dari require.jsBagaimana saya bisa melakukannya?

Akhirnya, saya mendapatkan solusi untuk permintaan saya. Saya ingin membagikannya secara terperinci seperti di bawah ini.

Langkah 1: Tambahkan file js modul Anda di bawah<Vendor>/<Module_Name>/view/<area>/web/js/

misalnya <Vendor>/<Module_Name>/view/<area>/web/js/flexslider.js

Langkah 2: Buat requirejs-config.jsfile di bawah<Vendor>/<Module_Name>/view/<area>/

misalnya <Vendor>/<Module_Name>/view/<frontend>/requirejs-config.js

Tambahkan kode berikut ke requirejs-config.js

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

Catatan: Anda dapat menetapkan nama objek sesuai pilihan Anda. Dalam kasus saya, saya telah menetapkan sebagai bannersliderdan tidak menambahkan ekstensi .js ke nama file diVendorName_ModuleName/js/flexslider

Langkah 3: Panggil file functionjs Anda dalam .phtmlfile sebagai cara berikut.

<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>

Ini bekerja dengan baik untuk saya.

Jejak: Gunakan Nettab untuk melihat URL yang diminta dari file js dimuat atau tidak.

Cara saya adalah:

Langkah 1

Sertakan file javascript basis ekstensi menggunakan instruksi tata letak.

Langkah 2

Memerlukan file javascript ekstensi lainnya dari file dasar dengan 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...
    );
});