To this point, we have been using things like redirectUrl and cookieNotices out of thin air, but how exactly do these components become available to our code? The answer is, via RequireJS, a library that underlies nearly every other JS feature built into Magento. The overall role of RequireJS is simple; it is a JS module system that implements the Asynchronous Module Definition (AMD) standard, which serves as an improvement over the web's current globals and script tags.

We have already seen the format of these AMD modules in the preceding examples, which comes down the following:

define(['dep1', 'dep2'], function (dep1, dep2) {
  return function () {
    // Module value to return
  };
});

The gist of  AMD modules functionality comes down to each module being able to:

• Register the factory function via define
• Inject dependencies, instead of using globals
• Execute the factory function when all dependencies become accessible
• Pass dependent modules as arguments to the factory function

This strategy solves many of the conventional dependency issues, where dependencies are assumed to be immediately available when the function executes, which is not always the case.

If we were to do a View Page Source on our Playground page in a browser, we would see three <script type="text/javascript" src="..."> tags with their src attributes pointing to the following JS files:

frontend/Magento/luma/en_US/requirejs/require.js
frontend/Magento/luma/en_US/mage/requirejs/mixins.js
frontend/Magento/luma/en_US/requirejs-config.js

A quick look at the partial requirejs-config.js file reveals how these get loaded:

(function (require) {
  /* ... */
  (function () {
    var config = {
      map: {
        '*': {
          'redirectUrl': 'mage/redirect-url',
        }
      }
    };
    require.config(config);
  })();
  /* ... */
  (function () {
    var config = {
      map: {
        '*': {
          cookieNotices: 'Magento_Cookie/js/notices'
        }
      }
    };
    require.config(config);
  })();
  /* ... */
})(require);

These two mappings break down as follows: 

• The left-hand side points to the freely given name of our JS component, which essentially tells consumers how to reference it. This is why we were able to use these two components simply by referencing them via redirectUrl and cookieNotices.
• The right-hand side points to the location of our JS component:
  • mage/redirect-url, where mage points to the <PROJECT_DIR>/lib/web/mage directory, and redirect-url further points to the redirect-url.js file within that directory
  • Magento_Cookie/js/notices, where Magento_Cookie points to the <MAGENTO_DIR>/module-cookie/view/frontend/web directory, and js/notices further points to the js/notices.js file within that directory

Further observing the requirejs-config.js file, aside from map, there are a few other important keys whose roles are worth knowing:

var config = {
    map: {
        '*': {
            /* ... */
        }
    },
    paths: {
        /* ... */
    },
    shim: {
        /* ... */
    },
    deps: [
        /* ... */
    ],
    config: {
        mixins: {
            /* ... */
        }
    }
};

These break down as follows:

• map: For the given module prefix; instead of loading the module with the given ID, substitute a different module ID
• paths: Path mappings for module names not found directly under baseUrl
• shim: Configure the dependencies, exports, and custom initialization for older browser globals scripts that do not use define for declaring the dependencies and setting the module value
• deps: An array of dependencies to load
• config/mixins: List of JS class mappings, for classes whose methods are added to, or mixed in, with other JS classes

The takeaway here is that our own modules can define the requirejs-config.js file on their own, under the <MODULE_DIR>/view/frontend directory, allowing us to hook into the final Magento requirejs-config.js file that gets generated for the browser. This, in turn, allows us to easily register our own components, override existing mappings, paths, and other things.