Comprendre les modules ES6

Cet article explore les modules ES6, montrant comment ils peuvent être utilisés aujourd'hui à l'aide d'un transpileur.

Presque toutes les langues ont un concept de modules – un moyen d'inclure les fonctionnalités déclarées dans un fichier dans un autre. Généralement, un développeur crée une bibliothèque encapsulée de code responsable du traitement des tâches connexes. Cette bibliothèque peut être référencée par des applications ou d'autres modules.

Les avantages:

1. Le code peut être divisé en fichiers plus petits de fonctionnalité autonome
2. Les mêmes modules peuvent être partagés à travers un nombre quelconque d'applications
3. Idéalement, les modules ne doivent jamais être examinés par un autre développeur , parce qu'ils ont fait leurs preuves.
4. Le code référençant un module comprend qu'il s'agit d'une dépendance. Si le fichier du module est modifié ou déplacé, le problème est immédiatement évident.
5. Le code du module (généralement) permet d'éradiquer les conflits de noms. La fonction x () dans module1 ne peut pas entrer en conflit avec la fonction x () dans module2. Des options telles que l'espace de noms sont utilisées pour que les appels deviennent module1.x () et module2.x () .

Où sont les modules en JavaScript?

il y a quelques années aurait été choqué de découvrir qu'il n'y avait pas de concept de modules en JavaScript. Il était impossible de référencer ou d'inclure directement un fichier JavaScript dans un autre. Les développeurs ont donc eu recours à d'autres options

HTML multiples

La page Web moyenne de en 2018 utilise 25 scripts distincts mais ce n'est pas une solution pratique:

• Chaque script initie une nouvelle requête HTTP, qui affecte les performances de la page. HTTP / 2 atténue le problème dans une certaine mesure, mais cela n'aide pas les scripts référencés sur d'autres domaines tels qu'un CDN.
• Chaque script interrompt le traitement ultérieur pendant son exécution.
• La gestion des dépendances est un processus manuel. Dans le code ci-dessus, si lib1.js a référencé le code dans lib2.js le code échouerait parce qu'il n'a pas été chargé. Cela pourrait interrompre le traitement JavaScript.
• Les fonctions peuvent surcharger les autres sauf si des modèles de module appropriés sont utilisés. Les premières bibliothèques JavaScript étaient connues pour utiliser des noms de fonction globaux ou pour remplacer des méthodes natives

Concaténation de scripts

Une solution aux problèmes de plusieurs balises

ou inline:

Les modules sont analysés une seule fois, indépendamment du nombre de fois qu'ils sont référencés dans la page ou d'autres modules

Considérations sur le serveur

Les modules doivent être servis avec le type MIME application / javascript . La plupart des serveurs le feront automatiquement, mais méfiez-vous des scripts générés dynamiquement ou .mjs fichiers ( voir la section Node.js ci-dessous ).

Les balises régulières

Repli de module

Les navigateurs sans support de module n'exécuteront pas les scripts type = "module" . Un script de secours peut être fourni avec un attribut nomodule que les navigateurs compatibles avec le module ignorent. Par exemple:

Devriez-vous utiliser des modules dans le navigateur?

Le support du navigateur est en croissance, mais il est peut-être un peu prématuré de passer aux modules ES6. Pour l'instant, il est probablement préférable d'utiliser un bundler de module pour créer un script qui fonctionne partout.

Utiliser les modules ES6 dans Node.js

Quand Node.js a été publié en 2009, il aurait été inconcevable pour n'importe quel runtime ne pas fournir de modules. CommonJS a été adopté, ce qui signifie que le gestionnaire de paquets Node, npm, pourrait être développé. L'utilisation a augmenté de façon exponentielle à partir de ce point

Un module CommonJS peut être codé de la même manière qu'un module ES2015. module.exports est utilisé plutôt que export :

 // lib.js
const PI = 3.1415926;

function sum (... args) {
  log ('sum', args);
  return args.reduce ((num, tot) => tot + num);
}

function mult (... args) {
  log ('mult', args);
  return args.reduce ((num, tot) => tot * num);
}

// fonction privée
journal des fonctions (... msg) {
  console.log (... msg);
}

module.exports = {PI, somme, mult};

require (plutôt que import ) est utilisé pour extraire ce module dans un autre script ou module:

 const {sum, mult} = require ('./ lib. js ');

console.log (somme (1,2,3,4)); // dix
console.log (mult (1,2,3,4)); // 24

require peut également importer tous les éléments:

 const lib = require ('./ lib.js');

console.log (lib.PI); // 3.1415926
console.log (lib.add (1,2,3,4)); // dix
console.log (lib.mult (1,2,3,4)); // 24

Les modules ES6 étaient donc faciles à implémenter dans Node.js, n'est-ce pas? Er, no .

Les modules ES6 sont derrière un drapeau dans Node.js 9.8.0+ et ne seront pas entièrement implémentés avant au moins la version 10. Alors que les modules CommonJS et ES6 partagent une syntaxe similaire, ils fonctionnent fondamentalement différemment:

• Les modules ES6 sont pré-analysés afin de résoudre d'autres importations avant l'exécution du code
• Les modules CommonJS chargent des dépendances à la demande lors de l'exécution du code.

ne faites aucune différence dans l'exemple ci-dessus, mais considérez le code suivant du module ES2015:

 // Modules ES2015

// ---------------------------------
// one.js
console.log ('running one.js');
import {hello} from './two.js';
console.log (bonjour);

// ---------------------------------
// two.js
console.log ('running two.js');
export const hello = 'Bonjour à partir de deux.js';

La sortie pour ES2015:

 exécutant two.js
en cours d'exécution one.js
bonjour de deux.js

Code similaire écrit en utilisant CommonJS:

 // Modules CommonJS

// ---------------------------------
// one.js
console.log ('running one.js');
const bonjour = require ('./ two.js');
console.log (bonjour);

// ---------------------------------
// two.js
console.log ('running two.js');
module.exports = 'Bonjour à partir de deux.js';

La sortie pour CommonJS:

 exécutant one.js
deux.js en cours d'exécution
bonjour de deux.js

L'ordre d'exécution peut être critique dans certaines applications, et que se passerait-il si les modules ES2015 et CommonJS étaient mélangés dans le même fichier? Pour résoudre ce problème, Node.js autorise uniquement les modules ES6 dans les fichiers avec l'extension .mjs . Les fichiers avec une extension .js seront par défaut CommonJS. C'est une option simple qui supprime une grande partie de la complexité et devrait aider les éditeurs de code et les linters

Si vous utilisez des modules ES6 dans Node.js?

Les modules ES6 sont seulement pratiques à partir de Node.js v10 (publié en avril 2018 ). La conversion d'un projet existant est peu susceptible de générer des avantages et rendrait une application incompatible avec les versions antérieures de Node.js.

Pour les nouveaux projets, les modules ES6 offrent une alternative à CommonJS. La syntaxe est identique au codage côté client et peut offrir un chemin plus facile vers le JavaScript isomorphe, qui peut être exécuté dans le navigateur ou sur un serveur.

Module Melee

Un système de module JavaScript standardisé a pris de nombreuses années arriver, et encore plus à mettre en œuvre, mais les problèmes ont été rectifiés. Tous les navigateurs grand public et Node.js du milieu de l'année 2018 supportent les modules ES6, bien qu'un retard de commutation soit attendu pendant que tout le monde met à jour.

Apprenez les modules ES6 dès aujourd'hui pour bénéficier de votre développement JavaScript.

consultant qui a construit sa première page pour IE2.0 en 1995. Depuis ce temps, il préconise les normes, l'accessibilité et les meilleures pratiques HTML5. Il a écrit plus de 1000 articles pour SitePoint et vous pouvez le trouver @craigbuckler