ES6 modules explained and how to use them

<script type="module"></script>

A brief summary and how to use ECMAscript 6 modules in browser

You may or may not know about javascript's default global scope.
Meaning if you just define a variable somewhere in some file, it is by default global - and therefore extremely error-prone when creating large web applications.

This was never the case in NodeJs (server side js) - but that was because of it's late arrival to the stage compared to browsers and the lessons were learned. Due to compatibility the global scope thing cannot be fixed for browsers, but it can be avoided.

Modules are about avoiding putting things the global scope and isolate them.
ES6 modules is the first web standard way to define modules in javascript. Usually a task that was performed via frameworks. There was a "standard" way called Immediately Invoked Function expressions - IIFE - that allowed you to isolate code, but it was not very pretty.

ES6 modules is not tied to the new ES6 class definition feature, but I recommend you to start using those as well, as they will be the future.
With ES6 modules you can define anything as a module, as in the example below where I export just a string setting.

Notice the difference between default exports and named. With default you can only define one, but using named exports you can export multiple.

ECMAscript is Javascript

Reference with script src in index.html

<script type="module" src="index.js"></script>

Reference without script src

<script type="module">
  import { Index } from './index.js';
  let index = new Index();
</script>

Declare modules (export)

ex config.js with many exports:

export const TestConfigOption = "I am export const TestConfigOption";
export const AnotherOption = "I am the other option";

ex module.js

export default class {
     get() {
         return "I am export class Module";
     }
}

ex namedmodule.js

export class NamedModule {
     get() {
         return "I am named export called class NamedModule";
     }
}

ex subfolder/submodule.js

export class SubFolderModule {
     get() {
         return "I am export class SubFolderModule";
     }
}

Use modules (import)

import * as config from './config.js';
import NameMeWhatEver from './module.js';
import { NamedModule } from './namedmodule.js';
import { SubFolderModule } from './subfolder/submodule.js';
  
console.log(config.TestConfigOption);
console.log(config.AnotherOption);
  
let mod = new NameMeWhatEver();
console.log(mod.get());
  
let named = new NamedModule();
console.log(named.get());
  
let sub = new SubFolderModule();
console.log(sub.get());

Clone this repo and test it