Magento 2: erfordernjs-config.js in Themes?

Ist es möglich, eine requirejs-config.jsDatei über ein Magento-Design einzuschließen (oder RequireJS anderweitig zu konfigurieren)? Oder ist die Fähigkeit für Magento-Module reserviert? Die dev docs-Informationen zur Themenstruktur sind in diesem Punkt nicht eindeutig.

In den Entwicklerdokumenten wird nichts über RequireJS erwähnt. In den Designs ist jedoch ein enthalten web, sodass Javascript mit ihnen gebündelt werden kann. Wenn Javascript mit einem Thema gebündelt werden kann, bedeutet dies, dass ein RequireJS-Modul mit einem Thema gebündelt werden kann, und wenn ein RequireJS-Modul mit einem Thema gebündelt werden kann, erfordert dieses Modul möglicherweise eine bestimmte RequireJS-Konfiguration.

Ich gehe naiv davon aus, dass Themen über diese Fähigkeit verfügen würden , aber ich konnte auf die eine oder andere Weise keine Dokumentation finden und habe keinen Nachmittag frei, um das erforderliche Code-Spelunking für Magentos requirejs-config.jsDatei durchzuführen, einschließlich.

Sie können tatsächlich eine require-config.js in Ihre Themen-Modulverzeichnisse aufnehmen.

Das Problem ist (eigentlich für unser Frontend-Team), dass es anscheinend keine Möglichkeit gibt, die Konfiguration zu überschreiben, sondern die Konfiguration zu erweitern.

Um das Magento_Theme-Modul hier als Beispiel zu betrachten: Wenn Sie eine require-config.js unter <theme_base_dir>/Magento_Themedir hinzufügen , wird die config zur generierten require-config.js-Datei hinzugefügt und auch die config aus dem Magento_Theme-Modul wird hinzugefügt.

Um Ihre Frage zu beantworten, habe ich auch versucht, eine require-config.js unter dem Themes-Verzeichnis <theme_base_dir>/webund auch unter dem Themes-Root -Verzeichnis hinzuzufügen . Beides hat nicht funktioniert. Update: Tatsächlich ist es gemäß der Antwort unten möglich, es in das Basisverzeichnis des Themas zu platzieren

Die Antwort wäre also im Grunde ja, da Sie jede js-Anforderung unter jedem Modul hinzufügen könnten (themenbezogene js-Dateien können am besten unter dem Verzeichnis platziert werden <theme_base_dir>/Magento_Theme).

Obwohl ich sagen würde, sollte es die Möglichkeit geben, ein themenbezogenes require-config.js außerhalb eines Moduls hinzuzufügen (vielleicht deaktivieren Sie das angegebene Modul) und es sollte auch möglich sein, ein Modul require-config.js zu überschreiben.

Beides scheint atm nicht möglich.

=== UPDATE ===

Tatsächlich scheint es möglich zu sein, eine themenspezifische require-config.js zu haben. Siehe die Antwort von @Gareth Daine weiter unten

OK, ich glaube, ich habe es möglicherweise gelöst und bin der Meinung, dass die Dokumentation nicht eindeutig ist und aktualisiert werden muss, um den Prozess zu verdeutlichen.

Ich habe meine requirejs-config.jsaus den Verzeichnissen web/jsund webjeweils für beide Magento_Themeund das Stammverzeichnis meines Themas um verschoben <Vendor>/<theme>und jetzt wird meine RequireJS-Konfiguration requirejs-config.jsmit allen anderen Includes in die Hauptkonfiguration eingebunden .

Es scheint also, dass Sie die requirejs-config.jsDatei an den folgenden Speicherorten einschließen müssen, basierend auf den Themen- / Modulanforderungen.

Themenebene

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

Modulebene

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

In Ihrem requirejs-config.jsfür Ihr Thema sollten Sie Ihre Komponente einem Pfad zuordnen und dann verwenden, shimum Abhängigkeiten zu deklarieren:

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

Dann müssen Sie eine Vorlage erstellen, um die Initialisierung der Komponenten über ein <script>Tag zu speichern (es sei denn, Sie hängen sie direkt an ein Element in einer .phtml-Datei an).

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

Alternativ binden Sie es an ein Element:

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

Dann einfach die .phtml Vorlage in Ihrem Layout Anweisungen enthalten zum Beispiel stellte ich Mine innerhalb der default.xmlsich an app/design/frontend/<Vendor>/<theme>/Magento_Theme/layoutunter dem Körperknoten und verwiesen:

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

Ich hatte nicht genügend Repräsentanten, um dies zu kommentieren, aber nur um zu bemerken, dass Gareths Antwort für mich nicht ganz funktionierte.

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

Das Umschließen der 'Komponente': 'js / Komponente' mit '*':{}hat den Trick gemacht.

Anstatt eine Vorlagendatei zu erstellen, habe ich den folgenden Code oben hinzugefügt 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>

Ja requirejs-config.jskann wie folgt zum Thema hinzugefügt werden. So füge ich eine dotdotdot-Bibliothek in mein Magento2-Design ein.

1. Laden Sie die Js Library herunter und fügen Sie sie in Ihr Design ein. Gehen Sie dabei wie folgt vor:

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

2. Erstellen Sie die RequirementJS-Datei eines Themas wie folgt und teilen Sie den RequirementJS die neu hinzugefügte Bibliothek mit.

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

3. Verwenden Sie die hinzugefügte Bibliothek in der Haupt-JS-Datei Ihres Themas wie folgt:

// 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. und fügen Sie die js-Datei Ihres Themas wie folgt in den Kopf Ihrer Site ein:

// 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>

Sie können jede externe JS-Bibliothek und benutzerdefinierte Datei auf jeder Seite in magento2 hinzufügen.