Опция Requirejs shim не работает

11

Я разрабатываю модуль для Magento2 и использую requirejs для загрузки собственного javascript, который зависит от jquery. Я использую опцию shim в requirejs-config.js, чтобы установить эту зависимость между пользовательскими сценариями и jquery. Проблема в том, что эта зависимость не (всегда) установлена. Иногда jQuery загружается перед сценарием, и все в порядке, но иногда он загружается после сценариев, что приводит к ошибке сценария:

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

Ниже приведен пример моего 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']
    }
};

Это JavaScript в моем файле phtml:

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

    // javascript here

});

Что я здесь делаю неправильно, почему не работает опция shim и jQuery не всегда загружается раньше других скриптов.

Solide
источник

Ответы:

20

Вы должны установить requirejs-config.js, как показано ниже,

Подробнее, см. Ссылку, Как устранить ошибку RequireJs в 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']
                }
        }
    };

Используйте приведенный выше код и удалите папку var и попробуйте. Спасибо.

Ракеш Джесадия
источник
Кажется, это действительно помогает, и я отметил это как ответ. Я хотел бы понять, почему это работает, хотя. Это пути, а не конфиг карт, или это особая настройка зависимостей в конфиге shim. В документации requirejs упоминается, что вы можете использовать массив зависимостей в конфигурации shim вместо того, чтобы указывать каждую зависимость отдельно. Так что я думаю, что это разница между путями и картами, но почему?
Solide
2
Вы можете проверить ссылку из этого поста, stackoverflow.com/questions/19216580/requirejs-paths-vs-map
Ракеш Джесадия
1
Никогда не удаляйте / var, так как он содержит полезную информацию
Макс
Привет Ракеш, не могли бы вы объяснить, как работает вышеприведенный код
Jaisa
@Jaisa, я подробно остановился на своем блоге в приведенной выше ссылке
Ракеш Джесадия