cujojs / curl

curl.js is small, fast, extensible module loader that handles AMD, CommonJS Modules/1.1, CSS, HTML/text, and legacy scripts.
https://github.com/cujojs/curl/wiki
Other
1.89k stars 216 forks source link

non-AMD script does not see AMD-loaded script #195

Closed szepeviktor closed 11 years ago

szepeviktor commented 11 years ago

Good afternnon!

I would use curl to load scripts. But jscrollpane it not an AMD module. https://github.com/vitch/jScrollPane/blob/master/script/jquery.jscrollpane.js I asked the developer here https://github.com/brandonaaron/jquery-mousewheel/issues/60 I think this is responsible:

(function (factory) {
    if ( typeof define === 'function' && define.amd ) {
        // AMD. Register as an anonymous module.
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        // Node/CommonJS style for Browserify
        module.exports = factory;
    } else {
        // Browser globals
        factory(jQuery);
    }
}(function ($) {

so jscrollpane - the non-AMD script - does not see mousewheel when loaded by curl

Please help me, I do not understand define.

unscriptable commented 11 years ago

Hello @szepeviktor,

It seems that jscrollpane relies on a global jQuery function when it loads. Unless you pre-concatenate your files, there is only one way to handle legacy, non-modular javascript files like this. @brandonaaron's example is pretty close to what I would have written:

curl.config({
    baseUrl: 'http://www.emanuelparents.tk/wp-content/themes/koktelauto',
    paths: {
        jquery: '/wp-includes/js/jquery/jquery.js',
        jqform: '/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js',
        wpcf7:  '/wp-content/plugins/contact-form-7/includes/js/scripts.js',
        jqcolorbox: 'js/jquery.colorbox-min.js',  // v1.4.15
        jscrollpane: 'js/jquery.mousewheel.mod-jscrollpane.min.js',  // jsp, mw.mod
        mw2: 'js/jquery.mousewheel',
        jsp2: 'js/jquery.jscrollpane',
        koktelauto: 'js/koktelauto'  // FIXME .min.js'
    }
});
// all modules can be loaded first, then non-modules
// domReady! can be loaded at any time
curl(['jquery', 'mw2', 'koktelauto']).next(['js!jsp2', 'domReady!'])

If there are dependencies between your non-modular js files, it gets trickier. We don't currently have a way to handle this in curl.js. You would have to pre-concatenate your on-modular scripts in the correct order and load them as one file.

Ok. This is definitely a problem. I noticed your "koktelauto.js" file calls define at the end as a quick way to declare it as a module to the AMD loader. I didn't look at the whole file, but koktelauto relies on at least two other modules/files: curl and jQuery. You need to wrap the koktelauto file in a define since it has dependencies (maybe this isn't clear in the documentation!).

// list all dependencies (you should include others that I missed)
define(['curl', 'jquery'], function (curl, jQuery) {
    // the rest of the file's code goes here
});

-- John

szepeviktor commented 11 years ago

first class support Thank you!