Close

JavaScript - ES6 Modules Namespace imports

[Last Updated: Nov 30, 2018]

ES6 achieves modularity and encapsulation via exporting and importing classes, functions and variables etc.

Exporting can be done via export keyword and an exported entity can be imported via import keyword.

What is module and what is not module?

Any file containing one or more import or export statements is considered an module. Any file without any import or export statement is not a module and it treated as a script whose contents are available in the global scope and to the declared modules as well.

What is the name of module?

There is one module per JavaScript file. The file path of the module is treated as its name. The path can be relative or absolute.

Syntax used in this example

ES6 Modules specification provides various syntaxes, in this tutorial we will focus on the very basic one.

exporting:

export <xyz>

Where <xyz> can be a variable, function or class declaration.

Importing:

import * as <local-name> from "<module-name>";

Where:
<module-name> is the module path which we want to import.
<local-name> acts as a local namespace variable, used as a reference for the imported functions/variables/classes etc.

This syntax is also referred as namespace import.

Using Modules in HTML pages

There are two ways to do that.

Inline script:

<script type="module">
  import * as <local-name> from "<module-name>"
  ....
</script>

External script:

<script type="module" src="the-script-path"></script>

Examples

js/lib.js

const SPLIT_CHAR = ','; //not exported so cannot be used outside

export function split(str) {
    return str.split(SPLIT_CHAR);
}

export function toHtmlLines(strArray) {
    return strArray.reduce((s1, s2) => join(s1, s2, '<br>'));
}

function join(s1, s2, separator){//not exported so cannot be used outside
  return s1 + separator + s2;
}

js/app.js

import * as parser from "./lib.js";

export function displayString(id, str) {
    var s = parser.split(str);
    s = parser.toHtmlLines(s);
    document.getElementById(id).innerHTML = s;
}

index.html

<html>
<body>
<div id="display-div"></div>
<script type="module">
  import {displayString} from './js/app.js'
  displayString("display-div", "one,two,three");
</script>
</body>
</html>

To try examples, run http-server from project root:

$ http-server

output


Using external script tag

In above example we used modules via inline script in the HTML page. Let's now use external script tag.

js/app.js

document.addEventListener("DOMContentLoaded", function (event) {
    displayString("display-div", "one,two,three");
});

import * as parser from "./lib.js";

export function displayString(id, str) {
    var s = parser.split(str);
    s = parser.toHtmlLines(s);
    document.getElementById(id).innerHTML = s;
}

index.html

<html>
<head><script type="module" src="./js/app.js"></script></head>
<body>
<div id="display-div"></div>
</body>
</html>

The output, in this case is same as above one.

Various Import/Export Syntaxes

ES6 specification provides various import/export syntaxes as stated here and here. Our next tutorials will be covering related important features.

Example Project

Dependencies and Technologies Used:

  • Node.js v8.11.3
  • Google Chrome Browser Version 68.0.3440.106 (Official Build) (64-bit)
Named Import Export Example Select All Download
  • javascript-modules
    • js
      • app.js
    ES6 Module with external <script> tag Select All Download
    • javascript-modules2
      • js
        • app.js

      See Also