export

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).

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 };

È 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.

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';

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

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

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'

• 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"