Tout d’abord sachez que les modules existent aussi bien ôté serveur que client. Les modules on été inventé pour permettre d’inclure ds fichier de script javascript comme on purrait le faire en PHP avec include.
Il existait plusieur type de module
- AMD (Asynchronous Module Definition) un des plus ancien cf la librairie require.js
- CommonJS, le systyme de mdule de NodeJS
- UMD (universal Module Definition) Universal comme rassemblant AMD et CommonJS.
C’est quoi un module?
Un module est un fichier JS. Pour charger les uns des autres, il y a les mots clé import et export.
Exemple :
// sayHi.js
export function saluer(user) {
alert(`Bonjour, ${user}!`);
}
Dans un autre fichier qui veut utiliser cette fonction
// main.js
import {sayHi} from './sayHi.js';
saluer('Jean'); // Bonjour Jean
ES2015 et ses apports
Grâce à ES2015, nous avons nativement les instructions import et export côté client. Si nous voulons importer un module dans une page HTML, nous devons utiliser le type module. Pour accéder au fichier HTML ci-dessous, vous devez avoir un serveur local, car ouvrir le fichier directement dans le navigateur avec le protocole file:// ne va pas marcher.
<!doctype html>
<script type="module">
import { saluer} from './sayHi.js;
document.body.innerHTML = sayHi('John');
</script>
Les particularités des modules
- utiliser use strict
- chaque module a son scope, les varaibles de deux modules sont invisible mutuellement
- un module est exécutéune seule fois même s’il est importé de multiples fois
Export et import
Nous avons vu que à la base du système de module, ce sont ces deux mot clé qui sont incontournables.
Nous pouvons exporte une constante, un tableau , un objet, ou un fonction, ou encore une classe.
export const Pi = 3.14
export let nom = "Dupont"
expot class User{
constructor(name){
this.name = name
}
} // pas de ; à la fin
function sayHi(user) {
alert(`Hello, ${user}!`);
}
function sayBye(user) {
alert(`Bye, ${user}!`);
}
export {sayHi, sayBye}; // a list of exported variables
Export default
On rencontre très couramment cette syntaxe. Un seul export défault par fichier JS. Et l’import se fait sans accolade.
export default class User { // just add "default"
constructor(name) {
this.name = name;
}
}
// main.js
import User from './user.js'; // et non {User}
donc import utiliser les accolades pour les exports nommés, et pas d’accolade pour les export defaults.