Requirejs shim seçeneği çalışmıyor


11

Magento2 için bir modül geliştiriyorum ve jquery bağlı özel javascript yüklemek için requirjs kullanıyorum. Özel komut dosyaları ve jquery arasındaki bu bağımlılığı ayarlamak için requirjs-config.js shim seçeneğini kullanıyorum. Sorun, bu bağımlılığın (her zaman) ayarlanmamış olmasıdır. Bazen jQuery komut dosyasından önce yüklenir ve her şey yolundadır ancak bazen komut dosyalarından sonra bir komut dosyası hatasına neden olur:

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

Aşağıdaki benim defajs-config.js örneğine bakın:

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']
    }
};

Bu benim phtml dosyasındaki javascript:

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

    // javascript here

});

Burada neyi yanlış yapıyorum, neden shim seçeneği onurlandırılmıyor ve jQuery her zaman diğer komut dosyalarından önce yüklenmiyor.

Yanıtlar:


20

Requirjs-config.js dosyasını aşağıdaki gibi ayarlamanız gerekir ,

Daha fazla detay, Bakınız bağlantı, Magento 2'deki RequireJs hatasını nasıl çözebilirim?

 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']
                }
        }
    };

Yukarıdaki kodu kullanın ve var klasörünü kaldırın ve deneyin. Teşekkürler.


Bu gerçekten hile yapıyor gibi görünüyor ve ben bunu cevap olarak işaretledim. Bunun neden işe yaradığını anlamak istiyorum. Haritalar yapılandırması yerine yollar mı yoksa şim yapılandırmasında belirli bağımlılık ayarı mıdır? Gereksinimlerin belgelendirilmesi, her bağımlılığı ayrı ayrı belirtmek yerine, şim yapılandırmasında bir dizi bağımlılık kullanabileceğinizden bahseder. Benim tahminim, harita farkına karşı yol olması, ama neden?
Solide

2
bu
yazıdan

1
Yararlı bilgiler içerdiğinden asla silmeyin / değiştirmeyin
Max

Merhaba Rakesh, Yukarıdaki kodun nasıl çalıştığını açıklayabilir misin
Jaisa

@Jaisa, yukarıdaki bağlantıda
blogumda
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.