Les modules sont apparus avec la norme EcmaScript 2015 ES2015 ou ES6.

Pour une grosse application, les modules permettent de charger uniquement les fonctionnalités dont l'appli a besoin.
Par exemple three.js -API qui permet d'afficher des objets en 3D- permet d'importer avec la directive import le module dont on a besoin pour charger un type de modèle 3D (STL, OBJ, GCODE...) sans charger les autres, ce qui représenterait beaucoup de code téléchargé pour rien, puisque non employé.

Comment ça marche

Le code des modules est toujours en mode strict.

Le protocole file:// ne fonctionnera pas il faut passer par http://

Les variables d'un module ne sont pas visibles ailleurs, sauf si elles sont exportées avec la directive export.

Les directives import et export ne sont utilisables qu'à l'intérieur de modules.

Les modules sont toujours téléchargés en mode différé donc pas besoin de préciser l'attribut defer.

Ils sont exécutés une seule fois, même s'ils sont référencés dans plusieurs balises <script>.

Les fonctionnalités importées ne sont disponibles qu'au sein de la portée du script qui les utilise!

Exemple de module

module.js exporte une variable et une fonction
const myvar = "test"; // variable non accessible depuis un autre module

export const vartest = "hello";

export function charger(fic){
    console.log("charger",fic);
}
Sans ajouter le mot export devant chaque fonction, ajouter export à la fin du fichier:
const myvar = "test"; // variable non accessible depuis un autre module

const vartest = "hello";

function charger(fic){
    console.log("charger",fic);
}

export {vartest,charger}
Le script qui importe le module:
<script type="module">
import {charger} from './module.js'; 
// séparer par virgule s'il y en a plusieurs
//import {charger, vartest} from './module.js';
// ou, pour importer tous les exports d'un module
//import * from './module.js';

charger("modele.stl");

console.log(myvar); // provoque une erreur: myvar is not defined

console.log(vartest); // provoque une erreur: variable exportée, mais non importée
// on aurait du faire import * from './module.js';
</script>