2

Magento 1.x から Magento 2.x に移行中です。Magento2 は、JavaScript ファイルの処理に RequireJS を使用していることがわかりました。そこで、RequireJS とは何か、そしてその使い方を学びました。

ほとんどの例では、data-main="main"を使用して構成ファイルを定義していることがわかりました。

Magento2 の default_head_blocks.xml ファイルで、次のようなスクリプト タグを見つけました。

<script src="requirejs/require.js"/>

ここでは、 data-mainを指定していません。

これらは私の質問です：

  1. Magento2/RequireJS は、構成のためにどの JS をロードする必要があるかをどのように認識していますか? (これについては、requirejs-config.js が複数の場所で見つかりました)

  2. デフォルトでは、Magento2 は大量の JS (20 以上) をロードしますが、それらを制限するにはどうすればよいですか?

これに関する十分なドキュメントが見つかりませんでした。

4

1 に答える 1

3

Magento 2 JS 開発に関するすべての回答を得るのに最適な場所は、Magento 2 のドキュメントです。これは、これに関する有用なリソースです。http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/js_init.htmlでは、コンポーネントの初期化について詳しく説明しています。

上記の 2 つの質問に答えるには -

Q.1. Magento2/RequireJS は、構成のためにどの JS をロードする必要があるかをどのように認識していますか? (これについては、requirejs-config.js が複数の場所で見つかりました)

各 Magento 2 モジュールには、requirejs-config.jsそのすべてのモジュール構成をロードするためのファイルがあります。すなわち

var config = {
    map: {
        '*': {
            compareItems:           'Magento_Catalog/js/compare',
            compareList:            'Magento_Catalog/js/list',
            relatedProducts:        'Magento_Catalog/js/related-products',
            upsellProducts:         'Magento_Catalog/js/upsell-products',
            productListToolbarForm: 'Magento_Catalog/js/product/list/toolbar',
            catalogGallery:         'Magento_Catalog/js/gallery',
            priceBox:               'Magento_Catalog/js/price-box',
            priceOptionDate:        'Magento_Catalog/js/price-option-date',
            priceOptionFile:        'Magento_Catalog/js/price-option-file',
            priceOptions:           'Magento_Catalog/js/price-options',
            priceUtils:             'Magento_Catalog/js/price-utils',
            catalogAddToCart:       'Magento_Catalog/js/catalog-add-to-cart'
        }
    }
};

これにより、必要なすべての JavaScript ファイルがどこにあるかが requirejs に伝えられます。

JS ファイルをいつ使用するかを Magento に伝える方法は複数あります -

  • data-mage-initHTML 要素で。例えば<div class="block upsell" data-mage-init="{"upsellProducts":{}}" data-limit="0" data-shuffle="0">

  • ページのスクリプトタグなど

    <script type="text/x-magento-init"> { "[data-role=tocart-form], .form.map.checkout": { "catalogAddToCart": {} } } </script>

  • JSファイル内など$('.yourSelector').yourPlugin();

Q.2. デフォルトでは、Magento2 は多数の JS (20 以上) をロードしますが、それらを制限するにはどうすればよいですか?

複数のモジュールの結果としてロードされる JS ファイルの膨大な数は欠点の 1 つですが、Varnish のようなリバース プロキシでフル ページ キャッシュを正しく使用すれば、開発サーバーであってもパフォーマンスの低下は無視できます。

于 2016-01-05T18:38:07.013 に答える