L'opzione shim Requirejs non funziona

Sto sviluppando un modulo per Magento2 e sto usando requestjs per caricare javascript personalizzato che dipende da jquery. Sto usando l'opzione shim in requestjs-config.js per impostare questa dipendenza tra gli script personalizzati e jquery. Il problema è che questa dipendenza non è (sempre) impostata. A volte jQuery si carica prima dello script e tutto va bene, ma a volte si carica dopo gli script con conseguente errore di script:

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

Vedi sotto un esempio del mio requisitojs-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']
    }
};

Questo è il javascript nel mio file phtml:

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

    // javascript here

});

Cosa sto facendo di sbagliato qui, perché l'opzione shim non viene onorata e jQuery non viene sempre caricato prima degli altri script.

magento2 requirejs

— Solide
fonte

Devi impostare requestjs-config.js come di seguito,

Maggiori dettagli, fare riferimento al collegamento, Come risolvere l'errore RequireJs in 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']
                }
        }
    };

Usa il codice sopra e rimuovi la cartella var e prova. Grazie.

— Rakesh Jesadiya
fonte

Questo sembra fare davvero il trucco e l'ho contrassegnato come risposta. Vorrei capire perché questo funziona però. Sono i percorsi anziché la configurazione delle mappe o è l'impostazione di dipendenza specifica nella configurazione shim. La documentazione relativa ai requisiti richiede che sia possibile utilizzare una matrice di dipendenze nella configurazione shim invece di specificare ciascuna dipendenza separatamente. Quindi la mia ipotesi è che è la differenza tra percorsi e mappe, ma perché?

— Solide,

è possibile controllare riferimento da questo post, stackoverflow.com/questions/19216580/requirejs-paths-vs-map

— Rakesh Jesadiya

Non cancellare mai / var in quanto contiene informazioni utili

— Max

Ciao Rakesh, puoi spiegare come funziona il codice sopra

— Jaisa

@Jaisa, ho elaborato di più nel mio blog nel link sopra indicato

— Rakesh Jesadiya,