Module Formats (non-native)

• Asynchronous Module Definition (AMD)
  • RequireJS
  • Primarily for Client Side
• CommonJS
  • SystemJS
  • Primarily for Server Side
• Universal Module Definition (UMD)
  • Attempts to be compatible with both RequireJS & SystemJS
  • Most likely the result of compiler output.
• System.register

Terms:

• Module Format
  • Syntax

• Module Loader

  • Execution

Module Bundlers:

• Browserify
• Webpack
• Rollup

ES6 Modules

Exporting:

• add export in front of the definition
• add export default in front of the definition to assign a Default Export

or

• add all exports to an export { } function at the bottom of the file
• add as to an export statement to alias an export

Importing:

• import an entire module with *. import * as somevar from './path/to/file.js'
• import { } from './file.js'
• add as to an import statement to create an alias for the import. (helpful for adding context)

Examples:

Named Exports

var theFunq = function(){
    // funky function
}

var yoThing = 'Some String';

export { theFunq as daFunk, yoThing }

Default Exports

export default function addResult(newResult){
    return newResult + 1;
}

function somePrivateFunction() {
    // not part of the API
}

export var theFunq = function(){
    // funky function
}

Bulk Import

import * as someVar from './path/to/file.js';

someVar.theFunq();

Named Imports

import { daFunk as funq, yoThing } from './path/to/file.js';

funq(myThang);

Default Imports

import addResult, { theFunq } from './path/to/file.js';

CommonJS

// import
var player = require('./path/to/file.js')

// export
var printGame = function() {
    // function function funky function
}

exports.printGame = printGame;

• module.exports === exports
• but don't use the shorthand

AMD Modules

Export:

define([], function() {
    // Your Module Here
});

Export w/ deps:

define(['./player', './scoreboard'], function(player, scoreboard) {
    // module, module, module
});

Import:

define(['./player'], function(player){
    console.log('Starting game for ' + player.getName());
    function calculateScore(){
        // calculate the score here
    }
    return {
        calculateScore: calculateScore
    };
})

• Deps = strings, relative path to the file, no filetype extension

RequireJS

<script data-main="my-app" src="path/to/require.js"><script>

ES2015 Modules

Workflow:

Write ES6 modules --> Transpile (Babel) --> (AMD or CommonJS) --> module loader (RequireJS or SystemJS)

Exporting:

• add export in front of the definition
• add export default in front of the definition to assign a Default Export

or

• add all exports to an export { } function at the bottom of the file
• add as to an export statement to alias an export

Importing:

• import an entire module with *. import * as somevar from './path/to/file.js'
• import { } from './file.js'
• add as to an import statement to create an alias for the import. (helpful for adding context)

Examples:

Named Exports

var theFunq = function(){
    // funky function
}

var yoThing = 'Some String';

export { theFunq as daFunk, yoThing }

Default Exports

export default function addResult(newResult){
    return newResult + 1;
}

function somePrivateFunction() {
    // not part of the API
}

export var theFunq = function(){
    // funky function
}

Bulk Import

import * as someVar from './path/to/file.js';

someVar.theFunq();

Named Imports

import { daFunk as funq, yoThing } from './path/to/file.js';

funq(myThang);

Default Imports

import addResult, { theFunq } from './path/to/file.js';

Babel

```bash $ npm install babel-cli --save-dev $ npm install babel-preset-es2015 --save-dev

$ ./node_modules/.bin/babel js --presets es2015 --out-dir build

this will create the build folder