Can't get $ to work using RequireJS and MooTools

2
votes

I'm attempting to build a site using a combination of RequireJS and MooTools. It's my first time using both libraries. There is plenty of documentation for using RequireJS with jQuery but less for using it with MooTools. I've found only this really. But I'm having some trouble and much of it probably is a result of ignorance; still, perhaps you all can help.

At the moment, I'm just trying to test out basic functionality and understand how I would go about setting this up. Here is what I have tried:

In my site footer, I have this script tag:

    <script src="assets/js/vendor/require.js" data-main="../app.js"></script>

This loads requirejs with the file app.js. Inside app.js I mainly deal with paths:

requirejs.config({
    "baseUrl": "assets/js",
    "paths": {
      "mootools": "//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed"
    }
});

// Load the main app module to start the app
requirejs(["main"]);

Finally, in main.js, I have (so far) the following:

define(["mootools"], function($) {

    var a = $$('.menu'); // .menu is a nav menu in the DOM
    console.log(a);

    var b = $('.menu');
    console.log(b);

});

So here, a works, but b causes an error: undefined is not a function. So there are a couple of questions embedded here. First, can someone tell me what the difference in meaning for $ and $$ with mootools? I gather from this tutorial, that both are used in mootools. Also, why is it that mootools is not mapped to $? As I understand it, with jQuery, this is how you would do this, see here for example.

I'm sure there are some basic confusions here, but please have mercy. I'm a newbie to these tools.

1
javascriptrequirejsmootools

1 Answers

3
votes

MooTools (as is) is not AMD-compliant. David Walsh is cool but he does not like or use RequireJS. The info in his post is well out of date and not practical any more. In fact, I believe none of the MooTools-core team likes AMD or uses it. Anyway, that's beside the point. jQuery now IS based around AMD so using it is easy. MooTools tried it 2 years ago - https://github.com/arian/mootools-core/tree/1.5amd - and gave up. 1.5 is still not out (hopefully next week, still no AMD).

Anyway

You cannot do this quite in that fashion by expecting the script to magically return $ where a module has not been defined.

There is another issue here which is with the fact that you are loading a remote script and that you leave the protocol to be determined automatically - which are sort of quirky things for RequireJS to handle in their own accord.

Two or three ways to handle it.

you can just define a local module, eg your own mootools.js

define([
    'http://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js'
], function(){
    return window.$;
});

then use by requiring it:

require(['mootools'], function($){
    $(document.body).adopt(new Element('div[html=hi]'));
});

eg. http://jsfiddle.net/dimitar/5zYnW/

however, mootools will export all sorts of globals anyway, so it's not really useful. you are better off using the requirejs shim config.

shim example

require.config({
    paths: {
        mootools: 'https://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed'        
    },
    shim: {
        mootools: {
            exports: '$'
        }
    }
});

// some code.
require(['mootools'], function(){
    document.id('foo').adopt(new Element('div[html=hi]'));
});

eg: http://jsfiddle.net/dimitar/5zYnW/1/

old school

I find that it's easier to load MooTools before RequireJS and assume it's all global in all modules that I write - it makes more sense as there are too many global exports to catch. eg. Class, Element, Request etc etc.

eg. https://github.com/epitome-mvc/Epitome/blob/master/example/js/model-demo-require.js -s from my MooTools MVC framework Epitome.

Here's example module code via a UMD wrap - https://github.com/epitome-mvc/Epitome/blob/master/src/epitome-model.js - the only code that implicitly requires MooTools is the node.js code.