What is the RequireJS configuration map vs paths vs shim in Magento 2?

Magento 2 used Require JS Configuration properties are the map, paths, shim, mixins, and deps.

In Magento, We have to declare all the Require JS configuration properties inside the requirejs-config.js file.

You can declare the requirejs-config.js file at different AREA Scope like frontend or adminhtml.

A requirejs-config.js file contains the root config object, under the root config object you have to declare all the configuration properties.

Require js used AMD (Asynchronous module definition) pattern to load the js file in the page.

The Basic Configuration looks like inside the js file as per the given syntax,

requirejs-config — Requirejs config Magento

var config = {
    map: {
        '*': {
            'Magento_Checkout/template/view/shipping.html' : 'Rbj_Checkout/template/view/shipping.html',
            'Magento_Checkout/js/view/shipping' : 'Rbj_Checkout/js/view/shipping'
        }
    },
    paths: {
        "CheckoutPath" : 'Rbj_Checkout/js/view/',
        "googlePayLibrary": "https://pay.google.com/gp/p/js/pay",
    },
    shim: {
        'Magento_PageBuilder/js/resource/slick/slick': {
            deps: ['jquery']
        }
    },
    config: {
        mixins: {
            'Magento_Theme/js/view/breadcrumbs': {
                'Magento_Theme/js/view/add-home-breadcrumb': true
            }
        }
    },
    deps: [
        'Magento_Theme/js/theme'
    ]
};

map: map config used to mapping js file. If you want to declare any new JS file that contains the define() method as well as you can also override core Magento JS or template files.

map: {
    '*': {
        'Magento_Checkout/template/view/shipping.html' : 'Rbj_Checkout/template/view/shipping.html',
            'Magento_Checkout/js/view/shipping' : 'Rbj_Checkout/js/view/shipping'
    }
}

We are overriding the shipping template and JS file from the checkout module to our module using map config.

paths: paths config is the same as maps but also used to declare paths of the JS file.

You can declare a module JS path in the paths config and use an alias to the template file.
paths config used to declare third party js file also.

Paths alias will be used to rename path segment as well as full js module also.
Path aliases configuration applies globally.

paths: {
    "checkoutPath" : 'Rbj_Checkout/js/view/',
    "googlePayLibrary": "https://pay.google.com/gp/p/js/pay",
}

if any files inside the view folder are available, let’s assume, title.js. You can use this paths alias like in template,

 <script type="text/x-magento-init">
    {
        "*": {
            "checkoutPath/title" : {
                "storeId": "<?= $block->getStoreId();?>"
            }
        }
    }
</script>

Here “checkoutPath/title” refers to app/code/Rbj/Checkout/js/view/title.js

googlePayLibrary alias used to load third-party JS files without .js extension the URL.

shim: shim config used to declare dependency.

If you want to load a specific file before any other JS file you can declare using shim config.

shim: {
  'Magento_PageBuilder/js/resource/slick/slick': {
      deps: ['jquery']
   }
}

Here jquery file is load first after that slick.js file will be loaded. Shim gives a guarantee to load the dependent files first always.
If the dependent file will be not found, your js file will be not loaded. In the above syntax, if the jquery file is not loaded, the slick.js file will be never called on the page.

mixins: mixins config used to create JS mixins. you can declare JS files or any widget to be used as mixins.

config: {
    mixins: {
        'Magento_Theme/js/view/breadcrumbs': {
            'Magento_Theme/js/view/add-home-breadcrumb': true
        }
    }
}

Here we have to declare true for the mixins to work.

deps: A deps property used to load Javascript files on every page of the site.

When you check the network tabs of any page on the Magento site, you can able to see the theme.js file loaded on each page.

deps: [
    'Magento_Theme/js/theme'
]

You can use different config values as per your requirement in the module.

Share this:

Related