L'option shire de Requirejs ne fonctionne pas

11

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.

Solide
la source

Réponses:

20

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
la 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
2
vous pouvez vérifier la référence de cet article, stackoverflow.com/questions/19216580/requirejs-paths-vs-map
Rakesh Jesadiya
1
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