Magento 2: Wymagany-config.js w motywach?

Czy można dołączyć requirejs-config.jsplik (lub inaczej skonfigurować RequireJS) za pomocą motywu Magento? A może funkcja jest zarezerwowana dla modułów Magento? Informacje deweloperów na temat struktury motywu są niejednoznaczne w tym punkcie.

Dokumenty deweloperów nie wspominają nic o RequireJS - jednak motywy zawierają takie, webco oznacza, że ​​javascript można z nimi łączyć. Jeśli skrypt javascript można powiązać z kompozycją, oznacza to, że moduł RequireJS można połączyć z kompozycją, a jeśli moduł RequireJS można połączyć z kompozycją, moduł ten może wymagać określonej konfiguracji RequireJS.

Moim naiwnym założeniem byłoby, że motywy miałyby taką możliwość, ale nie byłem w stanie znaleźć żadnej dokumentacji na ten czy inny sposób i nie mam wolnego popołudnia, aby spędzić wymaganą pisownię kodu w requirejs-config.jspliku Magento, w tym.

możesz faktycznie dołączyć plik config-config.js do katalogów modułów motywu.

Problemem jest (tak naprawdę dla naszego zespołu frontendowego), że wydaje się, że nie ma możliwości przesłonięcia konfiguracji, ale rozszerzenia konfiguracji.

Tak więc, aby wziąć przykład Magento_Theme na przykład tutaj, jeśli dodasz plik wymaga-config.js w katalogu <theme_base_dir>/Magento_Theme, konfiguracja zostanie dodana do wygenerowanego pliku wymagania-config.js, a także konfiguracja z modułu Magento_Theme.

Aby odpowiedzieć na twoje pytanie, próbowałem również dodać plik config-config.js w katalogu motywów, <theme_base_dir>/weba także w katalogu głównym motywów. Oba nie działały. aktualizacja: właściwie zgodnie z odpowiedzią poniżej, jest to możliwe poprzez umieszczenie go w bazie motywu reż

Tak więc odpowiedź byłaby w zasadzie tak, ponieważ można dodać dowolne wymagania js w dowolnym module (pliki js związane z tematem najlepiej umieścić w katalogu <theme_base_dir>/Magento_Theme)

Chociaż powiedziałbym, powinna istnieć możliwość dodania związanego z kompozycją pliku wymagań-config.js poza dowolnym modułem (być może dezaktywujesz dany moduł), a także powinna istnieć możliwość zastąpienia modułów wymagań-config.js.

Oba wydają się niemożliwe bankomat.

=== AKTUALIZACJA ===

w rzeczywistości wydaje się, że możliwe jest posiadanie pliku config-config.js specyficznego dla tematu. Zobacz odpowiedź @Garetha Daine'a poniżej

OK, myślę, że mogłem to rozwiązać i uważam, że dokumentacja jest niejednoznaczna i wymaga aktualizacji w celu wyjaśnienia procesu.

Przeniosłem moje requirejs-config.jsz wewnątrz web/jsi webkatalogów odpowiednio dla obu Magento_Themei katalogu głównego mojej kompozycji w, <Vendor>/<theme>a teraz moja konfiguracja RequireJS jest scalona z głównym requirejs-config.jsze wszystkimi innymi włącznikami .

Wygląda więc na to, że musisz dołączyć requirejs-config.jsplik w następujących lokalizacjach w zależności od wymagań motywu / modułu.

Poziom motywu

app/design/frontend/<Vendor>/<theme>/requirejs-config.js

Poziom modułu

app/design/frontend/<Vendor>/<theme>/<Module_Name>/requirejs-config.js

Tak więc w swoim requirejs-config.jsmotywie powinieneś odwzorować komponent na ścieżkę, a następnie użyć shimdo zadeklarowania zależności:

var config = {
    map: {
        'component': 'js/component'
    },
    shim: {
        'component': {
            deps: ['jquery']
        }
    }
};

Następnie musisz utworzyć szablon do przechowywania inicjalizacji komponentów za pomocą <script>znacznika (chyba że podłączysz go bezpośrednio do elementu w pliku .phtml), jeśli jest to trasa, którą chcesz zejść, dołącz następującą treść:

<script type="text/x-magento-init">
    {
        "*": {
            "js/component": {} // Not entirely sure what {} is and what I'm passing here
        }
    }
</script>

Alternatywnie, powiąż go z elementem:

<script type="text/x-magento-init">
    {
        "#element": {
            "js/component": {} // Not entirely sure what {} is and what I'm passing here
        }
    }
</script>

Następnie po prostu dołącz szablon .phtml do instrukcji układu, na przykład umieściłem mój w obszarze default.xmlznajdującym się app/design/frontend/<Vendor>/<theme>/Magento_Theme/layoutpod węzłem body i wspomniałem:

<block class="Magento\Framework\View\Element\Template" name="theme.js" template="Magento_Theme::html/js.phtml" />

Nie miałem wystarczającej liczby przedstawicieli, aby skomentować ten komentarz, ale tylko zauważyć, że odpowiedź Garetha nie do końca działała dla mnie.

var config = {
    map: {
        '*': {
            'component': 'js/component'
        }
    },
    shim: {
        'component': {
            deps: ['jquery']
        }
    }
};

Owijanie „komponentu”: „js / komponent” '*':{}załatwiło sprawę.

Zamiast tworzyć plik szablonu, dodałem poniższy kod na górze app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default.xml

    <referenceContainer name="after.body.start">
        <block class="Magento\Framework\View\Element\Text" name="jquery.bootstrap">
            <arguments>
                <argument translate="true" name="text" xsi:type="string"><![CDATA[<script type="text/x-magento-init">{"*":{"jquery.bootstrap":{}}}</script>]]></argument>
            </arguments>
        </block>
    </referenceContainer>

Tak requirejs-config.jsmożna dodać do motywu w następujący sposób. W ten sposób dodaję bibliotekę dotdotdot do niestandardowego motywu magento2.

1. Pobierz i dodaj bibliotekę Js do swojego motywu, postępując zgodnie ze ścieżką:

// app/design/frontend/Namespace/themename/web/js/jquery.dotdotdot.min.js

2. Utwórz plik wymagań dla motywu w następujący sposób i powiadom go o nowo dodanej bibliotece.

// app/design/frontend/Namespace/themename/requirejs-config.js
var config = {
   map: {
       '*': {
           dotdotdot: 'js/jquery.dotdotdot.min',
       }
   }
};

3. Użyj dodanej biblioteki w głównym pliku js kompozycji w następujący sposób:

// app/design/frontend/Namespace/themename/web/js/main.js
require([ 'jquery' , 'dotdotdot' , 'domReady!'],function($){
    $(window).load(function() {
        //custom js code
        /* $(".product-item-name").each(function(){
            $(this).dotdotdot(); 
        }); */
    });
});

4. i dołącz plik js motywu do głowy witryny w następujący sposób:

// app/design/frontend/Namespace/themename/Magento_Theme/layout/default_head_blocks.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="js/main.js"/> 
    </head>
</page>

Możesz dodać dowolną zewnętrzną bibliotekę JS i niestandardowy plik na każdej stronie w magento2.