Magento 2: Requjs-config.js в темах?

Чи можливо включити requirejs-config.jsфайл (або іншим чином налаштувати RequireJS) через тему Magento? Або можливість зарезервована для модулів Magento? Інформація про розроблювачі документів щодо структури тем неоднозначна до цього моменту.

Документи програми Dev нічого не згадують про RequireJS - однак, теми включають в себе, webщо означає, що javascript може бути в комплекті з ними. Якщо javascript можна поєднати з темою, це означає, що модуль RequireJS може бути в комплекті з темою, а якщо модуль RequireJS може бути в комплекті з темою, цей модуль може вимагати певної конфігурації RequireJS.

Моє наївне припущення, що теми мали б цю можливість, але я так і не зміг знайти жодної документації так чи інакше, і не маю жодного дня вільного часу, щоб витратити потрібний код, зокрема, на requirejs-config.jsфайл Magento .

ви можете фактично включити Requi-config.js у свої тематичні модулі.

Проблема полягає в тому, що, власне, для нашої команди фронтенду, немає можливості переосмислити конфігурацію, але розширити конфігурацію.

Отже, щоб взяти тут приклад модуля Magento_Theme, якщо ви додасте посилання-dir-config.js під <theme_base_dir>/Magento_Themedir, конфігурація буде додана до створеного файла Requ-config.js, а також буде додано конфігурацію з модуля Magento_Theme.

Щоб відповісти на ваше запитання, я також спробував додати Require config.js під темою <theme_base_dir>/webdir, а також під коренем dir теми. Обидва не працювали. оновлення: насправді відповідно до наведеної нижче відповіді, можливо, розмістивши її в базовій редакції теми

Таким чином, відповідь була б так, оскільки ви можете додати будь-яку js вимогу під будь-який модуль (файли, пов'язані з темами, можливо найкраще розмістити під <theme_base_dir>/Magento_Themedir)

Хоча я б сказав, має бути можливість додати тему, яка пов’язана з requ-config.js, поза межами будь-якого модуля (можливо, ви деактивуєте даний модуль), а також слід мати можливість замінити модулі requ-config.js.

Обидва видаються не можливими в атм.

=== ОНОВЛЕННЯ ===

насправді видається можливим мати тему, яка вимагає config -js.js. Дивіться відповідь @Gareth Daine нижче

Гаразд, я думаю, що я це вирішив, і я вважаю, що документація неоднозначна і потребує оновлення для уточнення процесу.

Я перемістив свої requirejs-config.jsзсередини в каталогах web/jsі webвідповідно для обох Magento_Themeі кореня моєї теми, <Vendor>/<theme>і тепер моя конфігурація RequireJS об'єднана в основну requirejs-config.jsз усіма іншими включеними.

Отже, виявляється, що вам потрібно включити requirejs-config.jsфайл у наступних місцях на основі вимог теми / модуля.

Тематичний рівень

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

Рівень модуля

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

Отже, у своїй requirejs-config.jsтемі ви повинні зіставити свій компонент у шлях, а потім використовувати shimдля оголошення будь-яких залежностей:

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

Тоді вам потрібно буде створити шаблон для проведення ініціалізації компонентів за допомогою <script>тегу (якщо ви не додаєте його безпосередньо до елемента у файлі .phtml), якщо це шлях, який ви хочете пройти, включити наступний вміст:

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

Крім того, прив'яжіть його до елемента:

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

Потім просто включіть шаблон .phtml у ваші інструкції щодо макету, наприклад, я розмістив шахту в межах default.xmlрозташованого app/design/frontend/<Vendor>/<theme>/Magento_Theme/layoutпід вузлом тіла та посилався:

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

У мене не було достатньої кількості представників, щоб зробити це коментарем, але просто зауважив, що відповідь Гарета не дуже спрацювала для мене.

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

Обгортання 'компонента': 'js / компонент' '*':{}зроблено з фокусом.

Також замість створення файлу шаблону я додав код нижче вгорі 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>

Так, requirejs-config.jsдо теми можна додати наступне. Ось так я додаю бібліотеку dotdotdot у свою власну тему magento2.

1. Завантажте та додайте бібліотеку Js у свою тему, дотримуючись шляху:

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

2. Створіть файл Requjs теми як слід, і повідомте запитувачам про щойно додану бібліотеку.

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

3. Використовуйте додану бібліотеку в головному файлі js вашої теми таким чином:

// 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. і включіть js-файл вашої теми в голову вашого веб-сайту так:

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

Ви можете додати будь-яку зовнішню бібліотеку JS та спеціальний файл на кожну сторінку magento2.