Showing posts with label RequireJS. Show all posts
Showing posts with label RequireJS. Show all posts

Thursday, May 25, 2017

Alternate requirejs define & require: define(function(require) { … })

The usual define "syntax":
define(['module/first'], function (firstModule) {
   //Module code with a dependency on module/first goes here.
});
The alternate define "syntax":
<script data-main="app/config" src="assets/js/libs/require.js"></script>
file: config.js:
require.config({
   paths: {
      jquery:      '../assets/js/libs/jquery'
   }
});
require(['app']);
file: app.js:
define(function(require) {
     var FirstModule = require('modules/first');
     //Module code with a dependency on module/first goes here.

@reference_1_stackoverflow
Why use alternate requirejs define: define(function(require) { … }

@reference_2_stackoverflow
RequireJS: require a module return a function instead of a object

@reference_3_requirejs.org
Define a Module as a Function

Saturday, May 13, 2017

“shim” for AngularJS (& jQuery ) when using Require.js

The rule is pretty simple: if a library/script/package/plugin is AMD-aware, then you don't need a shim. (Actually, you must not use a shim for it.) If it is not AMD-aware, then you need a shim.
A library/etc is AMD-aware if it detects that an AMD loader is present and calls define to make itself known to the loader.
jQuery from about 1.8 onwards has not needed a shim because it calls define. Angular, on the other hand, does not call define.
To know whether a specific piece of code needs a shim, you can read its documentation or if the documentation is not clear on this, then you can check the source code for a call to define. For instance jQuery 1.11.0 has this code:
// 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.
if ( typeof define === "function" && define.amd ) {
    define( "jquery", [], function() {
        return jQuery;
    });
}
How it looks like will vary from one case to the other but the basic think you want to look for is the check that define exists, is a function, has the amd property set and the call to define.
(Note that jQuery is a special case where they decided to hard code the name of the module in the define call (first parameter: jquery). Generally the name of the module won't be present in the define call but will be left for RequireJS to infer on the basis of the file name.)

@reference_1_stackoverflow
@reference_2_requirejs.org