Magento 2：テーマにrequirejs-config.jsがありますか？

requirejs-config.jsMagentoテーマを介してファイルを含める（またはRequireJSを構成する）ことは可能ですか？または、Magentoモジュール専用の機能ですか？テーマ構造上のdevのドキュメントの情報は、このポイントにあいまいです。

開発者ドキュメントではRequireJSについては何も言及していませんが、テーマにはが含まれてwebいるため、javascriptをバンドルできます。JavaScriptをテーマにバンドルできる場合、それはRequireJSモジュールをテーマにバンドルできることを意味し、RequireJSモジュールをテーマにバンドルできる場合、そのモジュールは特定のRequireJS構成を必要とする可能性があります。

私の素朴な仮定はテーマになるだろう、この能力を持っているが、私はこの1つの方法または他の任意のドキュメントを見つけることができていない、とMagentoののに必要なコードの洞窟探検をして過ごすために無料のアフタヌーンいないrequirejs-config.jsファイルを含むを。

実際にテーマモジュールdirsにrequire-config.jsを含めることができます。

問題は（実際にフロントエンドチームにとって）構成をオーバーライドする可能性はないようですが、構成を拡張することです。

そのため、Magento_Themeモジュールの例をここで取り上げます。dirにrequire-config.jsを追加すると<theme_base_dir>/Magento_Theme、生成されたrequire-config.jsファイルに構成が追加され、Magento_Themeモジュールの構成も追加されます。

あなたの質問に答えるために、私はrequire-config.jsをテーマ<theme_base_dir>/webディレクトリとテーマルートディレクトリの下に追加しようとしました。両方とも機能しませんでした。更新：実際には以下の回答によれば、テーマベースディレクトリに配置することで可能です

したがって、答えは基本的にはイエスになります。どのモジュールにもjs要件を追加できるからです（テーマに関連するjsファイルは<theme_base_dir>/Magento_Themedirの下に配置するのが最適です）。

私は言うでしょうが、任意のモジュールの外にrequire-config.jsに関連するテーマを追加する可能性があるはずです（おそらくあなたは与えられたモジュールを非アクティブ化するでしょう）そしてまたモジュールrequire-config.jsをオーバーライドすることも可能であるべきです。

両方とも可能なATMではないようです。

===更新===

実際、テーマ固有のrequire-config.jsを使用することは可能です。以下の@Gareth Daineの回答を参照してください

OK、私はそれを解決したかもしれないと思うし、ドキュメントは曖昧であり、プロセスを明確にするために更新する必要があると思う。

テーマの両方とルートのそれぞれ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テンプレートを含めるだけです。たとえば、bodyノードの下に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 / 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は、次のようにテーマに追加できます。これが、magento2カスタムテーマにdotdotdotライブラリを追加する方法です。

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>

magento2のすべてのページに任意の外部JSライブラリとカスタムファイルを追加できます。