In this article, we are going to understand the RequireJS Configuration 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 Asynchronous Module Definition (AMD) pattern to load the js file in the page.
The Basic Configuration looks like inside the js file as per the given syntax,
var config = {
map: {
'*': {
'Magento_Checkout/template/view/shipping.html' : 'Rajesh_Checkout/template/view/shipping.html',
'Magento_Checkout/js/view/shipping' : 'Rajesh_Checkout/js/view/shipping'
}
},
paths: {
"CheckoutPath" : 'Rajesh_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'
]
};
Let’s understand these configurations one by one.
- 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>' } }Here <module name> is an already exist module js file or you can use ‘*’.
here Id is use to alias JS file.
it can be defined in two formats:- module specific: In this mapping is defined only for particular module.
example:map: { 'module/module1': { 'sample': 'sample1.js' }, 'module/module2': { 'sample': 'sample2.js' } }Here, when module/module1.js requires(‘sample’), then it returns sample1.js, and when module/module2.js requires(‘sample’), then it returns sample2.js.
- globally: It can be used by any module.
map: { '*': { 'sample': 'sample1.js' }, 'module/module1': { 'sample': 'sample2.js' } }In this ‘*’ is used for globally, i.e. any module which ask for require(‘sample’), then it returns sample1/js, but when module/module2.js require(‘sample’), then it returns ‘sample2.js’.
- module specific: In this mapping is defined only for particular module.
map in Magento2: 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' : 'Rajesh_Checkout/template/view/shipping.html',
'Magento_Checkout/js/view/shipping' : 'Rajesh_Checkout/js/view/shipping'
}
}
We are overriding the shipping template and JS file from the checkout module to our module using map config.
baseUrl: Is used when we want to define the url to load the js files for all the modules used in require js.
baseUrl applied on all the files which defined with name starting with a slash”/”, have any url like “http://” or having .js extension.
example:
var config = {
"baseUrl": "module/test"
};
require( ["sample/sample1", "https://code.jquery.com/jquery-3.1.1.min.js", "sample2.js"],
function(samplemodule) {
}
);
Here, samplemodule is reffered to module/test/sample/sample1.js,
“https://code.jquery.com/jquery-3.1.1.min.js” is loaded from the url which is specified
and sample2.js is loaded from the same directory.
paths: Paths is used when you want to relate your base url path the your module path.
Path have the same properties as the baseUrl.
If the path is started from “/” or any url “http://” then it will not relate to the base url.
example:
var config = {
"baseUrl": "module/test",
"paths": {
"sample": "web/js"
},
};
require( ["sample/sample1"],
function(samplemodule) {
}
);
Now, samplemodule is reffered to the file at path “module/test/web/js/sample1.js”.
paths in Magento2: 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" : 'Rajesh_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/Rajesh/Checkout/js/view/title.js
googlePayLibrary alias used to load third-party JS files without .js extension the URL.
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": moduleSample
}
}
}
Here, jquery(dependencies) should be loaded before the sample.js is loaded, and then you can use moduleSample as a global module.
var config = {
"shim": {
"sample": {
"deps": ["jquery"],
"exports": moduleSample,
init: function (jquery) {
return this.moduleSample.noConflict;
}
}
}
}
Here, Dependencies are jquery, should be loaded before the sample.js.
Here, we use moduleSample as a global module.
init function is called after the exports, in this we can write the conflicts or clean up codes, in this function all the dependencies taken as arguments, and the return object from this functiona overwrites the string defined in “exports”.
shim in Mgento2: 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.
