module system life

AMD

AMD

1.   // point.js
2.   define("point", function() {
3.           function Point(x, y) {
4.                   this.x = x;
5.                   this.y = y;
6.           }
7.           return Point;
8.   });
9.  
10.  // myapp.js
11.  define("myapp", ["point"], function(Point) {
12.          var origin = new Point(0, 0);
13.          console.log(origin);
14.  });
                                                

• RequireJS
• curl.js

CommonJS

Common JS (node)

1.   // point.js
2.   function Point(x, y) {
3.           this.x = x;
4.           this.y = y;
5.   }
6.   module.exports = Point;
7.   
8.   // myapp.js
9.   var Point = require("./point");
10.  var origin = new Point(0, 0);
11.  console.log(origin);
     
                                                

• Node
• browserify

UMD

UMD

// point.js
(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(function () {
            return (root.returnExportsGlobal = factory());
        });
    } else if (typeof exports === 'object') {
        module.exports = factory();
    } else {
        root.returnExportsGlobal = factory();
    }
}(this, function () {
    function Point(x, y) {
            this.x = x;
            this.y = y;
    }
    return Point;
}));
                                                  

• umdjs
• Clunky as hell, but works!

Native JavaScript Modules - ES6

ES6 Modules

1.   // point.js
2.   function Point(x, y) {
3.           this.x = x;
4.           this.y = y;
5.   }
6.   export default Point;
7.   
8.   // myapp.js
9.   import Point from "point";
10.  var origin = new Point(0, 0);
11.  console.log(origin);
                                                  

• es6-module-transpiler

Using RequireJS?

• shim config for global scripts
• r.js optimizer for node modules

RequireJS paths/shim

  requirejs.config({
      paths: {
          "jquery": "bower_components/jquery/jquery-2.1.0.min.js"
          "ember": "bower_components/ember/ember.js"
      },
      shim: {
          "ember": {
              deps: ["jquery"],
              exports: "Ember"
          }
      }
  });
                                                

define("myapp", ["ember", "jquery"], function(Ember, jQuery) {
  //use Ember and jQuery
});
                                                

npm modules in RequireJS

    > npm install euclidean-distance;
    > node r.js -o name=myapp out=myapp.build.js;
                                            

    //myapp.js
    define("myapp", ["point", "euclidean-distance"], function(Point, d) {
            var origin = new Point(0, 0);
            var otherPoint = new Point(1, 1);
            var distance = d(origin, otherPoint);
            console.log(distance);  //1
    });
                                            

Using browserify?

helpful transforms

• deamdify
• browserify-shim

What are transforms?

• similar to RequireJS !plugins
• Can change source code when require-ing

deamdify

     > browserify -t deamdify -e entry.js > main.js
                                            

     //entry.js
     var moduleWrittenInAmd = require("./vendor/amdModule.js");
     useModule(moduleWrittenInAmd);

                                            

browserify-shim

     > browserify -t browserifyshim -e entry.js > main.js
                                            

// package.json
{
  "browser": {
    "jquery": "bower_components/jquery/jquery-2.1.0.min.js"
    "ember": "bower_components/ember/ember.js"
  },
  "browserify-shim": {
    "jquery": { 
       "exports": "$"
     },
    "ember": { 
       "exports": "Ember"
       "depends": ["jquery"]
     }
  }
}
                                            

//entry.js

var Ember = require('ember');
var $ = require('jquery');