L'option shire de Requirejs ne fonctionne pas

Je développe un module pour Magento2 et j'utilise requirejs pour charger du javascript personnalisé qui dépend de jquery. J'utilise l'option shim dans requirejs-config.js pour définir cette dépendance entre les scripts personnalisés et jquery. Le problème est que cette dépendance n'est pas (toujours) définie. Parfois, jQuery se charge avant le script et tout va bien, mais parfois il se charge après les scripts, ce qui entraîne une erreur de 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

Voir ci-dessous un exemple de mon 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']
    }
};

Voici le javascript dans mon fichier phtml:

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

    // javascript here

});

Que fais-je de mal ici, pourquoi l'option shim n'est-elle pas honorée et jQuery n'est pas toujours chargé avant les autres scripts.

magento2 requirejs

— Solide
source

Vous devez définir requirejs-config.js comme ci-dessous,

Plus de détails, reportez-vous au lien, comment résoudre l'erreur RequireJs dans 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']
                }
        }
    };

Utilisez le code ci-dessus et supprimez le dossier var et essayez. Merci.

— Rakesh Jesadiya
source

Cela semble faire l'affaire en effet et j'ai marqué cela comme la réponse. J'aimerais comprendre pourquoi cela fonctionne bien. S'agit-il des chemins au lieu de la configuration des cartes ou du paramètre de dépendance spécifique dans la configuration de shim. La documentation de requirejs mentionne que vous pouvez utiliser un tableau de dépendances dans la configuration de shim au lieu de spécifier chaque dépendance séparément. Donc, je suppose que c'est la différence entre les chemins et les cartes, mais pourquoi?

— Solide

vous pouvez vérifier la référence de cet article, stackoverflow.com/questions/19216580/requirejs-paths-vs-map

— Rakesh Jesadiya

Ne supprimez jamais / var car il contient des informations utiles

— Max

Salut Rakesh, pouvez-vous expliquer comment fonctionne le code ci-dessus

— Jaisa

@Jaisa, j'ai développé plus dans mon blog dans le lien ci-dessus

— Rakesh Jesadiya