Ricerca…


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

Da MDN (enfasi aggiunta):

Questa funzione non è implementata in nessun browser in questo momento . È implementato in molti transpilers, come il Traceur Compiler , Babel o Rollup .

Molti transporter sono in grado di convertire la sintassi del modulo ES6 in CommonJS per l'utilizzo nell'ecosistema del nodo o RequireJS o System.js per l'utilizzo nel browser.

È anche possibile utilizzare un bundler di moduli come Browserify per combinare un insieme di moduli CommonJS interdipendenti in un singolo file che può essere caricato nel browser.

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 }


Modified text is an extract of the original Stack Overflow Documentation
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow