ES6 - Modules

introduction

Considérez un scénario dans lequel des parties du code JavaScript doivent être réutilisées. ES6 vient à votre secours avec le concept de Modules.

Un module organise un ensemble de code JavaScript associé. Un module peut contenir des variables et des fonctions. Un module n'est rien de plus qu'un morceau de code JavaScript écrit dans un fichier. Par défaut, les variables et les fonctions d'un module ne sont pas disponibles. Les variables et les fonctions d'un module doivent être exportées pour pouvoir y accéder à partir d'autres fichiers. Les modules dans ES6 fonctionnent uniquement dansstrict mode. Cela signifie que les variables ou fonctions déclarées dans un module ne seront pas accessibles globalement.

Exporter un module

Le mot-clé export peut être utilisé pour exporter des composants dans un module. Les exportations d'un module peuvent être classées comme suit -

  • Exportations nommées
  • Exportations par défaut

Exportations nommées

Les exportations nommées se distinguent par leur nom. Il peut y avoir plusieurs exportations nommées dans un module. Un module peut exporter des composants sélectionnés en utilisant la syntaxe donnée ci-dessous -

Syntax 1

//using multiple export keyword
export component1
export component2
...
...
export componentN

Syntax 2

Sinon, les composants d'un module peuvent également être exportés à l'aide d'un seul mot-clé d'exportation avec la syntaxe de liaison {} comme indiqué ci-dessous -

//using single export keyword

export {component1,component2,....,componentN}

Exportations par défaut

Les modules qui n'ont besoin d'exporter qu'une seule valeur peuvent utiliser les exportations par défaut. Il ne peut y avoir qu'une seule exportation par défaut par module.

Syntax

export default component_name

Cependant, un module peut avoir une exportation par défaut et plusieurs exportations nommées en même temps.

Importer un module

Pour pouvoir consommer un module, utilisez le import keyword. Un module peut avoir plusieursimport statements.

Importation d'exportations nommées

Lors de l'importation d'exportations nommées, les noms des composants correspondants doivent correspondre.

Syntax

import {component1,component2..componentN} from module_name

Cependant, lors de l'importation d'exportations nommées, elles peuvent être renommées à l'aide du mot clé as. Utilisez la syntaxe donnée ci-dessous -

import {original_component_name as new_component_name }

Toutes les exportations nommées peuvent être importées sur un objet en utilisant l'astérisque * operator.

import * as variable_name from module_name

Importation des exportations par défaut

Contrairement aux exportations nommées, une exportation par défaut peut être importée avec n'importe quel nom.

Syntax

import any_variable_name from module_name

Exemple: exportations nommées

Step 1 - Créez un fichier company1.js et ajoutez le code suivant -

let company = "TutorialsPoint"

let getCompany = function(){
   return company.toUpperCase()
}

let setCompany = function(newValue){
   company = newValue
}

export {company,getCompany,setCompany}

Step 2- Créez un fichier company2.js. Ce fichier consomme des composants définis dans le fichier company1.js. Utilisez l'une des approches suivantes pour importer le module.

Approach 1

import {company,getCompany} from './company1.js'

console.log(company)
console.log(getCompany())

Approach 2

import {company as x, getCompany as y} from './company1.js'

console.log(x)
console.log(y())

Approach 3

import * as myCompany from './company1.js'

console.log(myCompany.getCompany())
console.log(myCompany.company)

Step 3 - Exécutez les modules à l'aide d'un fichier HTML

Pour exécuter les deux modules, nous devons créer un fichier html comme indiqué ci-dessous et l'exécuter sur un serveur en direct. Notez que nous devrions utiliser leattribute type="module" dans la balise script.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<body>
   <script src="./company2.js" type="module"></script>
</body>
</html>

La sortie du code ci-dessus sera comme indiqué ci-dessous -

TutorialsPoint
TUTORIALSPOINT

Exportation par défaut

Step 1 - Créer un fichier company1.js et ajoutez le code suivant -

let name = 'TutorialsPoint'

let company = {
   getName:function(){
      return name
   },
   setName:function(newName){
      name = newName
   }
}

export default company

Step 2 - Créer un fichier company2.js. Ce fichier consomme les composants définis dans le fichier company1.js.

import c from './company1.js'
console.log(c.getName())
c.setName('Google Inc')
console.log(c.getName())

Step 3 - Exécutez le modules en utilisant un HTML file

Pour exécuter les deux modules, nous devons créer un fichier html comme indiqué ci-dessous et l'exécuter sur un serveur en direct. Notez que nous devrions utiliser leattribute type="module" dans la balise script.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<body>
   <script src="./company2.js" type="module"></script>
</body>
</html>

La sortie du code ci-dessus sera comme mentionné ci-dessous -

TutorialsPoint
Google Inc

Exemple: combinaison d'exportations par défaut et nommées

Step 1 - Créer un fichier company1.js et ajoutez le code suivant -

//named export
export let name = 'TutorialsPoint'

let company = {
   getName:function(){
      return name
   },
   setName:function(newName){
      name =newName
   }
}
//default export
export default company

Step 2 - Créer un fichier company2.js. Ce fichier consomme les composants définis dans lecompany1.jsfichier. Importez d'abord l'exportation par défaut, suivie des exportations nommées.

import c, {name} from './company1.js'

console.log(name)
console.log(c.getName())
c.setName("Mohtashim")
console.log(c.getName())

Step 3 - Exécutez les modules à l'aide d'un fichier HTML

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
   </head>
   <body>
      <script src="company2.js" type="module"></script>
   </body>
</html>

La sortie du code ci-dessus sera comme indiqué ci-dessous -

TutorialsPoint
TutorialsPoint
Mohtashim