import

Lo statement import è usato per importare funzioni, oggetti o primitive che sono state esportate da un modulo esterno, un'altro script, ecc.

Sintassi

import defaultMember from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as name from "module-name";
import "module-name";

name

Nome dell'oggetto che riceverà i valori importati

member, memberN

Nome dei membri esportati da importare.

defaultMember

Nome dell'oggetto che riceverà l'esportazione di default dal modulo.

alias, aliasN

Nome dell'oggetto che riceverà la proprietà importata.

module-name

Il nome del modulo da importare. Si tratta di un nome di file.

Descrizione

Il parametro name è il nome dell'oggetto che riceverà i membri esportati. I parametri dei membri specificano i singoli membri, mentre il parametro nome li importa tutti. name può anche essere una funzione se il modulo esporta un solo parametro di default, piuttosto che una serie di membri. Di seguito sono riportati esempi per chiarire la sintassi.

Importare l'intero contenuto di un modulo. Questo inserisce myModule nello scope corrente, che contiene tutte le associazioni esportate da "my-module.js"

import * as myModule from "my-module";

Importare un singolo membro di un modulo. Questo inserisce myMember nello scope corrente.

import {myMember} from "my-module";

Importare più membri di un modulo. Questo inserisce sia foo e bar  nello scope corrente.

import {foo, bar} from "my-module";

Importare un membro utilizzando uno pseudonimo. Questo inserisce shortName nello scope corrente.

import {reallyReallyLongModuleMemberName as shortName} from "my-module";

Import an entire module for side effects only, without importing any bindings.

import "my-module";

Importare più membri di un modulo usando diversi pseudonimi.

import {reallyReallyLongModuleMemberName as shortName, anotherLongModuleName as short} from "my-module";

Importing defaults

It is possible to have default export (whether it is an object, a function, a class, etc.). Reciprocally, it is possible to use the import instruction to import such defaults.

The simplest version directly imports the default:

import myDefault from "my-module";

It is also possible to use the default syntax with the ones seen above (namespace imports or named imports). In such cases, the default import will have to be declared first. For instance:

import myDefault, * as myModule from "my-module";
// myModule used as a namespace

or

import myDefault, {foo, bar} from "my-module";
// specific, named imports

Examples

Importing a secondary file to assist in processing an AJAX JSON request.

// --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.js--
import { getUsefulContents } from "file";
getUsefulContents("http://www.example.com", data => {
  doSomethingUseful(data);
});

Specifications

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

[1] See bug 568953.

[2] See Chromium bug 1569

[3] Behind the "Enable experimental JavaScript features" flag

See also

• export
• Previewing ES6 Modules and more from ES2015, ES2016 and beyond
• ES6 in Depth: Modules, Hacks blog post by Jason Orendorff
• Axel Rauschmayer's book: "Exploring JS: Modules"