Les modules vous permettent de découper votre code js: "supprimer cette fonction de 70 lignes alègera agréablement ce fichier js de 250 lignes!". Bref, finit de perdre du temp à chercher un bug dans des fichiers de 300 lignes ou de charger 36 scripts sur le fichier html.

appel d'un fichier js utilisant import:

sur le fichier html:

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

On note l'attribut type.

appel d'un module depuis le fichier js appelé:

import {
    myFunction,
    myConst
} from "./modules/myModule.js";

console.log(myFunction(myConst));

ne pas oublier l'extention du fichier appelé (js uniquement) => on est pas sur node ici!

export d'un module depuis /module/myModule.js:

function myFunction(string) {
    let text = '';
    let countPhrase = 0;
    while (countPhrase < 10) {
        text = text + string;
        countPhrase += 1;
    }
    return text;
}

const maConst = 'hello world! ';

export {
    myFunction,
    maConst
};

Et voilà!

Notes supplémentaires:

vous pouvez tout à fait appeler depuis votre page html un seul script, qui lui va appeller autant de modules que souhaiter, qui à leurs tours appellerons autant de modules que voulu... à vrai dire, je ne crois pas qu'il y ait une limite autre que la puissance nécessaire pour tout charger.

à noter également que bien qu'il s'agisse là du janguage JS natif, l'import/export ne fonctionne pas à ce jour en dehors d'un serveur (avec une url de type file:///). Ceci est dû au fait que les navigateurs bloque l'import dans ce cas pour des raisons de sécurités.

doc mdn import

doc mdn export