Require.js is a Javascript library that allows you to load multiple JavaScript files and JavaScript modules. The website for the library is at https://requirejs.org.
Our Running Example
Note first that this tutorial shows only one use for require.js. It is very versatile and can be used in many other use cases. So if your situation is not identical to this one, please consult the require.js documentation.
In this tutorial we assume that we have the following JavaScript files on our server.
/javascript/spotify-web-api.js /javascript/require.js /.../demos/spotify_demo.html /.../demos/javascript/spotify_demo.js
We also assume that our web app (spotify_demo.html) runs spotify_demo.js and that spotify_demo.js needs to load both spotify-web-api.js and the d3 JavaScript module found at https://d3js.org/d3.v5.min.js.
Installing require.js
You can install require.js on your site by downloading the require.js file at https://requirejs.org/docs/release/2.3.6/minified/require.js and then uploading it to your server.
Since you’re likely to use require.js in multiple pages on your website, it is advantageous to upload the file to a location on your server that is easily accessible by all of your web pages. I recommend creating a subdirectory of your website’s root directory, as our example illustrates, and placing it there.
Loading require.js
Since spotify-demo.js will call some of the functions in require.js to load the other JavaScript files, we need to load require.js before spotify-demo.js.
You can load both require.js and your webpage’s JavaScript file in a single <script> tag (as shown below). When you do this, your webpage’s JavaScript file (e.g. spotify-demo.js) will be loaded after require.js loads.
<script src="/javascript/require.js" data-main="javascript/spotify-demo"></script>
In the above example, the src attribute uses an absolute path. As stated above, we assume the require.js file in /javascript (a subdirectory of the site’s root directory) so that all of the web apps in the domain can use the require.js file. Notice we need to specify the .js file extension, as we do with every <script> tag, when specifying the require.js file name.
In the example above, the data-main attribute uses a relative path. The data-main attribute specifies the JavaScript file that will be loaded and executed after require.js is loaded. The require.js library will search for spotify-demo.js relative to the directory holding the html file that included the <script> tag. Note also that the .js file extension is not specified when using a relative path.
Using require.js
In our app’s JavaScript file (e.g. spotify-demo.js) we can load a JavaScript file (e.g. spotify-web-api.js) and a JavaScript module (@ https://d3js.org/d3.v5.min.js) by using the requirejs() function.
By default, requirejs() searches for the files to load in the same directory specified in the data-main attribute of the <script> tag. Since the script file specified in data-main (spotify-demo.js) is located in /…/demos/javascript/ and the script we want to load (spotify-web-api.js) is in /javascript, we need to tell requirejs() where to find spotify-web-api.js.
To do so, we need to call requirejs.config() before requirejs() to specify a base URL that requirejs() will use to find the JavaScript file.
requirejs.config({
baseUrl: '/javascript'
});
requirejs(["spotify-web-api","https://d3js.org/d3.v5.min.js"], main);
function main(spotty, d3) {
// files and modules have been loaded and are ready for use
// spotty is undefined but d3 is not.
}
In the above example, we call requirejs.config() to specify the base URL that requirejs() will use to search for the internal JavaScript libraries and then call requirejs().
The first argument to requirejs() is an array of comma separated strings that list the names of the JavaScript files and modules to load. In the example above, we list an internal JavaScript file (spotify-web-api) and an external JavaScript module (https://d3js.org/d3.v5.min.js). Note that the name of the internal file (spotify-web-api) does not include the .js file extension and the external URL does.
The second argument is the name of a function that will be executed after the files and modules are loaded. When the main function is executed, references to the modules are passed to main. Since the first file loaded as an Immediately-Invoked Function Expression (IIFE) nothing is passed to main, but we need a placeholder variable none-the-less. Since the external JavaScript file is implemented as a module, a reference to the d3 object is stored in the parameter named d3 and ready to use inside main.