js AMD requirejs systemjs etc

jsmoduledefinitions.md

AMD

Asynchronous Module Definition

http://requirejs.org/docs/whyamd.html

AMD is the module API supported by RequireJS

Why web modules? http://requirejs.org/docs/why.html

CommonJS

The first go at modern module definitions.

example:

var $ = require('jquery');
exports.myExample = function () {};

AMD / requirejs

example:

define(['jquery'] , function ($) {
    return function () {};
});

the module value: Either use "return value;" or the CommonJS "exports" idiom, which can be useful for circular dependencies.

standard js module definition

(function () {
   this.myGlobal = function () {};
}());

attach to global

AMD module definition

• Register the factory function by calling define()

• Pass dependencies as an array of string values,

• Only execute the factory function once all the dependencies have been loaded and executed.

• Pass the dependent modules as arguments to the factory function.

  //Calling define with a dependency array and a factory function define(['dep1', 'dep2'], function (dep1, dep2) {

    //Define the module value by returning a value.
    return function () {};
  

  });

Named modules

Notice that the above module does not declare a name for itself. This is what makes the module very portable. It allows a developer to place the module in a different path to give it a different ID/name. The AMD loader will give the module an ID based on how it is referenced by other scripts.

But it is possible to name a module - for the optimized bundling of modules in same files.

//Calling define with module ID, dependency array, and factory function
define('myModule', ['dep1', 'dep2'], function (dep1, dep2) {

    //Define the module value by returning a value.
    return function () {};
});

You should avoid naming modules yourself, and only place one module in a file while developing. However, for tooling and performance, a module solution needs a way to identify modules in built resources.

TODO: This can be done by Webpack ??

simplified CommonJS wrapping

define(function (require) {
    var dependency1 = require('dependency1'),
        dependency2 = require('dependency2');

    return function () {};
});

Requirejs and angular DI

https://www.sitepoint.com/using-requirejs-angularjs-applications/ the purpose of both the libraries is totally different. The dependency injection system built into AngularJS deals with the objects needed in a component; while dependency management in RequireJS deals with the modules or, JavaScript files.

The ES6 module standard

http://2ality.com/2014/09/es6-modules-final.html

SystemJS

Configurable module loader enabling dynamic ES module workflows

Loads any module format: https://github.com/systemjs/systemjs/blob/master/docs/module-formats.md

The most modern?

The one used by the angular tutorial.

"Angular2 (could conceivably) be transpiled to AMD from Typescript, but we're unlikely to support it. The SystemJS loader is universal, meaning it will load AMD, CJS, and ES6 code from the same loader. So I would advise not authoring new code in AMD - use the System loader to allow you to load legacy (AMD) code into your new Angular2 application." angular/angular#5412

Webpack

webpack er en bundler - ikke en module loader - MEN:

https://angular.io/guide/webpack "Webpack is a popular module bundler, a tool for bundling application source code in convenient chunks and for loading that code from a server into a browser. It's an excellent alternative to the SystemJS approach used elsewhere in the documentation. This guide offers a taste of Webpack and explains how to use it with Angular applications."

Webpack uses the 'require' module definition syntax.

så webpack kan være et alternativ til hele AMD/requirejs/systemjs halløjet.