1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
|
---
title: import
slug: Web/JavaScript/Reference/Statements/import
translation_of: Web/JavaScript/Reference/Statements/import
---
<div>{{jsSidebar("Statements")}}</div>
<p>Il comando <code><strong>import</strong></code> si usa per importare bindings esportati da un altro modulo. I moduli importati sono in {{jsxref("Strict_mode","strict mode")}} indipendentemente dal fatto che venga dichiarato in modo esplicito. Il comando <code>import</code> non puo' essere usato negli script embedded.</p>
<h2 id="Sintassi">Sintassi</h2>
<pre class="syntaxbox">import <em>defaultExport</em> from "<em>module-name</em>";
import * as <em>name</em> from "<em>module-name</em>";
import { <em>export </em>} from "<em>module-name</em>";
import { <em>export</em> as <em>alias </em>} from "<em>module-name</em>";
import { <em>export1 , export2</em> } from "<em>module-name</em>";
import { <em>export1 , export2</em> as <em>alias2</em> , <em>[...]</em> } from "<em>module-name</em>";
import <em>defaultExport</em>, { <em>export</em> [ , <em>[...]</em> ] } from "<em>module-name</em>";
import <em>defaultExport</em>, * as <em>name</em> from "<em>module-name</em>";
import "<em>module-name</em>";</pre>
<dl>
<dt><code>defaultExport</code></dt>
<dd>Nome riferito all'export di default nel modulo.</dd>
<dt><code>module-name</code></dt>
<dd>Il modulo da cui importare. E' spesso il path relativo o assoluto del file <code>.js</code> 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.</dd>
<dt><code>name</code></dt>
<dd>Nome dell' oggetto-modulo che verra' usato come namespace quando si fa riferimento nelle importazioni.</dd>
<dt><code>export, exportN</code></dt>
<dd>Nome degli export da importare.</dd>
<dt><code>alias, aliasN</code></dt>
<dd>Nomi fittizi (alias) riferiti ai nomi importati.</dd>
</dl>
<h2 id="Descrizione">Descrizione</h2>
<p>Il parametro <code>name</code> e' il nome dell' "oggetto-modulo" che verra' usato come namespace per riferirsi agli export al suo interno. I parametri <code>export</code> indicano i nomi dei singoli export, mentre <code>import * </code>li importa tutti insieme. Seguiranno degli esempi per chiarire questa sintassi.</p>
<h3 id="Importare_l'intero_contenuto_di_un_modulo">Importare l'intero contenuto di un modulo</h3>
<p>L'esempio inserisce <code>myModule</code> nello scope corrente, che conterra' tutti gli export del modulo, il cui file si trova in <code>/modules/my-module.js</code>.</p>
<pre class="brush: js">import * as <em>myModule</em> from '/modules/my-module.js';
</pre>
<p>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 <code>doAllTheAmazingThings()</code>, lo indicherai in questo modo:</p>
<pre class="brush: js">myModule.doAllTheAmazingThings();</pre>
<h3 id="Importare_un_singolo_export_da_un_modulo">Importare un singolo export da un modulo</h3>
<p>Dato un oggetto o valore di nome <code>myExport</code> che sia esportato dal modulo <code>my-module</code>, sia implicitamente (perche' viene esportato l'intero modulo) che esplicitamente (usando il comando {{jsxref("Statements/export", "export")}}), l'esempio che segue inserira' <code>myExport</code> nello scope corrente.</p>
<pre class="brush: js">import {myExport} from '/modules/my-module.js';</pre>
<h3 id="Importare_export_multipli_da_un_modulo">Importare export multipli da un modulo</h3>
<p>In questo esempio, sia <code>foo</code> che <code>bar</code> verranno inseriti nello scope corrente.</p>
<pre class="brush: js">import {foo, bar} from '/modules/my-module.js';</pre>
<h3 id="Importare_un_export_usando_un_alias">Importare un export usando un alias</h3>
<p>E' possibile rinominare un export in fase di importazione, ad esempio, <code>shortName</code> verra' inserito in questo modo nello scope corrente:</p>
<pre class="brush: js">import {reallyReallyLongModuleExportName as shortName}
from '/modules/my-module.js';</pre>
<h3 id="Rinominare_export_multipli_in_un_importazione">Rinominare export multipli in un importazione</h3>
<p>Importazione multipla di export da un modulo, usando per comodita' degli alias:</p>
<pre class="brush: js">import {
reallyReallyLongModuleExportName as shortName,
anotherLongModuleName as short
} from '/modules/my-module.js';</pre>
<h3 id="Importare_solo_gli_'effetti_collaterali'_di_un_modulo">Importare solo gli 'effetti collaterali' di un modulo</h3>
<p>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.</p>
<pre class="brush: js">import '/modules/my-module.js';
</pre>
<h3 id="Importare_defaults">Importare defaults</h3>
<p>E' possibile che in un modulo ci sia un esportazione di default {{jsxref("Statements/export", "export")}} (che sia un oggetto, una funzione, una classe, ecc...) e il comando <code>import</code> potra' servire per importarlo.</p>
<p>La versione piu' semplice che importa direttamente il default e' questa:</p>
<pre class="brush: js">import myDefault from '/modules/my-module.js';</pre>
<p>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:</p>
<pre class="brush: js">import myDefault, * as myModule from '/modules/my-module.js';
// myModule used as a namespace</pre>
<p>oppure</p>
<pre class="brush: js">import myDefault, {foo, bar} from '/modules/my-module.js';
// specific, named imports
</pre>
<h2 id="Esempi">Esempi</h2>
<p>Importazione di una funzione helper da un modulo secondario che processa una richiesta AJAX JSON.</p>
<h3 id="Modulo_file.js">Modulo: file.js</h3>
<pre class="brush: 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)));
}</pre>
<h3 id="Main_program_main.js">Main program: main.js</h3>
<pre class="brush: js">import { getUsefulContents } from '/modules/file.js';
getUsefulContents('http://www.example.com',
data => { doSomethingUseful(data); });</pre>
<h2 id="Specifiche">Specifiche</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specifica</th>
<th scope="col">Status</th>
<th scope="col">Commento</th>
</tr>
<tr>
<td>{{SpecName('ES2015', '#sec-imports', 'Imports')}}</td>
<td>{{Spec2('ES2015')}}</td>
<td>Definizione iniziale.</td>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-imports', 'Imports')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Compatibilitá">Compatibilitá</h2>
<p>{{Compat("javascript.statements.import")}}</p>
<h2 id="Vedi_anche">Vedi anche</h2>
<ul>
<li>{{jsxref("Statements/import.meta", "import.meta")}}</li>
<li>{{jsxref("Statements/export", "export")}}</li>
<li><a href="https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond/">Previewing ES6 Modules and more from ES2015, ES2016 and beyond</a></li>
<li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li>
<li><a href="https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/">ES modules: A cartoon deep-dive</a>, Hacks blog post by Lin Clark</li>
<li><a class="external" href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li>
</ul>
|
