आवश्यकताएँ शिम विकल्प काम नहीं कर रहा है

Question

मैं Magento2 के लिए एक मॉड्यूल विकसित कर रहा हूं और कस्टम javascript को लोड करने के लिए आवश्यकता का उपयोग कर रहा हूं जो jquery पर निर्भर करता है। मैं कस्टम स्क्रिप्ट और jquery के बीच इस निर्भरता को सेट करने के लिए requjs-config.js में शिम विकल्प का उपयोग कर रहा हूं। मुद्दा यह है कि यह निर्भरता (हमेशा) सेट नहीं है। कभी-कभी 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

मेरी आवश्यकता के उदाहरण के नीचे देखें- 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

});

मैं यहाँ क्या गलत कर रहा हूँ, क्यों शिम विकल्प को सम्मानित नहीं किया गया है और jQuery को हमेशा अन्य लिपियों से पहले लोड नहीं किया जाता है।

Answer 1

आपको नीचे की तरह आवश्यकता -विन्यास-विन्यास सेट करना होगा।

अधिक विवरण, लिंक देखें, मैगेंटो 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 फ़ोल्डर निकालें और प्रयास करें। धन्यवाद।

Comments

ऐसा लगता है कि वास्तव में चाल चल रही है और मैंने इसे उत्तर के रूप में चिह्नित किया है। मैं यह समझना चाहूंगा कि यह काम क्यों करता है। क्या यह नक्शे के विन्यास के बजाय मार्ग है या शिम विन्यास में विशिष्ट निर्भरता सेटिंग है। आवश्यकताओं के प्रलेखन में उल्लेख किया गया है कि आप प्रत्येक निर्भरता को अलग से निर्दिष्ट करने के बजाय शिम विन्यास में निर्भरता की एक सरणी का उपयोग कर सकते हैं। तो मेरा अनुमान है कि यह मार्ग बनाम नक्शे में अंतर है, लेकिन क्यों?

— 44 पर सोलाइड

आप इस पोस्ट से संदर्भ जाँच कर सकते हैं, stackoverflow.com/questions/19216580/requirejs-paths-vs-map

— राकेश Jesadiya

कभी भी डिलीट / वार न करें क्योंकि इसमें उपयोगी जानकारी है

— मैक्स

हाय राकेश, क्या आप बता सकते हैं कि उपरोक्त कोड कैसे काम करता है

— Jaisa

@ जय, मैं ऊपर दिए गए लिंक में अपने ब्लॉग में अधिक विस्तृत हूं

— राकेश जेसादिया