Magento 2: Temalarda requirjs-config.js?

requirejs-config.jsMagento temasıyla bir dosya eklemek (veya RequireJS'yi başka bir şekilde yapılandırmak) mümkün müdür ? Yoksa bu özellik Magento modülleri için mi ayrılmış? Tema yapısına dev docs bilgileri bu noktaya belirsiz.

Dev docs, RequireJS hakkında hiçbir şeyden bahsetmez - ancak temalar web, javascriptin onlarla birlikte paketlenebileceği anlamına gelir. Javascript bir tema ile paketlenebiliyorsa, bu bir RequireJS modülünün bir tema ile paketlenebileceği anlamına gelir ve bir RequireJS modülü bir tema ile paketlenebiliyorsa, bu modül belirli bir RequireJS yapılandırması gerektirebilir.

Benim saf varsayım temalar bu yeteneği olurdu , ama bu şu ya da bu konuda herhangi bir belge bulamadı ve öğleden sonra Magento requirejs-config.jsdosyasında gerekli kod spelunking yaparak harcamak için ücretsiz değil .

aslında Temalar Modülü dizinlerinize bir requir-config.js ekleyebilirsiniz.

Sorun (aslında ön uç ekibimiz için) yapılandırmayı geçersiz kılmak, ancak yapılandırmayı genişletmek için bir olasılık olmadığıdır.

Bu nedenle, burada bir örnek için Magento_Theme modülünü almak için, <theme_base_dir>/Magento_Themedir altında bir requir-config.js eklerseniz , yapılandırma oluşturulan requir-config.js dosyasına eklenir ve ayrıca Magento_Theme modülünden config eklenir.

Sorunuzu cevaplamak için ayrıca temalar dizinin altında <theme_base_dir>/webve ayrıca temalar kök dizininin altında bir requir-config.js eklemeye çalıştım . Her ikisi de işe yaramadı. güncelleme: aslında aşağıdaki cevaba göre, bunu tema taban dir içine yerleştirerek mümkündür

Bu nedenle, herhangi bir modül altına herhangi bir js gereksinimi ekleyebileceğiniz için cevap temel olarak evet olacaktır (temayla ilgili js dosyaları en iyi <theme_base_dir>/Magento_Themedir altına yerleştirilebilir )

Söylememe rağmen, herhangi bir Modülün dışında requir-config.js ile ilgili bir tema ekleme olasılığı olmalı (belki de verilen modülü devre dışı bırakabilirsiniz) ve ayrıca bir requir-config.js modülünü geçersiz kılmak mümkün olmalıdır.

Her ikisi de mümkün görünmüyor atm.

=== GÜNCELLEME ===

aslında temaya özel bir requir-config.js'ye sahip olmak mümkün görünüyor. Aşağıdaki @Gareth Daine'nin Cevabına bakınız

Tamam, sanırım çözdüm ve belgelerin belirsiz olduğunu ve süreci netleştirmek için güncellenmesi gerektiğini düşünüyorum.

Ben her ikisi için sırasıyla ve dizinler requirejs-config.jsiçinde web/jsve benim tema kökünden taşındı ve şimdi RequireJS yapılandırma benim diğer tüm içerir ile ana birleştirilir .webMagento_Theme<Vendor>/<theme>requirejs-config.js

Dolayısıyla, requirejs-config.jstema / modül gereksinimlerine göre dosyayı aşağıdaki konumlara dahil etmeniz gerektiği anlaşılıyor .

Tema Düzeyi

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

Modül Seviyesi

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

Bu nedenle, requirejs-config.jstemanız için bileşeninizi bir yola eşlemeniz ve ardından shimbağımlılıkları beyan etmek için kullanmanız gerekir:

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

Ardından, bir <script>etiket aracılığıyla bileşenlerin başlatılmasını sağlamak için bir şablon oluşturmanız gerekir (doğrudan bir .phtml dosyası içindeki bir öğeye eklemezseniz), bu gitmek istediğiniz yolsa, aşağıdaki içeriği ekleyin:

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

Alternatif olarak, bir öğeye bağlayın:

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

Sonra sadece .phtml şablonunu mizanpaj talimatlarınıza ekleyin, örneğin mayınları vücut düğümünün altındaki default.xmlkonuma yerleştirdim app/design/frontend/<Vendor>/<theme>/Magento_Theme/layoutve referans aldım :

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

Bu bir yorum yapmak için yeterli temsilcisi yoktu, ama sadece Gareth'in cevabının benim için oldukça işe yaramadığını not etmek.

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

'Bileşen' sarma: 'js / component' ile '*':{}hile yaptı.

Ayrıca bir şablon dosyası oluşturmak yerine aşağıdaki kodu ekledim 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>

Evet requirejs-config.jstemaya aşağıdaki gibi eklenebilir. Magento2 özel temamda dotdotdot kütüphanesini bu şekilde ekliyorum.

1. Js Library'yi aşağıdaki yolu izleyerek temanıza indirin ve ekleyin:

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

2. Aşağıdaki gibi bir temanın requirjs dosyasını oluşturun ve taleplere yeni eklenen kitaplığı bildirin.

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

3. Temanızın ana js dosyasındaki eklenen kütüphaneyi aşağıdaki gibi kullanın:

// 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. ve temanızın js dosyasını sitenizin kafasına aşağıdaki gibi ekleyin:

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

Magento2'deki her sayfaya herhangi bir harici JS kitaplığı ve özel dosya ekleyebilirsiniz.