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.

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.

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.

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();

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';

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

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

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';

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

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

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';

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

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

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

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

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

• 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"