export

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 import
I moduli sono esportati sempre in strict mode  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:

  • √ą 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: exporta myFunction e myVariable
  • childModule2.js: esporta myClass
  • 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