CODEWITHSUNDEEP
requirejsmagento2magento-2.0
Ashutosh
Ashutosh

Reputation: 4675

How to use Magento2 with RequireJS?

I'm just migrating from Magento 1.x to Magento 2.x. I found that Magento2 uses RequireJS for handling JavaScript files. So I learnt what RequireJS is, and how to use it.

I found that most of the examples uses data-main="main" to define the configuration file.

In Magento2's default_head_blocks.xml file, I found the script tag like this:

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

Here they did not specify any data-main.

These are my questions:

  1. How Magento2/RequireJS knows which JS should be loaded for configuration? (I found requirejs-config.js for this in multiple places)

  2. By default Magento2 loads lots of JS (more than 20), how can I limit them?

I could not find enough documentation on this.

Upvotes: 2

Views: 7232

Answers (1)

Steven
Steven

Reputation: 476

The best place to get all your answers for Magento 2 JS development is the Magento 2 docs, it really is a useful resource on this. http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/js_init.html explains in detail about component initialisation.

To answer your two questions above -

Q.1. How Magento2/RequireJS knows which JS should be loaded for configuration? (I found requirejs-config.js for this in multiple places)

In each Magento 2 module there is a requirejs-config.js file to load all that modules configuration. i.e.

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

This is telling requirejs where all the required JavaScript files are located.

There are multiple way to tell Magento when to use your JS file -

  • data-mage-init on a HTML element. e.g. <div class="block upsell" data-mage-init="{"upsellProducts":{}}" data-limit="0" data-shuffle="0">

  • script tag on the page e.g

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

  • within a JS file e.g. $('.yourSelector').yourPlugin();

Q.2. By default Magento2 loads lot's of JS (more than 20), how can I limit them?

The sheer number of JS files that are loaded as a result of multiple modules is one of the downsides, however, with the correct usage of full page caching with a reverse proxy like Varnish the performance reduction is negligible, even in a development server.

Upvotes: 3

Related Questions