ES6 Modules

fixing Javascript's global scope pollution problem sometime this year

What we have now (plain js)

window

var wizard = (function() {
   "use strict";

   var privateVariable = "I'm invisible!";
   function doMagic() {
      // magic
   }
   return {
      castSpell: function(mana) {
         if(mana) {
             doMagic();
         }
      }
   }
})();

// anywhere else
wizard.castSpell();

What we have now (better?)

System.register([], function(exports_1, context_1) {
    "use strict";
    var __moduleName = context_1 && context_1.id;
    var privateVariable;
    function doMagic() {
        // magic
    }
    function castSpell(mana) {
        if (mana) {
            doMagic();
        }
    }
    exports_1("castSpell", castSpell);
    return {
        setters:[],
        execute: function() {
            privateVariable = "I'm invisible";
        }
    }
});

What we'll get this year

file based modules

What we got last year

import syntax

export syntax

What we got last year

import defaultMember from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as name from "module-name";
import "module-name";

What we got last year

export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // also var
export let name1 = …, name2 = …, …, nameN; // also var, const

export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };

export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;

What we didn't get

browers able to load modules 

browsers able to understand import/export

But.. but.. modules? :(

Transpilation

Module loaders

Example

Transpiler: TypeScript for ES6 to ES5

Module loader: Systemjs