Modules

    • ES6 modules do not need ‘use strict’
    • Similar to CommonJS

    Multiple exports.

    You can call just the exports you need from a specific module.

    2. export const sqrt = Math.sqrt;
    3. export function square(x) {
    4.   return x * x;
    5. }
    6. export function diag(x, y) {
    7.   return sqrt(square(x) + square(y));
    8. }
    10. // main.js
    11. import { square, diag } from 'lib';
    12. console.log(square(11)); // 121
    13. console.log(diag(4, 3)); // 5
    15. // second.js
    16. // or you can call them with '*'
    17. // but then you have to prefix the exports with
    18. // the module name
    20. import * as lib from 'lib';
    21. console.log(lib.diag(4, 3)); // 5
    1. // lib.js
    2. class MyClass {
    3.   //...
    4. }
    6. // main.js
    7. import { Dude as Bro } from 'lib';
    8. var bro = new Bro(); // instanceof MyClass

    Cyclical Dependencies

    2. import Main from 'main';
    3. var lib = {message: "This Is A Lib"};
    4. export { lib as Lib };
    6. // main.js
    7. import { Lib } from 'lib';
    8. export default class Main { 
    9.   // ....
    10. }

    More Exporting

    1. export var myVar = ...;
    2. export let myVar = ...;
    3. export const MY_CONST = ...;
    5. export function myFunc() {
    6.   ...
    7. }
    8. export function* myGeneratorFunc() {
    9.   ...
    10. }
    11. export class MyClass {
    12.   ...
    13. }

    This is for exporting something you are importing.

    1. export * from 'src/other_module';
    2. export { foo, bar } from 'src/other_module';
    3. // Export other_module's foo as myFoo
    4. export { foo as myFoo, bar } from 'src/other_module';

    Modules - Programatic Loading API

    1. System.import('some_module')
    2. .then(some_module => {
    4. })
    5. .catch(error => {
    6.   ...
    7. });

    Load All

    1. System.import(source);
    2. // Returns module via Promise
    4. System.module(source, options);
    5. // Returns module via Promise
    7. System.set(name, module);
    8. // Inline register a new module
    10. System.define(name, source, options?);
    11. // Eval code and register module

    To load module in the html

    1. <head>
    2.   <module import="my-module.js"></module>
    3. </head>
    1. <head>
    2.   <module>
    3.     import $ from 'lib/jquery';
    4.     console.log('$' in this); // false becaue it won't attach the import to the window global
    5.     // globals trapped in module
    7.     // Other JS here
    8.     console.log(window); // Still can call window
    10.     // let x = 1;
    11.     Module Tag is force strict mode
    12. </head>