How do you use a requirejs friendy JavaScript file without using requirejs? I.o.w. how to demodularize?

Question

Suppose I have a JS-library, neatly wrapped in a define('myModule', function(myModule) { return myModule.someObject; });

How could I bind the myModule.someObject to global scope (please don't ask why, I know modular programming has a lot of benefits over putting stuff on the global scope), without using requirejs or any other module handling framework?

The thing is: while developing, I'd like to use requirejs. The library that we build should be able to be included by somebody using requirejs (AMD, CommonJS, whatever), but should also be available as window.SomeObject for the people that don't want to use require just for the sake of being able to use our SomeObject. After the development phase, all code will be minified and obfuscated to a single JS file.

I think I'm just googling with the wrong search terms, because all I can find is an answer to the question how to include code that isn't wrapped in a requirejs friendly define function.

Any ideas on this would greatly be appreciated. Thanks!

--- EDIT ---

My file (before it all started) looked like:

(function(define, global) {
  define([a,b,c],function(theA, theB, theC) {
    return theA + theB + theC; // or something, it doesn't matter
  });
})(define, this);

I'm thinking of something like this:

(function(define, global) {
  // same as above
})(typeof define === 'function' 
      ? define 
      : function(factory /* need more args? */) { /* solution here */ }, this);

But I'm not sure how to implement it properly...

For examples see [UMDjs](https://github.com/umdjs/umd) and also this question: http://stackoverflow.com/questions/17936854/when-designing-a-js-library-should-i-make-it-requirejs-amd-compatible-or-not/17954882#17954882 — explunit, Aug 13 '13 at 15:01

score 2 · Answer 1 · answered Aug 13 '13 at 14:59

2

I guess you need to wrap your modules so that they could be accessed without requirejs:

if ( typeof define === "function" && define.amd ) {
    define( "mymodule", [], function () { 
      // do your logic
      return mystuff; 
    } );
} else {
   // do your logic
   window.mystuff = mystuff;
}

Look at jQuery as an example.

answered Aug 13 '13 at 14:59

asgoth

35,552
12
89
98

2

Copying jQuery is not the standard here. Using an anonymous module is always preferable. Added an answer to detail. – Simon Smith Aug 13 '13 at 16:21

Simon Smith · Answer 2 · 2013-08-13T16:26:26.940

I would refrain from giving your module an id if you can help it, it makes it less portable. jQuery is incredibly annoying that it forces you to set a jquery path option, but they did it for compatibility reasons. Always prefer anonymous modules if you can.

From the jQuery source

// Register as a named AMD module, since jQuery can be concatenated with other
// files that may use define, but not via a proper concatenation script that
// understands anonymous AMD modules. A named AMD is safest and most robust
// way to register. Lowercase jquery is used because AMD module names are
// derived from file names, and jQuery is normally delivered in a lowercase
// file name. Do this after creating the global so that if an AMD module wants
// to call noConflict to hide this version of jQuery, it will work.

James Burke goes into a little more detail here also.

I would instead use a more common example from the umdjs repository:

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['b'], factory);
    } else {
        // Browser globals
        root.amdWeb = factory(root.b);
    }
}(this, function (b) {
    //use b in some fashion.

    // Just return a value to define the module export.
    // This example returns an object, but the module
    // can return a function as the exported value.
    return {};
}));

For another example that also supports CommonJS, check out the reqwest library:

!function (name, context, definition) {
  if (typeof module != 'undefined' && module.exports) module.exports = definition()
  else if (typeof define == 'function' && define.amd) define(definition)
  else context[name] = definition()
}('reqwest', this, function () {

    return {};

});

Thanks Simon! Have a lot of reading and testing to do, I suppose. :-) — Simon, Aug 14 '13 at 07:53
I would stick to the example from _umdjs_ since it's from the author of _RequireJS_ (and the same as the wrap used with _almond_). — c24w, Aug 14 '13 at 10:57

score 1 · Accepted Answer · answered Aug 13 '13 at 16:11

How can I provide a library to others that does not depend on RequireJS?

This allows you to ship code that does not ship with all of RequireJS, and allows you to export any kind of API that works on a plain web page without an AMD loader.

You need to make a build config file which uses wrap and almond.

It all feels pretty dirty, but I've had it working (by following the almond ReadMe) with exactly what you're describing.

How do you use a requirejs friendy JavaScript file without using requirejs? I.o.w. how to demodularize?

3 Answers3