import
Sintassi
Ci sono due tipi di exports:
- Named exports (uno o più exports per modulo)
- Default exports (uno per modulo)
// Export di variabili, funzioni e oggetti singolarmente export let name1, name2, …, nameN; // also var, const export let name1 = …, name2 = …, …, nameN; // also var, const export function functionName(){...} export class ClassName {...} // Export di una lista export { name1, name2, …, nameN }; // Rinominare gli exports export { variable1 as name1, variable2 as name2, …, nameN }; // Exporting destructured assignments with renaming // Export di assegnazioni destrutturate rinominando l'export export const { name1, name2: bar } = o; // DEfault export export default expression; export default function (…) { … } // also class, function* export default function name1(…) { … } // also class, function* export { name1 as default, … }; // Aggregazione di moduli export * from …; // does not set the default export export * as name1 from …; // Draft ECMAScript® 2O21 export { name1, name2, …, nameN } from …; export { import1 as name1, import2 as name2, …, nameN } from …; export { default } from …;
nameN
- Nome che deve essere esportato (così da poter essere importato via
import
in un altro script).
Descrizione
Ci sono due tipi diversi di export, named and default. Puoi avere più named exports per modulo ma solamente un default export.
Named exports:
// Export di variabili, funzioni, oggetti dichiarati precedentemente
export { myFunction, myVariable };
// export individual features (can export var, let,
// const, function, class)
export let myVariable = Math.sqrt(2);
export function myFunction() { ... };
Default exports:
// Export di funzioni dichiarati precedentemente come default
export { myFunction as default };
// Export di singole funzioni, oggetti come default
export default function () { ... }
export default class { .. }
// ogni export sovrascrive il precedente
I named exports sono utili per esportare più valori. Durante l'import, è obbligatorio usare lo stesso nome dell'oggetto corrispondente.
I defalt export invece possono essere importati con qualsiasi nome. Ad esempio:
// file test.js
let k; export default k = 12;
// some other file
import m from './test'; //notare che abbiamo la libertà di importare m invece di importate k, perché k era il default export
console.log(m); // stamperà 12
Puoi anche rinominare i named exports per evitare conflitti:
export { myFunction as function1,
myVariable as variable };
Ri-esportare / Aggregare
È anche possibile importare ed esportare da più moduli nel modulo padre in modo tale da rendere rendere disponibili gli import da quel modulo. In altre parole è possibile creare un modulo che aggreghi i vari export da vari moduli.
È possibile farlo con la sintassi "export from":
export { default as function1,
function2 } from 'bar.js';
che è paragonabile ad una combinazione di import e export:
import { default as function1,
function2 } from 'bar.js';
export { function1, function2 };
dove function1
e function2
non sono disponibili nel modulo corrente.
Note: I seguenti esempi sono sintatticamente invalidi nonostante siano equivalenti dal punto divista del comando import
import DefaultExport from 'bar.js'; // Valid
export DefaultExport from 'bar.js'; // Invalid
Il modo corretto di farlo è di rinominare gli export:
export { default as DefaultExport } from 'bar.js';
Esempi
Usare gli export espliciti
In un modulo my-module.js
, potremmo includere il seguente codice:
// modulo "my-module.js"
function cube(x) {
return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
var graph = {
options: {
color:'white',
thickness:'2px'
},
draw: function() {
console.log('From graph draw function');
}
}
export { cube, foo, graph };
E nel modulo principale incluso nella pagina HTML potremmo avere
import { cube, foo, graph } from './my-module.js';
graph.options = {
color:'blue',
thickness:'3px'
};
graph.draw();
console.log(cube(3)); // 27
console.log(foo); // 4.555806215962888
Notare che:
- È necessario includere questo script nella tua pagina HTML con un elemento
<script>
di type="module", in modo tale che sia riconosciuta come modulo e gestita in modo appropriato - Non è possibile eseguire moduli JS visitando url
file://
perché riceveresti un errore per violazione delle regole CORS. È necessario eseguire questi script tramite un server HTTP
Usare i default export
Se vogliamo esportare un singolo valore o avere un valore di default per il tuo modulo, allora possiamo usare il default export:
// modulo "my-module.js"
export default function cube(x) {
return x * x * x;
}
Quindi, in un altro script, puoi importare il modulo direttamente:
import cube from 'my-module';
console.log(cube(3)); // 27
Usare export from
Facciamo l'esempio dove abbiamo i seguenti moduli:
childModule1.js
: exportamyFunction
emyVariable
childModule2.js
: esportamyClass
parentModule.js
: è nient'altro che l'aggregatore- top level module: utilizza gli export di
parentModule.js
Questo è come sarebbe con il codice:
// Nel modulo childModule1.js
let myFunction = ...; // assegna una funzione myFunction
let myVariable = ...; // assegna un valore alla variabile myVariable
export {myFunction, myVariable};
// Nel modulo childModule2.js
let myClass = ...; // assegna qualcosa di utile a myClass
export myClass;
// Nel modulo parentModule.js
// Aggreghiamo solamente gli export dai moduli childModule1 e childModule2
// per poi riesportarli
export { myFunction, myVariable } from 'childModule1.js';
export { myClass } from 'childModule2.js';
// Nel modulo principale
// Possiamo usare gli export importandoli da un singolo modulo
// che li colleziona/include in un singolo modulo
import { myFunction, myVariable, myClass } from 'parentModule.js'
Specifiche
Compatibilità Browser
BCD tables only load in the browser
Vedi anche
import
- JavaScript modules guide
- 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"