Require Js Configurations

Configuration are used to pass data in your require js file to make the require working in a way in which you want.

When calling a require js require() then we can define the configrations for that js.
There are two ways to call this:
1) Call it from your data-entry point, i.e. from your main.js.
example:

<script data-main="scripts/main" src="scripts/require.js"></script>

require.config({
    '*': {
		'sample': 'sample1.js'
	}
});

But in this case there is a drawbacks, i.e. data-entry script and config() both will call asynchronously, so to avoid confliction we generally use the second option.

2) Use the configurations as an object before your require.js call.
example:

var config = {
   	'*': {
		'sample': 'sample1.js'
	}
};

<script data-main="scripts/main" src="scripts/require.js"></script>

It first creates the config object and then loads all the configurations automatically to Js.

Now I am discussing some useful configurations,

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 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/webkul1': {
		'sample': 'sample1.js'
	},
	'module/webkul2': {
		'sample': 'sample2.js'
	}
}

Here, when module/webkul1.js requires(‘sample’), then it returns sample1.js, and when module/webkul2.js requires(‘sample’), then it returns sample2.js.

globally: It can be used by any module.

map: {
	'*': {
		'sample': 'sample1.js'
	},
	'module/webkul2': {
		'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/webkul2.js require(‘sample’), then it returns ‘sample2.js’.

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 = {
	"map": {
        '*': {
			'sample': 'sample1.js'
		}
    },
    "deps": [
        "jquery"
    ]
};

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

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

Here, jquery(dependencies) should be loaded before the sample.js is loaded, and then you can use webkulSample as a global module.

var config = {
	"shim": {
		"sample": {
            "deps": ["jquery"],
            "exports": webkulSample,
            init: function (jquery) {
            	return this.webkulSample.noConflict;
            }
        }
	}
}

Here, Dependencies are jquery, should be loaded before the sample.js.
Here, we use webkulSample 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”.

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": "webkul/test"
};

require( ["sample/sample1", "https://code.jquery.com/jquery-3.1.1.min.js", "sample2.js"],
    function(samplemodule) {
    }
);

Here, samplemodule is reffered to webkul/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": "webkul/test",
	"paths": {
        "sample": "web/js"
    },
};

require( ["sample/sample1"],
    function(samplemodule) {
    }
);

Now, samplemodule is reffered to the file at path “webkul/test/web/js/sample1.js”.

waitSeconds: It is used when you want to wait for the script loads before giving.You can assign the number in it.
You can use 0 to disable it, and by default it is 7 seconds.
example:

var config = {
    "waitSeconds": 0,
    "map": {
        '*': {
			'sample': 'sample1.js'
		}
    }
};

config: Is used when you want to pass some configurations to all the modules.
These values are the common for all the modules.
example:

var config = {
    "map": {
        '*': {
			'sample': 'sample1.js'
		}
    }
    config: {
        "testData":{
            "color":'red'
        }
    }
};

Now in your js file you can access this value by using :

console.log(require.s.contexts._.config.testData.color);
It will gives you the “red” in output.

That’s all for the configurations of require JS.

You can check other blogs related to require js:

Requirejs and how to use it
include use custom js file require js magento2

I hope this blog will help you with JS Configurations.

Please reach out to our team via a support ticket if you have any queries.

Try this and if you have any queries then just comment below 🙂