La opción de calce de Requirejs no funciona

Estoy desarrollando un módulo para Magento2 y estoy usando requirejs para cargar JavaScript personalizado que depende de jquery. Estoy usando la opción shim en requirejs-config.js para establecer esta dependencia entre los scripts personalizados y jquery. El problema es que esta dependencia no está (siempre) establecida. A veces, jQuery se carga antes del script y todo está bien, pero a veces se carga después de los scripts, lo que genera un error 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

Vea a continuación un ejemplo de mi 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']
    }
};

Este es el javascript en mi archivo phtml:

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

    // javascript here

});

¿Qué estoy haciendo mal aquí? ¿Por qué no se respeta la opción de shim y jQuery no siempre se carga antes que los otros scripts?

magento2 requirejs

— Solido
fuente

Debe configurar requirejs-config.js como a continuación,

Más detalles, Enlace de referencia, Cómo resolver el error de RequireJs en 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']
                }
        }
    };

Use el código anterior y elimine la carpeta var e intente. Gracias.

— Rakesh Jesadiya
fuente

Esto parece hacer el truco de hecho y lo he marcado como la respuesta. Sin embargo, me gustaría entender por qué esto funciona. ¿Son las rutas en lugar de la configuración de los mapas o es la configuración de dependencia específica en la configuración de shim? La documentación de requirejs menciona que puede usar una matriz de dependencias en la configuración de shim en lugar de especificar cada dependencia por separado. Entonces, supongo que es la diferencia entre rutas y mapas, pero ¿por qué?

— Solide

puede consultar la referencia de esta publicación, stackoverflow.com/questions/19216580/requirejs-paths-vs-map

— Rakesh Jesadiya

Nunca borre / var ya que contiene información útil

— Max

Hola Rakesh, ¿Puedes explicar cómo funciona el código anterior?

— Jaisa

@Jaisa, he elaborado más en mi blog en el enlace anterior

— Rakesh Jesadiya