import
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 (ECMA-262) The definition of 'Imports' in that specification. |
Living Standard |
Compatibilitá
BCD tables only load in the browser
Vedi anche
import.meta
export
- Previewing ES6 Modules and more from ES2015, ES2016 and beyond
- ES6 in Depth: Modules, Hacks blog post by Jason Orendorff
- ES modules: A cartoon deep-dive, Hacks blog post by Lin Clark
- Axel Rauschmayer's book: "Exploring JS: Modules"