Introduction aux modules ES

ES Modules est la norme ECMAScript pour travailler avec des modules. Alors que Node.js utilise le standard CommonJS depuis des années, le navigateur n'a jamais eu de système de module, car chaque décision majeure telle qu'un système de module doit d'abord être normalisée par ECMAScript puis implémentée.

Introduction aux modules ES

ES Modules est la norme ECMAScript pour travailler avec des modules.

Tandis queNode.jsutilise le standard CommonJS depuis des années, le navigateur n'a jamais eu de système de module, car chaque décision majeure telle qu'un système de module doit d'abord être normalisée par ECMAScript puis implémentée par le navigateur.

Ce processus de normalisation complété parES6et les navigateurs ont commencé à mettre en œuvre cette norme en essayant de garder tout bien aligné, en fonctionnant tous de la même manière, et maintenant les modules ES sont pris en charge dans Chrome, Safari, Edge et Firefox (depuis la version 60).

Les modules sont très sympas, car ils vous permettent d'encapsuler toutes sortes de fonctionnalités et d'exposer cette fonctionnalité à d'autres fichiers JavaScript, sous forme de bibliothèques.

ES Modules Support

Syntaxe des modules ES

La syntaxe pour importer un module est:

import package from 'module-name'

tandis que CommonJS utilise

const package = require('module-name')

Un module est un fichier JavaScript quiexportationsune ou plusieurs valeurs (objets, fonctions ou variables), à l'aide duexportmot-clé. Par exemple, ce module exporte une fonction qui renvoie une chaîne en majuscules:

uppercase.js

export default str => str.toUpperCase()

Dans cet exemple, le module définit un seul,exportation par défaut, donc cela peut être une fonction anonyme. Sinon, il aurait besoin d'un nom pour le distinguer des autres exportations.

À présent,tout autre module JavaScriptpeut importer la fonctionnalité offerte par uppercase.js en l'important.

Une page HTML peut ajouter un module en utilisant un<script>tag avec le spécialtype="module"attribut:

<script type="module" src="index.js"></script>

Remarque: cet import de module se comporte comme undeferchargement du script. Voircharger efficacement JavaScript avec différé et asynchrone

Il est important de noter que tout script chargé avectype="module"est chargé dansmode strict.

Dans cet exemple, leuppercase.jsmodule définit unexportation par défaut, donc lorsque nous l'importons, nous pouvons lui attribuer un nom que nous préférons:

import toUpperCase from './uppercase.js'

et nous pouvons l'utiliser:

toUpperCase('test') //'TEST'

Vous pouvez également utiliser un chemin absolu pour l'importation du module, pour référencer des modules définis sur un autre domaine:

import toUpperCase from 'https://flavio-es-modules-example.glitch.me/uppercase.js'

C'est également une syntaxe d'importation valide:

import { toUpperCase } from '/uppercase.js'
import { toUpperCase } from '../uppercase.js'

Ce n'est pas:

import { toUpperCase } from 'uppercase.js'
import { toUpperCase } from 'utils/uppercase.js'

C'est soit absolu, soit a un./ou/avant le nom.

Autres options d'import / export

Nous avons vu cet exemple ci-dessus:

export default str => str.toUpperCase()

Cela crée une exportation par défaut. Dans un fichier cependant, vous pouvez exporter plus d'une chose, en utilisant cette syntaxe:

const a = 1
const b = 2
const c = 3

export { a, b, c }

Un autre module peut importer toutes ces exportations en utilisant

import * from 'module'

Vous ne pouvez importer que quelques-unes de ces exportations à l’aide deaffectation de déstructuration:

import { a } from 'module'
import { a, b } from 'module'

Vous pouvez renommer n'importe quelle importation, pour plus de commodité, en utilisantas:

import { a, b as two } from 'module'

Vous pouvez importer l'exportation par défaut et toute exportation non par défaut par nom, comme dans cette importation React courante:

import React, { Component } from 'react'

Vous pouvez voir un exemple de modules ES ici:https://glitch.com/edit/#!/flavio-es-modules-example?path=index.html

CORS

Les modules sont récupérés à l'aide deCORS. Cela signifie que si vous référencez des scripts d'autres domaines, ils doivent avoir un en-tête CORS valide qui permet le chargement intersite (commeAccess-Control-Allow-Origin: *)

Qu'en est-il des navigateurs qui ne prennent pas en charge les modules?

Utilisez une combinaison detype="module"etnomodule:

<script type="module" src="module.js"></script>
<script nomodule src="fallback.js"></script>

Conclusion

Les modules ES sont l'une des plus grandes fonctionnalités introduites dans les navigateurs modernes. Ils font partie de l'ES6 mais le chemin pour les mettre en œuvre a été long.

Nous pouvons maintenant les utiliser! Mais nous devons également nous rappeler que le fait d'avoir plus de quelques modules va avoir un impact sur les performances de nos pages, car c'est une étape de plus que le navigateur doit effectuer au moment de l'exécution.

Webpacksera probablement toujours un acteur majeur même si les modules ES débarquent dans le navigateur, mais avoir une telle fonctionnalité directement intégrée dans le langage est énorme pour une unification du fonctionnement des modules côté client et sur Node.js également.

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de tutoriels js: