วิธีโหลดไฟล์ js โมดูลที่กำหนดเองใน magento 2

ฉันได้สร้างโมดูลแถบเลื่อนแบนเนอร์สำหรับ magento 2 ฉันได้เรียกไฟล์ JS โดยใช้วิธีการต่อไปนี้และทำงานได้ดี ในบล็อกคลาสฉันสร้างฟังก์ชันต่อไปนี้

public function getBaseJs($fileName){

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

และฟังก์ชั่นนี้เรียกว่าในbannerslider.phtmlไฟล์ดังต่อไปนี้

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

แต่ตามกลไกการพึ่งพา jQuery ของrequire.jsฉันจะทำได้อย่างไร

ในที่สุดฉันก็ได้คำตอบสำหรับคำถามของฉัน ฉันต้องการแบ่งปันรายละเอียดดังต่อไปนี้

ขั้นตอนที่ 1:เพิ่มไฟล์โมดูล js ของคุณภายใต้<Vendor>/<Module_Name>/view/<area>/web/js/

เช่น <Vendor>/<Module_Name>/view/<area>/web/js/flexslider.js

ขั้นตอนที่ 2:สร้างrequirejs-config.jsไฟล์ใต้<Vendor>/<Module_Name>/view/<area>/

เช่น <Vendor>/<Module_Name>/view/<frontend>/requirejs-config.js

เพิ่มรหัสต่อไปนี้เพื่อ requirejs-config.js

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

หมายเหตุ: คุณอาจตั้งชื่อวัตถุของคุณตามที่คุณเลือก ในกรณีของฉันฉันได้ตั้งค่าเป็นbannersliderและไม่เพิ่มนามสกุล. js ในชื่อไฟล์VendorName_ModuleName/js/flexslider

ขั้นตอนที่ 3:เรียกใช้functionโมดูล js ของคุณใน.phtmlไฟล์ดังนี้

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

มันใช้งานได้ดีสำหรับฉัน

ติดตาม: ใช้Netแท็บเพื่อดู URL ที่ร้องขอของไฟล์ js ที่โหลดหรือไม่

ทางของฉันคือ:

ขั้นตอนที่ 1

รวมไฟล์จาวาสคริปต์พื้นฐานของส่วนขยายโดยใช้คำแนะนำการจัดวาง

ขั้นตอนที่ 2

ต้องการไฟล์จาวาสคริปต์อื่น ๆ ของส่วนขยายจากไฟล์ฐานที่มี 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...
    );
});