{"id":68320,"date":"2016-12-17T07:56:37","date_gmt":"2016-12-17T07:56:37","guid":{"rendered":"http:\/\/webkul.com\/blog\/?p=68320"},"modified":"2026-03-27T10:24:19","modified_gmt":"2026-03-27T10:24:19","slug":"what-is-requirejs-and-how-to-use-it","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/what-is-requirejs-and-how-to-use-it\/","title":{"rendered":"What is Require Js and How does it work?"},"content":{"rendered":"\n

RequireJS is a basic JavaScript file loader used to load scripts efficiently. It also acts as a framework to manage dependencies between JavaScript files.<\/p>\n\n\n\n

In modular programming, functionality is divided into different modules. RequireJS helps assemble these modules, improving code speed, structure, and overall quality.<\/p>\n\n\n\n

In this blog, we\u2019ll explore \u201cWhat is RequireJS and How to Use It?\u201d<\/strong> and understand how this JavaScript file and module loader helps manage dependencies efficiently.<\/p>\n\n\n\n

Why Require JS<\/strong><\/p>\n\n\n\n

There are some reasons:<\/p>\n\n\n\n

 \u2022<\/strong> In a large application a lot of JavaScript files are needed, and each script tag needs a request.
 \u2022 You have to put them in a same order in which they are called, i.e. File which is dependent on other should be loaded after the dependent ones.<\/p>\n\n\n\n

How to use<\/strong><\/p>\n\n\n\n

You can Downalod<\/a> the file.<\/p>\n\n\n\n

Take an example path of your JavaScript files:<\/p>\n\n\n\n

|-scripts\n\t|--main.js\n\t|--require.js\n\t|--example.js<\/pre>\n\n\n\n
Now you just need to add a <script> tag in your html file to include Require.js file.<\/p>\n\n\n\n
<script data-main="scripts\/main" src="scripts\/require.js"><\/script><\/pre>\n\n\n\n
You can place this script tag at the head or at the bottom of the phtml file.<\/p>\n\n\n\n
Here main.js is the main JavaScript file of my application.<\/p>\n\n\n\n
In above <script> tag by the data-main<\/strong> attribute require.js will start initialization of files.(path of the folder\/file name).
data-main is uses when you have only single entry point, if you have multiple entry points then you can include it by html also.<\/p>\n\n\n\n
Now in main.js we have following code:<\/p>\n\n\n\n
requirejs([\n   "example"\n], function(example) {\n   \/\/you code stuff is here\n   \/\/example.callFunction();\n});<\/pre>\n\n\n\n
In RequireJS all the code is written under requirejs() or define() functions.<\/p>\n\n\n\n
Here, It searched “example.js<\/strong>” in the same folder and take example<\/strong> as an object of the example.js file to call the functions of the example.js.<\/p>\n\n\n\n
You can also include files from different folder’s.<\/p>\n\n\n\n
Advantages of RequireJs<\/strong><\/p>\n\n\n\n