Opcja shimera Requirejs nie działa

11

Zajmuję się tworzeniem modułu dla Magento2 i używam wymagań do załadowania niestandardowego javascript, który zależy od jquery. Korzystam z opcji shim w pliku Requjs-config.js, aby ustawić tę zależność między niestandardowymi skryptami a jquery. Problem polega na tym, że ta zależność nie jest (zawsze) ustawiona. Czasami jQuery ładuje się przed skryptem i wszystko jest w porządku, ale czasami ładuje się po skryptach, co powoduje błąd skryptu:

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

Zobacz poniżej przykład mojego pliku Requjs-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']
    }
};

To jest javascript w moim pliku phtml:

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

    // javascript here

});

Co tutaj robię źle, dlaczego opcja shim nie jest honorowana i jQuery nie zawsze ładuje się przed innymi skryptami.

Solide
źródło

Odpowiedzi:

20

Musisz ustawić wymagany.js-config.js jak poniżej,

Więcej informacji, patrz link, Jak rozwiązać błąd RequireJs w 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']
                }
        }
    };

Użyj powyższego kodu i usuń folder var i spróbuj. Dzięki.

Rakesh Jesadiya
źródło
To wydaje się naprawdę załatwić sprawę i zaznaczyłem to jako odpowiedź. Chciałbym jednak zrozumieć, dlaczego to działa. Czy to ścieżki zamiast konfiguracji map, czy też konkretne ustawienie zależności w konfiguracji shim. Dokumentacja wymagań wymienia, że ​​możesz użyć tablicy zależności w konfiguracji shim zamiast osobnego określania każdej zależności. Domyślam się, że to różnica między ścieżkami a mapami, ale dlaczego?
Solide,
2
możesz sprawdzić referencje z tego postu, stackoverflow.com/questions/19216580/requirejs-paths-vs-map
Rakesh Jesadiya
1
Nigdy nie usuwaj / zmieniaj, ponieważ zawiera przydatne informacje
maks.
Cześć Rakesh, Czy możesz wyjaśnić, jak działa powyższy kod
Jaisa
@Jaisa, rozwinąłem więcej na moim blogu w powyższym linku
Rakesh Jesadiya