Modules
- ES6 modules do not need 'use strict'
- Similar to CommonJS
Default export
The default means will import the default export.
// MyClass.js
class MyClass{
constructor() {}
}
export default MyClass;
// Main.js
import MyClass from 'MyClass';
Multiple exports.
You can call just the exports you need from a specific module.
// lib.js
export const sqrt = Math.sqrt;
export function square(x) {
return x * x;
}
export function diag(x, y) {
return sqrt(square(x) + square(y));
}
// main.js
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5
// second.js
// or you can call them with '*'
// but then you have to prefix the exports with
// the module name
import * as lib from 'lib';
console.log(lib.square(11)); // 121
console.log(lib.diag(4, 3)); // 5
Export as
// lib.js
class MyClass {
//...
}
// main.js
import { Dude as Bro } from 'lib';
var bro = new Bro(); // instanceof MyClass
Cyclical Dependencies
The following would be allowed
// lib.js
import Main from 'main';
var lib = {message: "This Is A Lib"};
export { lib as Lib };
// main.js
import { Lib } from 'lib';
export default class Main {
// ....
}
More importing
// lib.js
// Default exports and named exports
import theDefault, { named1, named2 } from 'src/mylib';
import theDefault from 'src/mylib';
import { named1, named2 } from 'src/mylib';
// Renaming: import named1 as myNamed1
import { named1 as myNamed1, named2 } from 'src/mylib';
// Importing the module as an object
// (with one property per named export)
import * as mylib from 'src/mylib';
// Only load the module, don't import anything
import 'src/mylib';
More Exporting
export var myVar = ...;
export let myVar = ...;
export const MY_CONST = ...;
export function myFunc() {
...
}
export function* myGeneratorFunc() {
...
}
export class MyClass {
...
}
Re-exporting
This is for exporting something you are importing.
export * from 'src/other_module';
export { foo, bar } from 'src/other_module';
// Export other_module's foo as myFoo
export { foo as myFoo, bar } from 'src/other_module';
Modules - Programatic Loading API
System.import API
This method will return a promise
System.import('some_module')
.then(some_module => {
...
})
.catch(error => {
...
});
Load All
Promise.all(
['module1', 'module2', 'module3']
.map(x => System.import(x)))
.then(function ([module1, module2, module3]) {
// my code...
});
System "Module" functions
System.import(source);
// Returns module via Promise
System.module(source, options);
// Returns module via Promise
System.set(name, module);
// Inline register a new module
System.define(name, source, options?);
// Eval code and register module
Module HTML Tag
To load module in the html
<head>
<module import="my-module.js"></module>
</head>
<head>
<module>
import $ from 'lib/jquery';
console.log('$' in this); // false becaue it won't attach the import to the window global
// globals trapped in module
// Other JS here
console.log(window); // Still can call window
// let x = 1;
Module Tag is force strict mode
</module>
</head>