--- title: export slug: Web/JavaScript/Reference/Statements/export tags: - ECMAScript 2015 - JavaScript - Moduli - export translation_of: Web/JavaScript/Reference/Statements/export ---
{{jsSidebar("Statements")}}
Il comando export è utilizzato per esportare funzioni, oggetti o tipi primitivi da un dato file (o modulo) in modo tale da poter essere riutilizzati in altri file con il comando {{jsxref("Statements/import", "import")}}
I moduli sono esportati sempre in {{jsxref("Strict_mode","strict mode", "", 1)}}  nonostante non sia dichiarato. Il comando export non può essere usato in embedded scripts.

Sintassi

Ci sono due tipi di exports:

  1. Named exports (uno o più exports per modulo)
  2. 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:

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:

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

Specifiche
{{SpecName('ESDraft', '#sec-exports', 'Exports')}}

Compatibilità Browser

{{Compat("javascript.statements.export")}}

Vedi anche