ตัวเลือก Requirejs shim ไม่ทำงาน


11

ฉันกำลังพัฒนาโมดูลสำหรับ Magento2 และฉันใช้ requirejs เพื่อโหลดจาวาสคริปต์ที่กำหนดเองซึ่งขึ้นอยู่กับ jquery ฉันใช้ตัวเลือก shim ใน requirejs-config.js เพื่อตั้งค่าการขึ้นต่อกันระหว่างสคริปต์ที่กำหนดเองและ jquery ปัญหาคือว่าการพึ่งพานี้ไม่ได้ตั้งค่า (เสมอ) บางครั้ง jQuery ทำการโหลดก่อนสคริปต์และทั้งหมดใช้ได้ แต่บางครั้งก็โหลดหลังจากสคริปต์ทำให้เกิดข้อผิดพลาดสคริปต์:

Uncaught ReferenceError: jQuery is not defined(anonymous function) @ jquery.easing.1.3.js:39
Uncaught ReferenceError: jQuery is not defined(anonymous function) @ jquery.flexslider-min.js:5
Uncaught TypeError: $(...).flexslider is not a function

ดูตัวอย่างด้านล่างของ requirejs-config.js ของฉัน:

var config = {
    map: {
        '*': {
            'flexslider': 'Vendor_Modulejs/jquery.flexslider-min',
            'picturefill': 'Vendor_Modulejs/picturefill.min',
            'easing': 'Vendor_Modulejs/jquery.easing.1.3',
            'hoverintent': 'Vendor_Modulejs/jquery.hoverIntent',
            'fitvids': 'Vendor_Modulejs/jquery.fitvids',
            'vimeo': 'Vendor_Modulejs/jquery.vimeo.api.min'
        }
    },
    shim: {
        'flexslider': ['jquery'],
        'picturefill': ['jquery'],
        'easing': ['jquery'],
        'hoverintent': ['jquery'],
        'fitvids': ['jquery'],
        'vimeo': ['jquery']
    }
};

นี่คือจาวาสคริปต์ในไฟล์ phtml ของฉัน:

require(['jquery', 'domReady!', 'picturefill', 'flexslider', 'easing', 'hoverintent', 'fitvids', 'vimeo'], function($) {
    "use strict";

    // javascript here

});

ฉันกำลังทำอะไรผิดที่นี่ทำไมตัวเลือก shim ไม่ได้รับเกียรติและไม่ได้โหลด jQuery ก่อนสคริปต์อื่นเสมอ

คำตอบ:


20

คุณต้องตั้งค่าrequirejs-config.jsดังนี้

รายละเอียดเพิ่มเติม, ลิงค์อ้างอิง, วิธีแก้ไขข้อผิดพลาด RequireJs ใน Magento 2

 var config = {
        paths: {
                'flexslider': 'Vendor_Modulejs/jquery.flexslider-min',
                'picturefill': 'Vendor_Modulejs/picturefill.min',
                'easing': 'Vendor_Modulejs/jquery.easing.1.3',
                'hoverintent': 'Vendor_Modulejs/jquery.hoverIntent',
                'fitvids': 'Vendor_Modulejs/jquery.fitvids',
                'vimeo': 'Vendor_Modulejs/jquery.vimeo.api.min'
        },
        shim: {
                'flexslider': {
                    deps: ['jquery']
                },
                'picturefill': {
                    deps: ['jquery']
                },
                'easing': {
                    deps: ['jquery']
                },
                'hoverintent': {
                    deps: ['jquery']
                },
                'fitvids': {
                    deps: ['jquery']
                },
                'vimeo': {
                    deps: ['jquery']
                }
        }
    };

ใช้รหัสด้านบนและลบโฟลเดอร์ var แล้วลอง ขอบคุณ


ดูเหมือนว่าจะทำเคล็ดลับอย่างแน่นอนและฉันได้ทำเครื่องหมายว่านี่เป็นคำตอบ ฉันต้องการที่จะเข้าใจว่าทำไมงานนี้ถึงแม้ว่า มันเป็นเส้นทางแทนการกำหนดค่าแผนที่หรือเป็นการตั้งค่าการพึ่งพาเฉพาะในการกำหนดค่า shim เอกสารประกอบของ requirejs ที่กล่าวถึงคุณสามารถใช้อาร์เรย์ของการพึ่งพาใน shim config แทนการระบุแต่ละการพึ่งพาแยกจากกัน ดังนั้นฉันเดาว่ามันเป็นเส้นทางที่แตกต่างกับแผนที่ แต่ทำไม?
Solide

2
คุณสามารถตรวจสอบการอ้างอิงจากโพสต์นี้stackoverflow.com/questions/19216580/requirejs-paths-vs-map
Rakesh Jesadiya

1
อย่าลบ / var เนื่องจากมีข้อมูลที่เป็นประโยชน์
สูงสุด

สวัสดี Rakesh คุณช่วยอธิบายว่าโค้ดข้างต้นทำงานอย่างไร
Jaisa

@ Jaisa ฉันมีรายละเอียดเพิ่มเติมในบล็อกของฉันในลิงก์ด้านบน
Rakesh Jesadiya
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.