AMD/RequireJS - Loading Incompatible JavaScript Files

May 04, 2012

What do you do when you need to load javascript files with requirejs when these are not compatible with the requirements?

Tim Branyen has put up a nice plugin while explaining an alternative as well.

UPDATE: requirejs version 2 released - it includes a built in solution for the “order” plugin functionality as well as other new and useful features.

I’m working on a project based on backbone and underscore. On the beginning, we had to find a properly compatible ports of these libraries in order to make them work with requirejs.

Soon, when both libraries released new versions, we have found out that its ports are not updated and we had to figure out the changes made to the source code in order to make the new versions compatible again with requirejs.

Obviously, this solution isn’t maintainable & good enough.

Solution 1: The “use” Plugin

Tim Branyen has put up the “use!” plugin for requirejs. This plugin, with the proper configuration, loads incompatible javascript files:

AMD/RequireJS Shim Plugin for Loading Incompatible JavaScript | Tim Branyen @tbranyen

Solution 2: Without a Plugin

There is a method for loading incompatible javascript files without any dedicated plugin (aside for the offical “order” plugin - for special cases).

First, I configured requirejs with aliases to my backbone & underscore libraries to specific loaders (main.js):

require.config({
  paths: {
  	order: "libs/require/order",
	jquery: 'libs/jquery/jquery-min',
	underscore: 'libs/underscore/underscore-loader',
	backbone: 'libs/backbone/backbone-loader',
  }
});

I created a customized “underscore-loader.js” javascript file. This file loads the original underscore library - this gives me the option to replace underscore versions (development/production/other builds) without affecting the general application configuration (underscore-loader.js):

define(["libs/underscore/underscore-orig"], function() {
  return window._;
});

To load backbone, I had to use the “order” plugin - which tells require js to load the depended files by the order of the array, and then invoking the callback. In backbone’s case, I have to specify underscore once again to make sure the underscore-orig will be loaded if it hasn’t (_backbone-loader.j_s).

define(["order!jquery", "order!libs/underscore/underscore-orig", "order!libs/backbone/backbone-orig"], function() {
  return window.Backbone;
});

How to use it?

As simple as it goes:

define([
	'jquery',
	'underscore',
	'backbone',
], function ( $, _, Backbone ) {
	var Grid = Backbone.View.extend({

		template: _.template($("#grid-template")),

		initialize:function () {
			this.model.on("change", this.render, this);
		}
	});
})

My Consulting Packages

My consulting offerings include: Front End Development, Code reviews (React, Redux, Typescript, Javascript, Angular, NgRx), workshops, Consulting and Development. Feel free to reach out thru the below forms or through thecontact page.

javascript
react
angular
© 2022, Built with Gatsby, follow me at: