Magento 2: requirejs-config.js em temas?

É possível incluir um requirejs-config.jsarquivo (ou configurar o RequireJS) através de um tema Magento? Ou o recurso está reservado para os módulos Magento? As informações do desenvolvedor sobre a estrutura do tema são ambíguas a este ponto.

Os documentos do desenvolvedor não mencionam nada sobre o RequireJS - no entanto, os temas incluem um, o webque significa que o javascript pode ser empacotado com eles. Se o javascript puder ser empacotado com um tema, isso significa que um módulo RequireJS pode ser empacotado com um tema e se um módulo RequireJS puder ser empacotado com um tema, esse módulo poderá exigir uma configuração específica do RequireJS.

Minha suposição ingênua de que os temas teriam essa capacidade, mas não consegui encontrar nenhuma documentação dessa maneira ou de outra, e não tenho uma tarde livre para gastar fazendo o spelunking de código necessário no requirejs-config.jsarquivo do Magento, inclusive.

você pode incluir um require-config.js nos diretórios do módulo de temas.

O problema é (na verdade para a nossa equipe de front-end) que parece não haver possibilidade de substituir a configuração, mas estendê-la.

Portanto, para pegar o módulo Magento_Theme como exemplo aqui, se você adicionar um require-config.js no <theme_base_dir>/Magento_Themediretório, a configuração será adicionada ao arquivo require-config.js gerado e também a configuração do módulo Magento_Theme.

Para responder sua pergunta, também tentei adicionar um require-config.js no <theme_base_dir>/webdiretório de temas e também no diretório raiz de temas. Ambos não funcionaram. update: na verdade, de acordo com a resposta abaixo, é possível colocando-o no diretório base do tema

Portanto, a resposta seria basicamente sim, já que você pode adicionar qualquer requisito js em qualquer módulo (os arquivos js relacionados ao tema podem ser melhor colocados sob o <theme_base_dir>/Magento_Themedir)

Embora eu diria, deve haver a possibilidade de adicionar um tema relacionado a require-config.js fora de qualquer módulo (talvez você desative o módulo fornecido) e também deve ser possível substituir um dos módulos require-config.js.

Ambos parecem não ser possíveis.

=== ATUALIZAÇÃO ===

na verdade, parece possível ter um tema específico require-config.js. Veja a resposta de @Gareth Daine abaixo

OK, acho que posso ter resolvido e acredito que a documentação é ambígua e precisa ser atualizada para esclarecer o processo.

Mudei meu requirejs-config.jsde dentro dos diretórios web/jse webrespectivamente para ambos Magento_Themee a raiz do meu tema em<Vendor>/<theme> e agora minha configuração do RequireJS é mesclada no principal requirejs-config.jscom todas as outras inclusões.

Portanto, parece que você precisa incluir o requirejs-config.js arquivo nos seguintes locais, com base nos requisitos do tema / módulo.

Nível do tema

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

Nível do módulo

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

Portanto, no seu requirejs-config.jstema, você deve mapear seu componente para um caminho e depois usar shimpara declarar quaisquer dependências:

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

Em seguida, você precisará criar um modelo para manter a inicialização dos componentes por meio de uma <script>tag (a menos que você o anexe diretamente a um elemento dentro de um arquivo .phtml). Se esse for o caminho que você deseja seguir, inclua o seguinte conteúdo:

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

Como alternativa, vincule-o a um elemento:

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

Em seguida, basta incluir o modelo .phtml nas instruções de layout, por exemplo, coloquei o meu no local default.xmllocalizado app/design/frontend/<Vendor>/<theme>/Magento_Theme/layoutabaixo do nó do corpo e referenciei:

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

Não tinha representante suficiente para fazer disso um comentário, mas apenas para observar que a resposta de Gareth não funcionou muito para mim.

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

O empacotamento do 'component': 'js / component' '*':{}fez o truque.

Além disso, em vez de criar um arquivo de modelo, adicionei o código abaixo na parte superior 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>

Sim requirejs-config.jspode ser adicionado ao tema da seguinte forma. É assim que adiciono a biblioteca dotdotdot no meu tema personalizado magento2.

1. Faça o download e adicione a Biblioteca Js ao seu tema, seguindo o caminho:

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

2. Crie o arquivo requirejs de um tema da seguinte maneira e informe à requirejs a biblioteca recém-adicionada.

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

3. Use a biblioteca adicionada no arquivo js principal do seu tema da seguinte maneira:

// 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. e inclua o arquivo js do seu tema na cabeça do seu site da seguinte maneira:

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

Você pode adicionar qualquer biblioteca JS externa e arquivo personalizado em todas as páginas do magento2.