Làm cách nào để tải tập tin js mô-đun tùy chỉnh trong magento 2?

Tôi đã tạo mô-đun thanh trượt biểu ngữ cho magento 2. Tôi đã gọi tệp JS bằng các cách sau và nó hoạt động tốt. Trong lớp khối tôi đã tạo chức năng sau

public function getBaseJs($fileName){

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

và chức năng này được gọi trong bannerslider.phtmltập tin theo cách sau.

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

Nhưng, theo cơ chế phụ thuộc jQuery của require.jsLàm thế nào tôi có thể làm điều đó?

Cuối cùng, tôi đã có giải pháp cho truy vấn của mình. Tôi muốn chia sẻ chi tiết như dưới đây.

Bước 1: Thêm tệp js mô-đun của bạn dưới<Vendor>/<Module_Name>/view/<area>/web/js/

ví dụ <Vendor>/<Module_Name>/view/<area>/web/js/flexslider.js

Bước 2: Tạo requirejs-config.jstập tin dưới<Vendor>/<Module_Name>/view/<area>/

ví dụ <Vendor>/<Module_Name>/view/<frontend>/requirejs-config.js

Thêm mã sau vào requirejs-config.js

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

Lưu ý: bạn có thể đặt tên đối tượng theo lựa chọn của mình. Trong trường hợp của tôi, tôi đã đặt bannerslidervà không thêm phần mở rộng .js vào tên tệp trongVendorName_ModuleName/js/flexslider

Bước 3: Gọi functionmô-đun js của bạn trong .phtmltệp theo cách sau.

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

Nó làm việc tốt cho tôi.

Dấu vết: Sử dụng Nettab để xem URL được yêu cầu của tệp js có được tải hay không.

Cách của tôi là:

Bước 1

Bao gồm tệp javascript cơ sở của tiện ích mở rộng bằng hướng dẫn bố cục.

Bước 2

Yêu cầu các tệp javascript khác của tiện ích mở rộng từ tệp cơ sở với 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...
    );
});