Using the RequireJS Library
RequireJS: A JavaScript Module Loader
Introduction
I was inspired to make this tutorial after having to use RequireJS for a project I was working on. In this tutorial, I will show you what RequireJS is and why you might be using it in your programs.
You might be wondering what are some of the reasons we would use RequireJS? One of those reasons, for example, is within your HTML file, you have a lot of script tags with JavaScript files. You may find that when you are moving around script tags or editing code within a script tag that a separate script tag may be accessing information from, that you could end up with an uncaught reference or undefined errors if something is moved or not being returned properly. RequireJS will let you use one script tag to hold all of your dependencies rather than having to put all of them into separate script tags in the body of your HTML file. RequireJS will also let you compress your JS and CSS before sending it to the client for optimization purposes.
The Set-Up
First, you need to download RequireJS from their website. You can also use npm as well. Make sure to add it to your project file and then inside of your HTML file, add a script tag in the body.
<script src="require-2.3.6.js"></script>
RequireJS needs an attribute called data-main . This will accept a file and will load the config file of your RequireJS file.
<script data-main="" src="require-2.3.6.js"></script>
I created a folder called main and inside of that, I will put all my script files that I will want the project to have.
<script data-main="starter" src="require-2.3.6.js"></script>
I have now added my starter.js into the path of the data-main . The starter.js file will act as my configuration file for setting up how the project can access the multiple js files that I would put in script tags.
Now we are going to create another script tag and inside of it we will write:
require([‘starter’], function (){})
This will load the starter.js file we have and then the function will run. RequireJS runs asynchronously so it will call the src first and then the data-main path.
I will talk about what will be in our JavaScript file that we have put inside of this require call.
Starter File
In our starter file, we will write this code:
We provide the baseURL once and then all of your JavaScript will use that URL and then any other paths you have made. Since I created the folder main , that will be the baseURL. This is basically saying use the path of main to start looking and then check the paths that are inside of it. The paths will be the other script files I want to add. Inside of the main folder, I have the jquery library inside of it. Since I want to use JQuery inside of my js file, but in order to use it, I need to be able to access the library first. This is why we will link it to our path.
You can also use CDNs which is very helpful! For the jQuery cdn you would just wrap the min.js and the cdn link in an array.
['jquery.min.js', 'cdn_file']
This way if the user has some setting that blocks one script, you have the ability for your program to load it through another source.
Index.js
Now I will create a basic index.js file and this will be where our program logic would be after we have configured everything. I will show you how to connect it back to RequireJS.
Inside of the index.js we will have to write the define method at the top.
Inside of the define function, you will put all the dependencies the file will need access to. In this example, this file will only use jQuery, but if there were more, you would put it inside of the array in the define function. The second parameter in the define function returns what is being called in the dependency. In plain English, it is returning the ability to use jQuery.
Now you can write the code that you want. I just queried for an id called foo that is in my HTML and added some more text to it to display on the browser.
On line 14, we add the require again and inside of it, I am calling the index.js file. This will now tell it to use the scripts on this file.
I have also added an h1 tag on line 9 with some content in it to test this out.
As you can see it works and we can see that the other script files are being run as well!!! And everything is clean and neat with your script files and everything knows to run based off of what we set in the starter/config file.
Conclusion
I hope this was helpful! Hopefully, it will make dealing with multiple scripts easier and your code more efficient. Check out the RequireJS site for more information.
