W Magento 2 pliki JavaScript są łądowane asynchronicznie za pomocą RequireJS. Ważną częścią ekosystemu JavaScript w Magento jest plik requirejs-config.js. Za pomocą tego pliku można np. dodać mapowanie do komponentów JS lub zadeklarować mixin. W dzisiejszym artykule pokażę Ci jakie możliwości daje ten plik, który z pewnością napotkasz podczas swojej przygody z Magento.

Przykładowy plik requirejs-config

Jako przykład pokażę CI plik z modułu Magento_Catalog: app/code/Magento/Catalog/view/frontend/requirejs-config.js (lub vendor/module-catalog/view/frontend/requirejs-config.js jeśli Magento jest zainstalowane poprzez composera)

W tym pliku widzimy konfiguracje mapowania (linie 7-21) oraz deklarację mixinu (linie 22-28) Więcej czym jest mapowanie opisze poniżej, a o mixinach pisałem tutaj.

Czy każdy moduł ma swój plik requirejs-config?

Odpowiedź jest prosta: i tak i nie 😉

Chodzi o to, że każdy moduł może mieć plik requirejs-config jeśli jest taka potrzeba. Żeby nie było za prosto to każdy szablon może mieć też swoje pliki requirejs-config. Generalnie tych plików może być nieskończenie wiele. Zastanawiasz się jak to działa. Bez obaw to jest Magento i wszystko jest proste, pewnie dobrze o tym wiesz…

Działa to tak, że Magento zbiera te wszystkie pliki requirejs-config i merguje je do jednego pliku requirejs-config, który znajdziesz w folderze pub.

Dla szablonu Magento/luma i lokalizacji en_US będzie to:

pub/static/frontend/Magento/luma/en_US/requirejs-config.js

Gdzie można umieszczać pliki requirejs-config?

Plik ten można umieszczać na różnych poziomach.

Poziom modułu

Poziom modułu, czyli ten poziom jak z przykładu, który widziałeś na początku artykułu.

<module_directory>/view/<area>/requirejs-config.js

gdzie <module_directory> to folder modułu np. app/code/Magento/Catalog

<area> to base, adminhtml lub frontend

Poziom szablonu

<theme_direcotry>/requirejs-config.js

gdzie <theme_directory to np. app/design/frontend/Frodigo/default/requirejs-config.js

Poziom modułu w szablonie

Możesz też umieścić plik requirejs-config w szablonie w folderze modułu. Jako referencja możesz zobaczyć ten plik: app/design/frontend/Magento/blank/Magento_Theme/requirejs-config.js

Pewnie zastanawiasz się kiedy tworzyć konfigurację na poziomie szablonu, a kiedy na poziomie modułu w szablonie, a kiedy na poziomie modułu. Jeśli Cię to bardzo intryguje to zapraszam do zadania pytania w komentarzu pod tym postem.

Opcje konfiguracyjne

Na wstępie zachęcam do zapoznania się z dokumentacją RequireJS gdzie można zobaczyć jakie są możliwości konfiguracji. Poniżej opiszę opcje, które są najczęściej używane podczas pracy z Magento.

Map

Umożliwia zmianę nazwy komponentu, w praktyce daje możliwość zamienienia standardowej nazwy komponentu JS zbudowanej ze ścieżki do pliku np. Magento_Wishlist/js/wishlist na dowolną nazwę np. wishlist. Dzięki takiemu mapowaniu póżniej przy wstrzykiwaniu komponentu możemy używać tej nadanej przez nas nazwy.

var config = {
    map: {
        '*': {
            wishlist:       'Magento_Wishlist/js/wishlist',
            addToWishlist:  'Magento_Wishlist/js/add-to-wishlist',
            wishlistSearch: 'Magento_Wishlist/js/search'
        }
    }
};

Zwróć uwagę na * w tej konfiguracji. Oznacza ona, że konfiguracja zadziała dla wszystkich modułów. Możemy zamienić gwiazdkę na nazwę modułu i wtedy konfiguracja będzie działała tylko dla tego modułu Magento.

Poniżej przykład użycia przy wstrzykiwaniu komponentu:

define(['wishlist'], function(wishlist) {
    'use strict';
});

path

Pozwala zmapować część lub całość nazwy komponentu na inną.

var config = {
    paths: {
         'ui/template': 'Magento_Ui/templates'
    }
}

Aby zrozumieć ten przykład zobacz na ten plik. Wstrzykiwana jest tam templatka ‚text!ui/template/modal/modal-popup.html’. Dzięki konfiguracji paths RequireJS komponent, który będzie wstrzykiwany to tak naprawdę ‚text!Magento_Ui/templates/modal/modal-popup.html’.

Path można też użyć do zmapowania komponentów, które są wstrzykiwane z zewnątrz:

var config = {
    paths: {
        paypalInContextExpressCheckout: 'https://www.paypalobjects.com/api/checkout'
    }
};

Dzięki tej konfiguracji gdy będziesz wstrzykiał paypalInContextExpressCheckout to zostanie wstrzyknięty komponent https://www.paypalobjects.com/api/checkout

Shim

Służy do konfigurowania zależności dla skryptów globalnych, lub takich, które nie obsługują AMD.

var config = {
    shim: {
        'jquery/jquery-migrate': ['jquery']
    }
}

Dzięki tej konfiguracji przed wczytaniem komponentu jquery/jquery-migrate będzie wstrzyknięte jQuery

Config

Służy do konfigurowania komponentów, a w szczególności do konfigurowania mixinów.

var config = {
    config: {
        mixins: {
            'Magento_Theme/js/view/breadcrumbs': {
                'Magento_Theme/js/view/add-home-breadcrumb': true
            }
        }
    }
}

deps

Dzięki deps można wstrzyknąć komponent JS na każdą stronę np.

var config = {
    deps: [
        'Magento_Theme/js/responsive',
        'Magento_Theme/js/theme'
    ]
};

Komponenty te będą działały na wszystkich stronach naszego sklepu.

Podsumowanie

Pokazałem Ci jakie możliwości konfiguracyjne daje plik requirejs-config w Magento. Napisz komentarz pod postem jeśli coś jest dla Ciebie nie jasne lub masz jakieś pytania.