- You need to place the files in the same order in which they will be called, i.e. the framework will load the dependent files first and later the other.
- The JS file is included in the body, which accelerates the load time of the page.
- The RequireJS framework avoids uneasy conflicts created due to development.
Step 1: Add your jQuery or JS.
Add your JS file inside of the theme directory like: <theme_dir>/web/js/Your_custome.js
Step 2: Create Require Configure JS file.
Create the “requirejs-config.js” in your root directory of theme like: <theme_dir>/requirejs-config.js
Add the following code in “requirejs-config.js” file.
Here the function “map” is to map your file with the alias name of your custom JS file provided.
In the above example, “Any_name_for_JS” is basically the alias of the custom JS file “Your_custome.js”. While, the functionality of the “shim” is to add a dependency of other JS library files.
Here, “Your_custome.js” file relies on the main jQuery library, hence you need to add the following line for the shim function.
If you have various other dependencies of jQuery files or libraries, you can add them by “comma” in the code.
Step 3: Add the JS in PHTML File