MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Questa traduzione è incompleta. Collabora alla traduzione di questo articolo dall’originale in lingua inglese.

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

Nota:  Fino ad ora questa caratteristica non è stata implementata nativamente in alcun browser. Tuttavia è implementata in molti transpilers, come Traceur CompilerBabel o Rollup.

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

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Imports' in that specification.
Standard Initial definition.
ECMAScript Latest Draft (ECMA-262)
The definition of 'Imports' in that specification.
Draft  

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support No support[2] Build 14342[3] No support[1] No support No support No support
Feature Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support No support 36.0 No support No support No support No support 36.0

[1] See bug 568953.

[2] See Chromium bug 1569

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

See also

Tag del documento e collaboratori

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