特定のブロックJS（およびCSS）を追加する方法-_正しい

だから私は文字通り何時間もグーグルで読んだり、電気ショック療法を勉強したりしましたが、誰も（アランストームさえも）これを私に綴った人はいません。インターネット全体がMagento 2の特定のページにJSまたはCSSを追加することに関心があるようですが、私が探しているのは、JS / CSSを特定のブロックに追加することです。

だから、ここに一言で私の質問があります：

特定のブロックにJS（およびCSS）を追加する最良の方法は何ですか。ブロックがページ（*）に存在する場合、JS / CSSがロードされ、ブロックがそこにない場合、CSS / JSはありません。？

*つまり、layout.xmlを介してページ/テンプレートに、モジュールのカスタムページに、ブロック/ページのtoHtmlメソッドを介して、または最も重要なこととして、カテゴリのWYSIWYGに埋め込まれたブロックを設定できます。 /製品の説明/ CMSブロック/ CMSページ。

私はアランの素晴らしい記事の ALOTを読みました（この人に再び賞賛します！）、これに関する他の記事の連は言うまでもありませんが、誰もが特定のページに追加したいと思うような気がします。ブロックが使用されます。

私はさまざまなテクニックに精通しているように感じますが、ここで何か不足している可能性があるので、コミュニティからのコンセンサス、およびおそらくすべてのフロントエンドからフルスタックの開発者までの看板を少し探してください。私と同じような質問と選択肢を考えます。

以前は、Magento 1では、ブロックコンストラクターを調べ、レイアウトを取得し、ヘッド参照を取得して、そこでaddJs / addCssを呼び出すか、可能であれば、layout.xmlのメソッドを使用していました。これは、JSがブロックコンストラクターのリソースリストに「追加」されたことを意味します（テーマレベルがヘッドブロックを出力する前に）。しかし、これは今では不可能のようです。

私はJS / CSSを追加する方法について読みました（これは単純な「方法は？」ではありません。これはより簡潔な「正しい/ mag2の方法は何ですか???」）、これらに精通しています。テクニック：

/view/[area]/layout/[default/page_id].xmlテクニック、<head></head>ルート要素を使用
モジュールにHeadブロックを追加し、head.additionalに追加し、ブロックが読み込まれているかどうかに関する何らかのロジックを追加する
\ Asset \ GroupedCollectionオブジェクトと\ Asset \ Repositoryオブジェクトを使用して、ページ/テンプレートのcustructorから挿入します（ただし、これはブロックとorkしていないようです）。
RequireJSを使用してrequireJS構成をモジュールに適用する

何か逃したことがありますか？

正しい方法は、RequireJSライブラリと、x-magento-init属性を使用するかrequire("my_module", function(){ ... })、インラインスクリプトに構文を持つスクリプトだけを使用することだと考えています。しかし、これは私には不器用に思えますか？私はスクリプトをロードするためにスクリプトをセットアップする必要があり、少なくとも私のJSのいくつかをインライン化することを余儀なくされていますが、これを私のphtmlにポップすることによって、「ここが私のブロックです。

ただし、PHPを介してこれを実行できるようにしたいのですが、JSをカプセル化し、（理想的には）フロントエンドチームがこれを好きなように書けるようにするバックエンド/スタックプログラマーとして理想的です。要するに、ロードの処理に注意してください（バックエンド開発からフロントエンド開発までは「phtmlをここに置き、必要に応じてテーマでオーバーライドします。同様に、jsファイル、その依存ライブラリ、およびブロックのCSSをここに置きます」）。

これは、__construct資産システムに依存性を注入する方法を示唆しています。ただし、これを機能させることはできません。これは、ここのAlan Stormsのクイック記事で確認されているようです：Magento Quickies：Magento 2：プログラムによるフロントエンドアセットファイルの追加

「したがって、フロントエンドアセットを一緒に運ぶブロックを作成することについての考えは窓の外にあります」に注意してください。...つまらない:(

お読みいただき、ご検討いただき、ありがとうございます。ご返信をお待ちしております。

PS>明らかに、これはStackExchangeなので、私が達成しようとしていること（特定のリソースの読み込みをブロックする）の最良のコースとして回答をマークしますが、すべての回答を投稿の下部に参照としてリストするように努力しますディスカッションに追加するか、解決策を提案します！

— シグナスデジタル
ソース

jsの場合、magento 2はを使用するため、簡単ですrequire.js。
つまり、必要なときにオンザフライでjsを含めることができます。

ブロックは、（ほとんどの場合）テンプレートによってレンダリングする必要があります。
したがって、これをテンプレートに追加する必要があります。

<script type="text/javascript">
    require([
        "jquery",
        .... //any other js dependencies you have
        "Namespace_Module/js/filename_here"
    ], function(){
        //some js code here. 
        //if you don't need any additional js code just have an empty function
    });
</script>

次にview/adminhtml|frontend/web/js/filename_here.js、すべてのjsコードが存在するjsファイルを作成します。

require.js それが要求されたときにあなたのファイルをピックアップする方法を知っています。

CSSファイルの場合、それが可能かどうかはわかりません。
cssファイルはheadページのセクションに移動する必要がありますが、たとえば、このようなcmsページのコンテンツ内にブロックがある場合、cmsページ{{block class="..." template="..."}}のコンテンツを処理する必要があるとき、その時点までのhtmlはすでにレンダリングされていますそのため、phpを介してヘッドブロックに何かを追加することはできません。あなたはそれをテンプレートに追加しようとすることができますが、それは<style...あなたが望むものではありません（私は仮定します）。

— マリウス
ソース

マリウスに感謝します。私は、上記の可能性の1つとしてrequireJSルートを調査していますが、簡潔な例をありがとうございます！ただし、CSSの問題の解決策にはならないことに同意しますが、MagentoのLessコンパイラーの影響により、これはミュートポイントになる可能性があります。また、それは少し抽象的ですが、requireJSを使用してJSをロードし、スタイルシートへのリンクをDOMに追加することができると思います。少なくとも非同期です!!!

— シグナスデジタル

実際、これはrequirejsページにあります。CSSをRequireJSでロードする方法です。：requirejs.org/docs/faq-advanced.html#css

— cygnus digital

@cygnusdigital。いいね。そのため、問題は解決しました:)

— マリウス

こんにちはマリウス、はい、いいえ、それはソリューションの良い候補です。要件に適合しているので、私はあなたの入力に感謝しますが、議論と代替案を探しています。恐らく私だけが恐竜であるかもしれませんが、コンストラクタ内でJS / CSSをロードする方がより簡潔に感じます。「ブロックがビルド/インクルードされている場合、これをヘッドに追加します。」：DIは、その場で条件付きでhead.additionalブロックに追加できるかどうか疑問に思います。（つまり、ブロックコンストラクターの段階で、モジュールのヘッドブロックをhead.additionalに追加します）。

— シグナスデジタル

レイアウトファイルを介して追加される通常のブロックを使用してこれを行うことができますが{{block}}、ブロッククラスがインスタンス化されるときにヘッドセクションが既にレンダリングされるため、ディレクティブを介してページコンテンツに含まれるブロックに対してこれを行うことはできません。

— マリウス

特定のブロックJS（およびCSS）を追加する方法-_正しい_方法？