Il comando import si usa per importare bindings esportati da un altro modulo. I moduli importati sono in strict mode indipendentemente dal fatto che venga dichiarato in modo esplicito. Il comando import non puo' essere usato negli script embedded.

Sintassi

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 { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
defaultExport
Nome riferito all'export di default nel modulo.
module-name
Il modulo da cui importare. E' spesso il path relativo o assoluto del file .js che contiene il modulo. Alcuni bundlers possono permettere o imporre l'uso dell'estensione; verifica nel tuo environment. Sono ammesse solo stringhe a singole o doppie virgolette.
name
Nome dell' oggetto-modulo che verra' usato come namespace quando si fa riferimento nelle importazioni.
export, exportN
Nome degli export da importare.
alias, aliasN
Nomi fittizi (alias) riferiti ai nomi importati.

Descrizione

Il parametro name e' il nome dell' "oggetto-modulo" che verra' usato come namespace per riferirsi agli export al suo interno. I parametri export indicano i nomi dei singoli export, mentre import * li importa tutti insieme. Seguiranno degli esempi per chiarire questa sintassi.

Importare l'intero contenuto di un modulo

L'esempio inserisce myModule nello scope corrente, che conterra' tutti gli export del modulo, il cui file si trova in /modules/my-module.js.

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

Qui invece, si accede agli export usando il nome del modulo ("myModule" in this case) come namespace. Per esempio, se il modulo importato contiene l'export doAllTheAmazingThings(), lo indicherai in questo modo:

myModule.doAllTheAmazingThings();

Importare un singolo export da un modulo

Dato un oggetto o valore di nome myExport che sia esportato dal modulo my-module, sia implicitamente (perche' viene esportato l'intero modulo) che esplicitamente (usando il comando export), l'esempio che segue inserira' myExport nello scope corrente.

import {myExport} from '/modules/my-module.js';

Importare export multipli da un modulo

In questo esempio, sia foo che bar verranno inseriti nello scope corrente.

import {foo, bar} from '/modules/my-module.js';

Importare un export usando un alias

E' possibile rinominare un export in fase di importazione, ad esempio, shortName verra' inserito in questo modo nello scope corrente:

import {reallyReallyLongModuleExportName as shortName}
  from '/modules/my-module.js';

Rinominare export multipli in un importazione

Importazione multipla di export da un modulo, usando per comodita' degli alias:

import {
  reallyReallyLongModuleExportName as shortName,
  anotherLongModuleName as short
} from '/modules/my-module.js';

Importare solo gli 'effetti collaterali' di un modulo

Importazione dei soli 'effetti collaterali' di un modulo, senza importare tutto il resto. Cio' che segue eseguira' soltanto il codice nello scope globale ma senza importare alcun valore.

import '/modules/my-module.js';

Importare defaults

E' possibile che in un modulo ci sia un esportazione di default export (che sia un oggetto, una funzione, una classe, ecc...) e il comando import potra' servire per importarlo.

La versione piu' semplice che importa direttamente il default e' questa:

import myDefault from '/modules/my-module.js';

E' possibile usare questa sintassi all'interno delle altre che abbiamo gia' visto (importazioni con namespace o nomi specifici) ma, in questo caso, l'importazione di default dovra' essere indicata per prima:

import myDefault, * as myModule from '/modules/my-module.js';
// myModule used as a namespace

oppure

import myDefault, {foo, bar} from '/modules/my-module.js';
// specific, named imports

Esempi

Importazione di una funzione helper da un modulo secondario che processa una richiesta AJAX JSON.

Modulo: file.js

function getJSON(url, callback) {
  let xhr = new XMLHttpRequest();
  xhr.onload = function () { 
    callback(this.responseText) 
  };
  xhr.open('GET', url, true);
  xhr.send();
}

export function getUsefulContents(url, callback) {
  getJSON(url, data => callback(JSON.parse(data)));
}

Main program: main.js

import { getUsefulContents } from '/modules/file.js';

getUsefulContents('http://www.example.com',
    data => { doSomethingUseful(data); });

Specifiche

Specifica Status Commento
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Imports' in that specification.
Standard Definizione iniziale.
ECMAScript Latest Draft (ECMA-262)
The definition of 'Imports' in that specification.
Draft  

Compatibilitá

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung InternetNode.js
Basic supportChrome Full support 61Edge Full support 16
Full support 16
Full support 15
Disabled
Disabled From version 15: this feature is behind the Experimental JavaScript Features preference.
Firefox Full support 60
Full support 60
No support 54 — 60
Disabled
Disabled From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 47Safari Full support 10.1WebView Android No support NoChrome Android Full support 61Edge Mobile Full support YesFirefox Android Full support 60
Full support 60
No support 54 — 60
Disabled
Disabled From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android Full support 47Safari iOS Full support 10.1Samsung Internet Android No support Nonodejs Full support 8.5.0
Notes Disabled
Full support 8.5.0
Notes Disabled
Notes files must have suffix .mjs, not .js
Disabled From version 8.5.0: this feature is behind the --experimental-modules runtime flag.
Dynamic importChrome Full support 63Edge No support No
Notes
No support No
Notes
Notes See development status.
Firefox No support No
Notes
No support No
Notes
Notes See bug 1342012.
IE No support NoOpera Full support 50Safari Full support 11.1WebView Android Full support 63Chrome Android Full support 63Edge Mobile No support NoFirefox Android No support No
Notes
No support No
Notes
Notes See bug 1342012.
Opera Android Full support 50Safari iOS Full support 11.1Samsung Internet Android ? nodejs ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

Vedi anche

Tag del documento e collaboratori

Hanno collaborato alla realizzazione di questa pagina: f4bo, tegola, star-ter-js
Ultima modifica di: f4bo,