A opção Requirejs shim não está funcionando

11

Estou desenvolvendo um módulo para Magento2 e estou usando requirejs para carregar javascript personalizado que depende do jquery. Estou usando a opção shim no requirejs-config.js para definir essa dependência entre os scripts personalizados e o jquery. O problema é que essa dependência não é (sempre) definida. Às vezes, o jQuery é carregado antes do script e tudo está bem, mas às vezes é carregado após os scripts, resultando em um erro 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

Veja abaixo um exemplo do meu 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 é o javascript no meu arquivo phtml:

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

    // javascript here

});

O que estou fazendo de errado aqui, por que a opção shim não é respeitada e o jQuery nem sempre é carregado antes dos outros scripts.

Solide
fonte

Respostas:

20

Você precisa definir o requirejs-config.js como abaixo,

Mais detalhes, consulte o link, Como resolver o erro RequireJs no 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 o código acima e remova a pasta var e tente. Obrigado.

Rakesh Jesadiya
fonte
Isso parece realmente funcionar e eu marquei isso como a resposta. Eu gostaria de entender por que isso funciona. São os caminhos em vez da configuração de mapas ou a configuração de dependência específica na configuração de shim. A documentação do requirejs menciona que você pode usar uma matriz de dependências na configuração do shim, em vez de especificar cada dependência separadamente. Então, meu palpite é que são os caminhos versus a diferença de mapas, mas por quê?
Solide 17/02
2
você pode verificar a referência deste post, stackoverflow.com/questions/19216580/requirejs-paths-vs-map
Rakesh Jesadiya
1
Nunca apague / var pois ele contém informações úteis
Max
Oi Rakesh, você pode explicar como o código acima funciona
Jaisa
@ Jaisa, eu elaborei mais no meu blog no link acima indicado
Rakesh Jesadiya