Les modules JavaScript
ES Modules
C'est quoi ?
ES Modules
// Fichier a.js
export const age = 21;
export let name = 'Florent';
export default 'Berthelot';// Fichier B.js
import lastname, {name as firstname, age} from './a.js';
console.log(firstname, lastname, age);
// Florent Berthelot 21
ES Modules
// Fichier a.js
export const age = 21;
export let name = 'Florent';
export default 'Berthelot';// Fichier B.js
import * as User from './a.js';
console.log(User.name, User.default, User.age);
// Florent Berthelot 21
ES Modules
import('http://cdn/d3.js')
  .then(d3 => {
    d3.makeABeautifulChart();
  });ES Modules

ES Modules
Comment on en est arrivé là ?
Les débuts
Tu as 10 jours pour mettre Java dans Netscape
Le client (netscape) de Brendan Eich (Sun / Java)
Les débuts
<!--
<script src="./monapp.js" type="text/javascript"></script>
<script src="./pub.js" type="text/javascript"></script>
-->// monapp.js
var password = 'ceciEstUnSecret';// pub.js
hackUserAccount(password);Les débuts
<!--
<script src="./monapp.js" type="text/javascript"></script>
<script src="./pub.js" type="text/javascript"></script>
-->// monapp.js
(function() {
  var password = 'ceciEstUnSecret';
})();// pub.js
hackUserAccount(password); // password is undefinedLes débuts
V8 + API Système = <3
J'ai des problèmes asynchrones avec le langage C
Ryan Dahl, le créateur de node.js
Les débuts
// Fichier A
exports.password = 'ceciEstUnSecret';
 Créé en Janvier 2009 par Mozilla
 ServerJS puis renommé en CommonJS
// Fichier B
const lePasswordDeFlorent = require('./fichierA').password;Mais ce n'est pas asynchrone ?!
Les débuts
define(['jquery'], function ($) {
  return {
    motDePasse: 'CeciEstLeMDPDeFlorent'
  };
});Créé en 2009 par Dojo
RunJS puis renommé en RequireJS
define(['motDePasse'], function (mdp) {
  console.log(`rhoo comment j'ai hacké sont MDP : ${mdp}`);
});Les débuts
(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['exports', 'b'], factory);
    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
        factory(exports, require('b'));
    } else {
        factory((root.commonJsStrict = {}), root.b);
    }
}(typeof self !== 'undefined' ? self : this, function (exports, b) {
    exports.action = function () {};
}));Universal Module Declaration (UMD)
ES Module
Pourquoi il y a un problème ?
ES Module
// fichier a.js
console.log('Execution de a.js')
import { afficherPassword } from './b.js'
afficherPassword();// fichier b.js
console.log('Execution de b.js')
export function afficherPassword () {
  console.log('leMDPDeFlorent');
}Dans quel ordre sont affiché les messages ?
ES Module
// fichier a.js
console.log('Execution de a.js')
import { afficherPassword } from './b.js'
afficherPassword();// fichier b.js
console.log('Execution de b.js')
export function afficherPassword () {
  console.log('leMDPDeFlorent');
}Execution de b.js
Execution de a.js
leMDPDeFlorentES Module
// fichier a.js
console.log('Execution de a.js')
const afficherPassword = require('./b.js');
afficherPassword();// fichier b.js
console.log('Execution de b.js');
module.exports = function() {
  console.log('leMDPDeFlorent');
}Dans quel ordre sont affiché les messages ?
ES Module
// fichier a.js
console.log('Execution de a.js')
const afficherPassword = require('./b.js');
afficherPassword();// fichier b.js
console.log('Execution de b.js');
module.exports = function() {
  console.log('leMDPDeFlorent');
}Execution de a.js
Execution de b.js
leMDPDeFlorentES Modules
Et maintenant ?
ES Modules

.mjs
ES Modules
// Package.json
{
    "type": "module",
    "exports": "./index.js",
    "engines": "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
}// a.js
import fs from 'node:fs/promises';Dynamic Import
import('http://cdn/d3.js')
  .then(d3 => {
    d3.makeABeautifulChart();
  });Work in every node.js file !
ES Module
Attention, pas d'import de JSON ! (Bientôt)
__dirname, __filename ==> import.meta.url
import { readFile } from 'fs/promises';
const json = JSON.parse(await readFile(new URL('./dat.json', import.meta.url)));Les modules JavaScript
By Florent Berthelot
Les modules JavaScript
- 676