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

Можно ли включить requirejs-config.jsфайл (или иным образом настроить RequireJS) через тему Magento? Или возможность зарезервирована для модулей Magento? Информация для разработчиков по структуре темы неоднозначна.

В документации разработчика ничего не говорится о RequireJS - однако, темы включают в себя, webчто означает, что с ними может быть связан javascript. Если javascript может быть связан с темой, это означает, что модуль RequireJS может быть связан с темой, и если модуль RequireJS может быть связан с темой, для этого модуля может потребоваться определенная конфигурация RequireJS.

Моим наивным предположением было бы, что темы будут иметь такую ​​возможность, но я так и не смог найти какую-либо документацию по этому поводу, и у меня нет свободного времени, чтобы потратить на выполнение необходимого кода, написанного на requirejs-config.jsфайле Magento, в том числе.

вы на самом деле можете включить require-config.js в ваши темы Module dirs.

Проблема (на самом деле для нашей команды внешнего интерфейса) в том, что, похоже, нет возможности переопределить конфигурацию, но расширить ее.

Итак, чтобы взять модуль Magento_Theme для примера здесь, если вы добавите require-config.js в <theme_base_dir>/Magento_Themedir, config будет добавлен в сгенерированный файл require-config.js, а также будет добавлена ​​конфигурация из модуля Magento_Theme.

Чтобы ответить на ваш вопрос, я также попытался добавить require-config.js в директорию тем, <theme_base_dir>/webа также в корневой каталог тем. Оба не сработали. обновление: на самом деле, согласно ответу ниже, это возможно, поместив его в директорию базы тем.

Таким образом, ответ будет в основном да, так как вы можете добавить любое требование js в любом модуле (связанные с темой файлы js лучше всего размещать в <theme_base_dir>/Magento_Themeдиректории)

Хотя я бы сказал, должна быть возможность добавить связанный с темой require-config.js вне любого Модуля (возможно, вы деактивируете данный модуль), а также должна быть возможность переопределить модули require-config.js.

И то, и другое кажется невозможным.

=== UPDATE ===

на самом деле кажется возможным иметь специфический для темы require-config.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под узлом body и ссылался на:

<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']
        }
    }
};

Обтекание 'component': 'js / component' с '*':{}этим справилось.

Кроме того, вместо создания файла шаблона, я добавил код ниже в верхней части 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 Library в свою тему, следуя по пути:

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

2. Создайте файл requirejs темы следующим образом и дайте знать requirejs недавно добавленную библиотеку.

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