JavaScript
Modules

Syntaxe

• import defaultMember de 'module';
• import {memberA, memberB, ...} de 'module';
• import * comme module de 'module';
• import {memberA en tant que, memberB, ...} de 'module';
• import defaultMember, * en tant que module de 'module';
• import defaultMember, {moduleA, ...} de 'module';
• importer 'module';

Remarques

Exportations par défaut

Outre les importations nommées, vous pouvez fournir une exportation par défaut.

// circle.js
export const PI = 3.14;
export default function area(radius) {
    return PI * radius * radius;
}

Vous pouvez utiliser une syntaxe simplifiée pour importer l'exportation par défaut.

import circleArea from './circle';
console.log(circleArea(4));

Notez qu'une exportation par défaut est implicitement équivalente à une exportation nommée avec le nom default , et la liaison importée ( circleArea ci-dessus) est simplement un alias. Le module précédent peut être écrit comme

import { default as circleArea } from './circle';
console.log(circleArea(4));

Vous ne pouvez avoir qu'une exportation par défaut par module. Le nom de l'exportation par défaut peut être omis.

// named export: must have a name
export const PI = 3.14;

// default export: name is not required
export default function (radius) {  
    return PI * radius * radius;
}

Importer avec des effets secondaires

Parfois, vous avez un module que vous souhaitez uniquement importer pour que son code de premier niveau soit exécuté. Ceci est utile pour les polyfills, les autres globals ou la configuration qui ne s'exécute qu'une seule fois lorsque votre module est importé.

Étant donné un fichier nommé test.js :

console.log('Initializing...')

Vous pouvez l'utiliser comme ceci:

import './test'

Cet exemple imprimera Initializing... sur la console.

Définir un module

Dans ECMAScript 6, lorsque vous utilisez la syntaxe du module ( import / export ), chaque fichier devient son propre module avec un espace de noms privé. Les fonctions et variables de niveau supérieur ne polluent pas l'espace de noms global. Pour exposer des fonctions, des classes et des variables à importer par d'autres modules, vous pouvez utiliser le mot clé export .

// not exported
function somethingPrivate() {
    console.log('TOP SECRET')
}


export const PI = 3.14;

export function doSomething() {
    console.log('Hello from a module!')
}

function doSomethingElse(){ 
    console.log("Something else")
}

export {doSomethingElse}

export class MyClass {
    test() {}
}

Remarque: les fichiers JavaScript ES5 chargés via les balises <script> resteront les mêmes lorsque vous n'utilisez pas l' import / export .

Seules les valeurs explicitement exportées seront disponibles en dehors du module. Tout le reste peut être considéré comme privé ou inaccessible.

Importer ce module donnerait (en supposant que le bloc de code précédent est dans my-module.js ):

import * as myModule from './my-module.js';

myModule.PI;                 // 3.14
myModule.doSomething();      // 'Hello from a module!'
myModule.doSomethingElse();  // 'Something else'
new myModule.MyClass();      // an instance of MyClass
myModule.somethingPrivate(); // This would fail since somethingPrivate was not exported

Importation de membres nommés depuis un autre module

Étant donné que le module de la section Définir un module existe dans le fichier test.js , vous pouvez importer depuis ce module et utiliser ses membres exportés:

import {doSomething, MyClass, PI} from './test'

doSomething()

const mine = new MyClass()
mine.test()

console.log(PI)

La méthode somethingPrivate() n’a pas été exportée à partir du module de test Toute tentative d’importation échouera:

import {somethingPrivate} from './test'

somethingPrivate()

Importer un module entier

En plus d'importer des membres nommés à partir d'un module ou de l'exportation par défaut d'un module, vous pouvez également importer tous les membres dans une liaison d'espace de noms.

import * as test from './test'

test.doSomething()

Tous les membres exportés sont désormais disponibles sur la variable de test . Les membres non exportés ne sont pas disponibles, tout comme ils ne sont pas disponibles avec les importations de membres nommés.

Remarque: Le chemin d'accès au module './test' est résolu par le chargeur et n'est pas couvert par la spécification ECMAScript - il peut s'agir d'une chaîne vers une ressource (un chemin - relatif ou absolu - sur un système de fichiers, une URL vers un ressource réseau ou tout autre identifiant de chaîne).

Importation de membres nommés avec des alias

Parfois, vous pouvez rencontrer des membres qui ont des noms de membres très longs, tels que thisIsWayTooLongOfAName() . Dans ce cas, vous pouvez importer le membre et lui donner un nom plus court à utiliser dans votre module actuel:

import {thisIsWayTooLongOfAName as shortName} from 'module'

shortName()

Vous pouvez importer plusieurs noms de membres longs comme ceci:

import {thisIsWayTooLongOfAName as shortName, thisIsAnotherLongNameThatShouldNotBeUsed as otherName} from 'module'

shortName()
console.log(otherName)

Et enfin, vous pouvez mélanger les alias d’import avec l’importation normale des membres:

import {thisIsWayTooLongOfAName as shortName, PI} from 'module'

shortName()
console.log(PI)

Exportation de plusieurs membres nommés

const namedMember1 = ...
const namedMember2 = ...
const namedMember3 = ...

export { namedMember1, namedMember2, namedMember3 }