ฉันกำลังพัฒนาโมดูลสำหรับ 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 ก่อนสคริปต์อื่นเสมอ