Magento – Use require-config.js to load files needed on all pages

After much trail this is what boiled out. The location of the requirejs-config.js is correct as the docs indicate,

/app/design/frontend/<vendor>/<theme>/requirejs-config.js

But the why this didn't work was that if you redid the jQuery to a CDN then everything else would fail as the mappings were based on that (as I understand it at this time). This is what I ended up needing to do to get everything to load an show up.

var config = {
    "paths":{
        'jquery':'https://code.jquery.com/jquery-1.11.3.min',
        '_jquery':'jquery/',
        'jquery/ui':'https://code.jquery.com/ui/1.11.4/jquery-ui',
        'jquery/jquery-migrate':'https://code.jquery.com/jquery-migrate-1.2.1.min',
        'spine':'https://repo.wsu.edu/spine/1/spine.min.js?2015-16-12',
        'datatables':'//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.min'},
     map: {
        "*": {
            "jquery/jquery.mobile.custom": "/static/frontend/wsu/wsu_base/en_US/jquery/jquery.mobile.custom.js",
            'jquery/jquery.cookie':"/static/frontend/wsu/wsu_base/en_US/jquery/jquery.cookie.js",
            'jquery/jquery.validate':'/static/frontend/wsu/wsu_base/en_US/jquery.validate.js',
            'jquery/jquery.metadata':'/static/frontend/wsu/wsu_base/en_US/jquery/jquery.metadata.js',
            'jquery/jquery-ui-timepicker-addon':'/static/frontend/wsu/wsu_base/en_US/jquery/jquery-ui-timepicker-addon.js'
        }
    },
    "shim": {
        "spine" : ["jquery","jquery/ui"],
        "datatables" : ["jquery","jquery/ui"]
    },deps: [
        "spine",
        "datatables"
    ]
};

To load a custom main.js file on all pages (in the RequireJS-way) this is a good way:

1) Create main.js

Create main.js within the theme folder

<theme_dir>/web/js/main.js

with this content:

define([
  "jquery"
], 
function($) {
  "use strict";

  // Here your custom code...
  console.log('Hola');

});

In short: we declare dependencies at the start, e.g. "jquery". We define as function's parameter the variable name for using the dependency within the function, e.g. "jquery" --> $. We put all our custom code within function($) { ... }.

2) Declare main.js with a requirejs-config.js file

Create a requirejs-config.js file within the theme folder:

<theme_dir>/requirejs-config.js

with this content:

var config = {

  // When load 'requirejs' always load the following files also
  deps: [
    "js/main"
  ]

};

"js/main" is the path to our custom main.js. The ".js" extension is not required.

Our requirejs-config.js will be merged with other requirejs-config.js defined in Magento.

RequireJS will load our main.js file, on each page, resolving dependencies and loading files in an async way.

Optional: Including third-party library

This is the way to include third-party libraries.

1) Add the library in web/js:

<theme_dir>/web/js/vendor/jquery/slick.min.js

2) Open requirejs-config.js and add this content:

var config = {

  deps: [
    "js/main"
  ],

  // Paths defines associations from library name (used to include the library,
  // for example when using "define") and the library file path.
  paths: {
    'slick': 'js/vendor/jquery/slick.min',
  },

  // Shim: when you're loading your dependencies, requirejs loads them all
  // concurrently. You need to set up a shim to tell requirejs that the library
  // (e.g. a jQuery plugin) depends on another already being loaded (e.g. depends
  // on jQuery).
  // Exports: if the library is not AMD aware, you need to tell requirejs what 
  // to look for so it knows the script has loaded correctly. You can do this with an 
  // "exports" entry in your shim. The value must be a variable defined within
  // the library.
  shim: {
    'slick': {
      deps: ['jquery'],
      exports: 'jQuery.fn.slick',
    }
  }

};

It looks more complicated than what it actually is.

3) Add the dependency within main.js:

define([
  'jquery',
  'slick'
], 
function($) {

  // ...

});