6

Can any one tell that what is the difference between the keywords that are used in requirejs-config.js like 'map','paths','shim' and 'deps' please elaborate exact difference if possible with example?

var config = {
    "map": {
        '*': {

        }
    },
    "deps": [

    ],
    "shim": {
     },
    "paths": {            
    }, 
};
5

Shim:

To build a dependency on the third-party plugin, specify a [shim] in the following configuration files:

requirejs-config.js

 var config = {
     "shim": {
     "3-rd-party-plugin": ["jquery"]
     }
 };

Map:

Replace a default JS component To use a custom implementation of an existing Magento JS component: Place the custom component source file in one of the following locations:

Your theme JS files: /web/js or /_/web/js Your module view JS files: /view/frontend/web/js Create a RequireJS configuration file requirejs-config.js, having specified the following:

var config = {
  "map": {
    "*": {
      "<default_component>": "<custom_component>"
    }
  }
};

Deps:

Is used when your require js configurations depends upon some dependencies, i.e. you want to load some dependencies before your requires js define()’d is called. example:

var config = {
    "deps": [
        "jquery"
    ]
};

Here, It loads the [jquery] as soon as the require define()’d is called.

1

map: map is used to provide a prefix to a module with the different Id. format of map configuration:

map: {
    '<module name>': {
        '<Id>': '<JS file>'
    }
}

deps: Is used when your require js configurations depends upon some dependencies, i.e. you want to load some dependencies before your requires js define()’d is called.

var config = {
    "map": {
        '*': {
            'sample': 'sample1.js'
        }
    },
    "deps": [
        "jquery"
    ]
};

shim: It used when there are some scripts, to whome you want to declare globally, and those scripts not using define() to define values, if those scripts already used the define() then it will not work correctly. examples:

var config = {
    "shim": {
        "sample": {
            "deps": ["jquery"],
            "exports": webkulSample
        }
    }
}

For more details refer this link - https://webkul.com/blog/require-js-configurations/

Hope it helps !

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.