Javascript modules

From wikinotes

In recent years, javascript has been extended to support modules with import semantics.

Documentation

MDN modules https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

Example

<!-- index.html -->
<html lang="en">
  <head>
    <script type="module" src="main.js"></script>   <!-- add main.js to file -->
  </head>
</html>
// main.js
import * as Math from './modules/math.js'

console.log(Math.sum(1, 2));
// modules/math.js
export function sum(a, b) {
    return a + b;
}

Syntax

Imports

import * as Foo from './modules/foo.js'          // exported symbols accessed on 'Foo' namespace
import { Bar, Baz } from './modules/foo.js'      // import exported 'Bar', 'Baz' into current namespace
import { Bar as barbar } from './modules/foo.js' // import exported 'Bar' as symbol 'barbar' within current namespace

Exports

// symbols can be exported in one location
export { foo, bar, baz };

// symbols can be exported at declaration. ex:
export function foo() { ... };
export const number = 123;

You can also export one function as default

// math.js
export default function sum(a, b) {
    return a + b;
}

// main.js
import * as Math from './math.js'
Math.default(2, 2); // ('default' is the 'sum' function)