Bending the Rules of RequireJS to Deal with a Legacy CDN

RequireJS is an awesome library that lets you as a developer write very explicitly modular javascript code that every other language had right out of the box. Unfortunately, because there is such a thing as history, there are a lot of code bases that have a large number of globals. In some cases, a third party in-house CDN may deliver such things, including a customized version of JQuery that other modules then depend on.

Requirements

In order to assure that isn’t used when not necessary, make sure that your issue meets the following requirements, and all of them at that:

1. You don’t get to touch this file.
   • I mean, you don’t even get to download this file. If the file lives in your codebase, break it up and shim it in like any other non-compatible library.
2. You have other files that depend on it that are also being shimmed in.
   • This is necessary. If you don’t have this problem, once again, you can use a more traditional shim approach to dealing with the problem. Create stub files that depend on this if you need to grab more than one global / you can’t use the :init method to package them all up into one variable. This technique is necessary because a shimmed in file wil lbe loaded BEFORE a CDN file, meaning that whatever was delivered by the CDN will not be in the global space at the time of the other shimmed file.

Shimming in a Lie

Sometimes things just seem to not fit. For this solution, I suggest that you explicity include this library in your html, and then create stub files that grab the particular globals that you care about.

Because a shim has access to all global variables, the ones that you just inherited are also available. In order to trick RequireJS into loading these, you will need to specify several fake stub files. One per global that you want to bring in this way. I want to emphasize this is a last resort, and should only be used when you have no control over the file that is delivering these globals to you.

In order to deal with a CDN delivered dependency to another library that needs to be shimmed, this file just needs to live outside of RequireJS. Explicity load this script in your html. Shed a tear. Move on.

Now that you have the file loaded, create empty stub files (one per global) and use them as shim dependencies. Note: if you try to use the same file for all globals, even if you specify different “virtual paths”, you will run into RequireJS load errors.

Your config should somewhat resemble what is below:

requirejs.config({
    paths: {
        'jquery' : 'path/to/stub1',
        'weirdlibrary' : 'path/to/stub2'
    },
    shim: {
        'jquery': { exports: 'jQuery' },
        'weirdlibrary': {exports: 'LibraryGlobal'},
        'dependentLibrary': {deps : ['jquery'], exports: 'LibraryThing' }
    }
});

Conclusion

Congratulations, you can now completely avoid dealing with whatever team is responsible for that code. This method is a hack of a solution, but it does allow you to more quickly adopt this awesome new dependency framework.