Le Tutoriel de ECMAScript Module (ES6)

View more Tutorials:

1- ES Module

ECMAScript 6 introduit ES6 Module Syntax pour aider des développeurs à modéliser (modularize) leur code. En termes simples, vous pouvez écrire votre code sur des fichiers séparés. Sur ce fichier, vous pouvez exporter les éléments nécessaires dans des module. D'autres fichiers peuvent importer ( import) les module de ce fichier à utiliser.
Module et  import/export sont une excellente idée pour vous aider à gérer et à maintenir facilement le code dans les applications volumineuses. Le code que vous écrivez dans un fichier protégé est accessible à partir d'un autre fichier uniquement lorsqu'il est exporté sous une forme de module.
Pour être simple, je crée ici deux fichiers tels que  es6-module-file.js & es6-file1.js.
  • es6-module-file.js: Ce fichier définit des constantes, des fonctions, des classes, ... Certains sont emballés dans le même module et exportés ce 
    module
  • ​​​​​​​es6-file1.js: un fichier importe quelques module du fichier es6-module-file.js pour utiliser.
se6-module-file.js
// Constants
const HELLO = "Hello Everybody";
const BYE = "Goodbye!";

// Private function (Do not export this function)
function doSomething()  {
   console.log("Do Something");
}

// A Function
let sayHello = function(name)  {
  if(name)  {
    console.log("Hello " + name);
  } else {
    console.log(HELLO);
  }
}

// A Function
let sayGoodbye = function(name)  {
  if(name)  {
    console.log("Goodbye " + name);
  } else {
    console.log(BYE);
  }
}

// Export a Module
export {HELLO, BYE, sayHello, sayGoodbye};

// Export as default Module.
// IMPORTANT!!: Allow at most one 'default'
export default {sayHello, sayGoodbye};
 
Le fichier  es6-file1.js importe quelques  module du fichier  es6-module-file.js :
es6-file1.js
// Import *
import * as myModule from './es6-module-file.js';

console.log( myModule.HELLO ); // Hello Everybody
console.log( myModule.BYE ); // Goodbye!

myModule.sayHello("Tom")  ; // Hello Tom

myModule.sayGoodbye("Tom")  ;// Goodbye Tom
 
Pour tester l'exemple, le moyen le plus simple est à créer un fichier HTML, par exemple, test1.html :
Remarque : Vous devez utiliser  <script type="module"> au lieu d'utiliser  <script type="text/javascript">.
es6-test1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Import/Export</title>

   <!-- IMPORTANT!! type = "module" -->
   <script type="module" src="es6-file1.js"></script>

</head>

<body>
  Show informations in the Console.
</body>

</html>
Vous devez exécuter le fichier  es6-test1.html sur un  HTTP Server, et vous pouvez voir le résultat sur la fenêtre  Console du navigateur. Remarque : ES6 Module ne focntionne pas si vous exécutez le fichier  HTML directement sur le navigateur avec le  schema file:///.

NodeJS!

Si vous recevez l'erreur suivante lors de l'exécution du fichier es6-file1.js sur NodeJS. Vous pouvez voir l'explication à la fin de ce post.
C:\webexamples\node-ecmascript\module\es6-file1.js:2
import * as myModule from './es6-module-file.js';
^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:617:28)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Function.Module.runMain (module.js:694:10)
    at startup (bootstrap_node.js:204:16)
    at bootstrap_node.js:625:3

2- Les syntaxes ES Import

Import Syntaxes
import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
var promise = import("module-name");
Exemple :
es6-file1.js
// Syntax: import * as name from "Module-name or File-path";
import * as myModule from './es6-module-file.js';

console.log( myModule.HELLO ); // Hello Everybody
console.log( myModule.BYE ); // Goodbye!

myModule.sayHello("Tom")  ; // Hello Tom

myModule.sayGoodbye("Tom")  ;// Goodbye Tom
Exemple :
es6-file2.js
// Syntax: import { export1 , export2 } from "Module-name or File-path";
import {sayHello, HELLO} from './es6-module-file.js';

console.log(  HELLO ); // Hello Everybody

sayHello("Tom")  ; // Hello Tom
Exemple :
es6-file3.js
// Syntax: import { export as alias } from "Module-name or File-path";
import {sayHello as mySayHello, HELLO} from './es6-module-file.js';

console.log(  HELLO ); // Hello Everybody

mySayHello("Tom")  ; // Hello Tom
Exemple :
es6-file4.js
// Syntax: import { export as alias } from "Module-name or File-path";
import {sayHello as mySayHello, HELLO} from './es6-module-file.js';

console.log(  HELLO ); // Hello Everybody

mySayHello("Tom")  ; // Hello Tom
 
Exemple :
es6-file5.js
// Syntax: import defaultExport, * as name from "Module-name or File-path";
import myModule, {sayHello, HELLO} from './es6-module-file.js';

console.log(  HELLO ); // Hello Everybody

myModule.sayHello("Tom")  ; // Hello Tom
 

3- NodeJS - CommonJS Module

NodeJS utilise sa propre syntaxe pour exporter et importer un module. Cette syntaxe est généralement appelée " CommonJS Module Syntax". Regardons un exemple utilisant cette syntaxe :
nodejs-module-file.js
// Constants
const HELLO = "Hello Everybody";
const BYE = "Goodbye!";

// Private function (Do not export this function)
function doSomething()  {
   console.log("Do Something");
}

// A Function
let sayHello = function(name)  {
  if(name)  {
    console.log("Hello " + name);
  } else {
    console.log(HELLO);
  }
}

// A Function
let sayGoodbye = function(name)  {
  if(name)  {
    console.log("Goodbye " + name);
  } else {
    console.log(BYE);
  }
}

// Export a Module (CommonJS Module Syntax)
module.exports = {HELLO, BYE, sayHello, sayGoodbye};
Le fichier  nodejs-file1.js importe quelques  module du fichier  nodejs-module-file.js :
nodejs-file1.js
// Import
var myModule = require("./nodejs-module-file.js");

console.log( myModule.HELLO ); // Hello Everybody
console.log( myModule.BYE ); // Goodbye!

myModule.sayHello("Tom")  ; // Hello Tom

myModule.sayGoodbye("Tom")  ;// Goodbye Tom
Exécutez le fichier nodejs-file1.js directement dans l'environnement  NodeJS :

4- ES6 Module dans NodeJS

Plusieur  Module sont utilisés en même temps en  Javascript, par exemple  CommonJS Module Syntax, ES6 Module Syntax,..
  • NodeJS utilise CommonJS Module Syntax pour exporter et importer un module. Spécialement, il utilise le mot-clé module.exports/required() au lieu d'utiliser export/import.
  • ES6 Module Syntax utilise le mot-clé export/import pour exporter et importer un module.
Bien que ES6 Module Syntax ait été introduite dans la version ECMAScript6 (publiée en 2015), la version 11 de NodeJS (publiée en octobre 2018) ne soutient toujours pas cette syntaxe par défaut. Par conséquent, lors de l'exécution du fichier, Javascript utilise ES Module Syntax sur NodeJS. Vous pouvez rencontrer une erreur similaire ci-dessous :
C:\webexamples\node-ecmascript\module\es6-file1.js:1
(function (exports, require, module, __filename, __dirname) { import { sayHello } from './es6-file1.js';
                                                              ^^^^^^

SyntaxError: Unexpected token import
Ici la solution est que vous devez renommer le fichier  *.js en  *.mjs (Module JS). Par exemple, je crée deux fichiers  mjs :
es6node-module-file.mjs
// Constants
const HELLO = "Hello Everybody";
const BYE = "Goodbye!";

// Private function (Do not export this function)
function doSomething()  {
   console.log("Do Something");
}

// A Function
let sayHello = function(name)  {
  if(name)  {
    console.log("Hello " + name);
  } else {
    console.log(HELLO);
  }
}

// A Function
let sayGoodbye = function(name)  {
  if(name)  {
    console.log("Goodbye " + name);
  } else {
    console.log(BYE);
  }
}

// Export a Module
export {HELLO, BYE, sayHello, sayGoodbye};
es6node-file1.mjs
// Import *
import * as myModule from './es6node-module-file.mjs';

console.log( myModule.HELLO ); // Hello Everybody
console.log( myModule.BYE ); // Goodbye!

myModule.sayHello("Tom")  ; // Hello Tom

myModule.sayGoodbye("Tom")  ;// Goodbye Tom
 
Ouvrez les fenêtres  CMD et  CD pour accéder au dossier qui contient les deux fichiers mentionnés au-dessus et exécutez la commande ci-dessous :
node --experimental-modules es6node-file1.mjs

View more Tutorials: