加载后让用户使用已编译的RequireJS小部件

Question

I'm writing a JS Widget using RequireJS. After finishing the widget I'm compiling it with r.js and Almond. All goes well - but I couldn't find an easy way to let the user use the widget without using RequireJS himself - as the widget code loads async (RequireJS uses AMD).

What I'm doing now is busy waiting for the widget code to load and using it only after detecting it has loaded. This is not very user-friendly.

Is there a way to let just do something like this?

var widget = new Widget();

instead of doing busy wait like:

count = 0;

function loadWidget() {
    if (typeof Widget != 'undefined') {
        var p1 = new Widget();
        p1.render();
    } else {
        if (count > 10) {
            console.log('Failed to load the Widget');
            return false;
        }
        setTimeout(loadWidget, 50);
        count++;
    }
}

$(document).ready(function() {
    loadWidget();
});

Thanks!

EDIT:

my build.js

({
    name: './lib/almond.js',
    out: './deploy/sdk.min.js',
    baseUrl: '.',
    optimize: 'uglify2',
    mainConfigFile: 'sdk.js',
    include: ['sdk'],
    wrap: true
})

Code on the web page (assume no other script tags on page):

<script src="mywidget.js" data-main="scripts/sdk" id="mywidget"></script>

No sure if the 'data-main' is really required as the js is compiled.

Answer 1

You need to follow the instructions provided with Almond . To summarize the essential points what is in the doc there, what you need in your build config the following configuration:

wrap: {
    startFile: 'path/to/start.frag',
    endFile: 'path/to/end.frag'
}

And the start.frag should be:

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        define([], factory);
    } else {
        root.Widget = factory();
    }
}(this, function () {

and the end.frag :

    return require('main');
}));

The end fragment calls require in its synchronous form, which is really synchronous in this case (and not the pseudo-synchronous sugar that can be used by RequrieJS itself).

I've tried this before. It works.