Yannick Francois
55 lines
6.4 KiB
HTML
55 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>
|
||
<em>Le 16 février à 21:02</em> > 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. > > Au départ, le langage n’avait pas de mécanismes pour découper le code en modules. > > On peut découper en plusieurs fichiers, mais tous les scripts chargés dans le navigateur partagent le même espace de nommage global. > > Ce qui pose des problèmes : > - d’isolation > - d’ordre de chargement / dépendances > > Pour résoudre le problème d’isolation, les gens se sont mis à utiliser le « classical module pattern ». > > Et la seule façon de créer une nouvelle portée (scope) en JS était de créer une fonction. > > L’utilisation du pattern dit « IIFE » (https://en.wikipedia.org/wiki/Immediately_invoked_function_expression) 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 ». > > WikipediaWikipedia > Immediately invoked function expression > An immediately invoked function expression (or IIFE, pronounced “iffy”, IPA /ˈɪf.i/) is a JavaScript programming language idiom which produces a lexical scope using JavaScript’s function scoping. > Immediately invoked function expressions can be used to avoid variable hoisting from within blocks, protect against polluting the global environment and simultaneously allow public access to methods while retaining privacy for variables defined within the function. > > 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. > > Arrive ensuite CommonJS (2009-2014) https://en.wikipedia.org/wiki/CommonJS (edited) > > 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. > > Avec CommonJS, chaque fichier est un module. Il définit explicitement ses exports, via la variable module.exports, et ses imports via la fonction require(). > > Les système de modules de Node ressemble beacoup à CommonJS. > > 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. > > Arrive alors Asynchronous module definition (AMD) > > 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()). > > Donc des gens ont voulu faire une variante « universelle » (UMD) pour supporter les deux à la fois. > > En 2015, après des années de stagnation, le langage a une grosse mise à jour : ES6 alias ES2015 https://en.wikipedia.org/wiki/ECMAScript#6th_Edition_%E2%80%93_ECMAScript_2015 (edited) > > Avec ES6 le langage acquiert un support natif des modules avec les mots-clés import et export. > > Côté HTML, il suffit de charger un seul point d’entrée comme ceci : >
|
||
<script type=module src='toto.js'></script>
|
||
<blockquote>
|
||
<p>Mais tout ça n’est supporté que dans les navigateurs modernes : - Safari 10.1 - Chrome 61 - Firefox 60 - Edge 16 - Mais pas IE11 !</p>
|
||
<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>
|