Параметр Requirejs shim не працює


11

Я розробляю модуль для Magento2 і використовую Requjs для завантаження користувальницького JavaScript, який залежить від jquery. Я використовую параметр shim у Requjs-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

Дивіться нижче приклад мого Requjs-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 не завжди завантажується перед іншими сценаріями.

Відповіді:


20

Ви повинні встановити Requjs-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. У документації про Requjs згадується, що ви можете використовувати масив залежностей у конфігурації shim, а не вказувати кожну залежність окремо. Тож я здогадуюсь, що це різниця шляхів проти карт, але чому?
Соліде

2
Ви можете перевірити посилання з цієї посади, stackoverflow.com/questions/19216580/requirejs-paths-vs-map
Ракеш Jesadiya

1
Ніколи не видаляти / вар , оскільки вона містить корисну інформацію
Max

Привіт Ракеш, чи можете ви пояснити, як працює вищезазначений код
Джайса

@Jaisa, я детальніше розробив у своєму блозі за вказаним вище посиланням
Ракеш Єсадія
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.