How can I integrate requirejs in a meteor app and use AMD–modules, e.g for my Backbone modules? Has anybody done that and can tell me what steps are needed to get this working?

How can I integrate requirejs in a meteor app and use AMD–modules, e.g for my Backbone modules? Has anybody done that and can tell me what steps are needed to get this working?

• javascript
• requirejs
• meteor
• amd

2 Answers 2

One simple answer (though maybe not the one you're looking for) is that you can simply use the two independently. In other words, load all of your meteor scripts, then start your require-ified scripts loading. Your require-ified scripts will be able to use the Meteor stuff just fine, without having to "import" any of it in via Require's loader.

If you want to have to import it, you should instead create a Require "shim" for it.

Here is how I loaded Aloha Editor in Meteor and IronRouter. Aloha uses requirejs to load all its dependencies.

1. Unzip the Aloha distribution in public/alohaeditor.
2. Move all Aloha css files, except aloha-mon-extra.css, to client/lib/alohaeditor (don't forget files from the plugins folder).
3. In all Aloha css files, turn relative paths into absolute paths (replace all '../' by '/alohaeditor/').
4. Install the wait-on-lib Meteor package.

5. Add the following hook to your route:

   onBeforeAction: function(pause)
       {           
       // Dynamically load require.js
       var one = IRLibLoader.load('/alohaeditor/lib/require.js', 
           {
           success: function(){ console.log('Successfully loaded require.js'); },
           error: function(){ console.log('Error loading require.js'); }
           });
       if(!one.ready())
           return pause();
   
       // Aloha settings
       Aloha = window.Aloha || {};
       Aloha.settings = Aloha.settings || {};
       Aloha.settings.baseUrl = '/alohaeditor/lib/';
       Aloha.settings.plugins = Aloha.settings.plugins || {};
       Aloha.settings.plugins.load = 'mon/ui, mon/format, mon/link, mon/table, mon/list, mon/block, mon/undo, mon/contenthandler, mon/paste, mon/mands, mon/abbr';
   
       // Dynamically load aloha.js
       var two = IRLibLoader.load('/alohaeditor/lib/aloha.js',
           {
           success: function(){ console.log('Successfully loaded aloha.js'); },
           error: function(){ console.log('Error loading aloha.js'); }
           });
       if(!two.ready())
           return pause();
       },