127 lines
6.4 KiB
HTML
127 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Mardi 16 février 2021 - Elsif.fr</title>
|
||
<meta name="DC.title" content="elsif.fr, site de Yannick François aka yaf (ou ya_f)."/>
|
||
<meta name="description" content="Le site de Yannick François. Développeur Senior, Responsable Produit, Pédagogue. Je travail chez Scopyleft"/>
|
||
<meta name="keywords" content="code, développement, programmation, apprentissage, apprendre, lean, agile, logiciel, tdd, objet, refactoring, libre, creative commons, linux, unix"/>
|
||
<meta name="author" content="Yannick François, https://elsif.fr"/>
|
||
<meta name="designer" content="Yannick François, https://elsif.fr"/>
|
||
<meta name="geo.placename" content="Poissy, Ile de france, France"/>
|
||
<meta name="robots" content="index,follow" />
|
||
<meta name="language" content="French" />
|
||
<meta name="HandheldFriendly" content="True" />
|
||
<meta name="MobileOptimized" content="320" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
|
||
<link rel="index" title="Yannick François / Développeur / Pédagogue" href="index.html" />
|
||
<link rel="alternate" type="application/rss" href="/feed.xml" title="elsif.fr/feed" />
|
||
<style>
|
||
body {
|
||
font-size:16pt;
|
||
max-width:42rem;
|
||
min-width: 18rem;
|
||
margin: 1em;
|
||
color: black;
|
||
background: white;
|
||
font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
|
||
}
|
||
a { color: darkred; }
|
||
a:hover { background: gold; }
|
||
a:visited, a:active { color: dimgrey; }
|
||
nav { text-align:center; font-size:smaller; padding: 0; margin: 0; }
|
||
nav li { list-style-type: none; }
|
||
h2 > a, h2 > a:active, h2 > a:visited { color: lightgrey; text-decoration:none;}
|
||
h2 > a:hover { color: black; text-decoration:underline }
|
||
|
||
@media (max-width: 1000px) { #portrait {display:none;} }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<article>
|
||
<h1>Mardi 16 février 2021</h1>
|
||
<p>Le moment où Ronan Amicel partage une exploration à propos des
|
||
modules JavaScript.</p>
|
||
<p><em>Le 16 février à 21:02</em></p>
|
||
<blockquote>
|
||
<p>Je n’ai pas de livre à recommander, mais il y a quelques mois
|
||
je me suis moi-même retrouvé à devoir faire (et donc comprendre,
|
||
on ne se refait pas) plus de choses que je ne l’aurais voulu avec
|
||
JS. Ces histoires de modules, ce n’était pas clair pour moi : AMD,
|
||
CommonJS, Bowserify, Node.js, ES6… Donc un matin je me suis posé
|
||
et j’ai essayé de m’orienter dans ce bazar, et j’ai pris quelques
|
||
notes.</p>
|
||
<p>Au départ, le langage n’avait pas de mécanismes pour découper
|
||
le code en modules.</p>
|
||
<p>On peut découper en plusieurs fichiers, mais tous les scripts
|
||
chargés dans le navigateur partagent le même espace de nommage
|
||
global.</p>
|
||
<p>Ce qui pose des problèmes : - d’isolation - d’ordre de
|
||
chargement / dépendances</p>
|
||
<p>Pour résoudre le problème d’isolation, les gens se sont mis à
|
||
utiliser le « classical module pattern ».</p>
|
||
<p>Et la seule façon de créer une nouvelle portée (scope) en JS
|
||
était de créer une fonction.</p>
|
||
<p>L’utilisation du pattern dit « IIFE » (<a
|
||
href="https://en.wikipedia.org/wiki/Immediately_invoked_function_expression">Immediately
|
||
Invokeed Funtion Expression</a> permet l’encapsulation de
|
||
variables et de fonctions privées dans le scope d’une fonction
|
||
anonyme immédiatement invoquée. La valeur de retour de la fonction
|
||
permet d’exposer les variables et fonctions publiques du « module
|
||
».</p>
|
||
<p>Cela donne une bonne isolation, mais on introduit quand même un
|
||
objet dans l’espace de noms global, et ça ne résoud pas le
|
||
problème de l’ordre de chargement et des dépendances.</p>
|
||
<p>Arrive ensuite <a
|
||
href="https://en.wikipedia.org/wiki/CommonJS">CommonJS</a>
|
||
(2009-2014)</p>
|
||
<p>CommonJS was a project with the goal to establish conventions
|
||
on module ecosystem for JavaScript outside of the web browser. The
|
||
primary reason for its creation was a major lack of commonly
|
||
accepted form of JavaScript scripts module units which could be
|
||
reusable in environments different from that provided by a
|
||
conventional web browser e.g. web server or native desktop
|
||
applications which run JavaScript scripts.</p>
|
||
<p>Avec CommonJS, chaque fichier est un module. Il définit
|
||
explicitement ses exports, via la variable module.exports, et ses
|
||
imports via la fonction <code>require()</code>.</p>
|
||
<p>Les système de modules de Node ressemble beacoup à
|
||
CommonJS.</p>
|
||
<p>Le principal problème, c’est que ce standard n’est pas supporté
|
||
nativement par les navigateurs, et spécifie un chargement
|
||
synchrone des modules, ce qui n’est pas toujours idéal.</p>
|
||
<p>Arrive alors Asynchronous module definition (AMD)</p>
|
||
<p>Une autre API, plus ou moins compatible avec CommonJS (il y a
|
||
un require()), mais quand même différente (ils privilégient
|
||
l’utilisation de define()).</p>
|
||
<p>Donc des gens ont voulu faire une variante « universelle »
|
||
(UMD) pour supporter les deux à la fois.</p>
|
||
<p>En 2015, après des années de stagnation, le langage a une
|
||
grosse mise à jour : ES6 alias <a
|
||
href="https://en.wikipedia.org/wiki/ECMAScript#6th_Edition_%E2%80%93_ECMAScript_2015">ES2015</a></p>
|
||
<p>Avec ES6 le langage acquiert un support natif des modules avec
|
||
les mots-clés import et export.</p>
|
||
Côté HTML, il suffit de charger un seul point d’entrée comme ceci
|
||
:
|
||
<script type=module src='toto.js'></script>
|
||
<p>Mais tout ça n’est supporté que dans les navigateurs modernes
|
||
:</p>
|
||
<ul>
|
||
<li>Safari 10.1</li>
|
||
<li>Chrome 61</li>
|
||
<li>Firefox 60</li>
|
||
<li>Edge 16</li>
|
||
<li>Mais pas IE11 !</li>
|
||
</ul>
|
||
<p>Donc en pratique, pour utiliser du code JS en modules (CommonJS
|
||
ou ES2015) dans le navigateur, on peut passer par un outil qui va
|
||
assembler tous les modules dans un seul gros fichier JS en tenant
|
||
compte des dépendances : un bundler.</p>
|
||
<p>Le plus connu est Webpack, mais il y a aussi Rollup ou
|
||
Parcel.</p>
|
||
<p>Voilà, pour mon topo de newbie sur la question !</p>
|
||
</blockquote>
|
||
</article>
|
||
</body>
|
||
</html>
|