JavaScript
moduli

Sintassi

• import defaultMember da 'module';
• import {memberA, memberB, ...} da 'module';
• import * come modulo da 'module';
• import {memberA as a, memberB, ...} da 'module';
• import defaultMember, * as module from 'module';
• import defaultMember, {moduleA, ...} da 'module';
• importare 'modulo';

Osservazioni

Esportazioni predefinite

Oltre alle importazioni con nome, puoi fornire un'esportazione predefinita.

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

È possibile utilizzare una sintassi semplificata per importare l'esportazione predefinita.

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

Si noti che un'esportazione predefinita è implicitamente equivalente a un'esportazione denominata con il nome default e che l'associazione importata ( circleArea sopra) è semplicemente un alias. Il modulo precedente può essere scritto come

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

È possibile avere solo un'esportazione predefinita per modulo. Il nome dell'esportazione predefinita può essere omesso.

// 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;
}

Importazione con effetti collaterali

A volte hai un modulo che vuoi solo importare e quindi eseguire il codice di primo livello. Questo è utile per polyfill, altri globali o configurazione che viene eseguita una sola volta quando viene importato il modulo.

Dato un file chiamato test.js :

console.log('Initializing...')

Puoi usarlo in questo modo:

import './test'

Questo esempio stamperà Initializing... sulla console.

Definire un modulo

In ECMAScript 6, quando si utilizza la sintassi del modulo ( import / export ), ogni file diventa il proprio modulo con uno spazio dei nomi privato. Le funzioni e le variabili di livello superiore non inquinano lo spazio dei nomi globale. Per esporre funzioni, classi e variabili per altri moduli da importare, è possibile utilizzare la parola chiave 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() {}
}

Nota: i file JavaScript ES5 caricati tramite i tag <script> rimarranno gli stessi quando non si utilizza l' import / export .

Solo i valori che vengono esportati in modo esplicito saranno disponibili al di fuori del modulo. Tutto il resto può essere considerato privato o inaccessibile.

L'importazione di questo modulo produrrebbe (assumendo che il precedente blocco di codice sia in 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

Importazione di membri con nome da un altro modulo

Dato che il modulo della sezione Definire un modulo esiste nel file test.js , puoi importarlo da quel modulo e usare i suoi membri esportati:

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

doSomething()

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

console.log(PI)

Il metodo somethingPrivate() non è stato esportato dal modulo di test , quindi il tentativo di importarlo fallirà:

import {somethingPrivate} from './test'

somethingPrivate()

Importare un intero modulo

Oltre a importare i membri denominati da un modulo o l'esportazione predefinita di un modulo, puoi anche importare tutti i membri in un bind di namespace.

import * as test from './test'

test.doSomething()

Tutti i membri esportati sono ora disponibili sulla variabile di test . I membri non esportati non sono disponibili, così come non sono disponibili con importazioni di membri con nome.

Nota: il percorso del modulo './test' è risolto dal loader e non è coperto dalle specifiche ECMAScript - questa potrebbe essere una stringa per qualsiasi risorsa (un percorso - relativo o assoluto - su un filesystem, un URL per un risorsa di rete o qualsiasi altro identificatore di stringa).

Importazione di membri con nome con alias

A volte potresti incontrare membri con nomi di membri veramente lunghi, come ad esempio thisIsWayTooLongOfAName() . In questo caso, puoi importare il membro e assegnargli un nome più breve da utilizzare nel modulo corrente:

import {thisIsWayTooLongOfAName as shortName} from 'module'

shortName()

Puoi importare più nomi di membri lunghi come questo:

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

shortName()
console.log(otherName)

Infine, puoi combinare gli alias di importazione con l'importazione normale dei membri:

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

shortName()
console.log(PI)

Esportazione di più membri con nome

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

export { namedMember1, namedMember2, namedMember3 }