Quante volte capita di trovarci di fronte a file JavaScript di centinaia, se non migliaia, di righe di codice contenenti le più disparate funzioni e funzionalità (a volte anche duplicate)? Un'entropia destinata a crescere nel tempo, che rende ben presto il codice difficile da manutenere.

Iniziamo questa breve serie di script parlando degli ES module.

I moduli JavaScript sono file che espongono, utilizzando il termine export, funzioni, variabili, classi o oggetti. Possono essere utilizzati all'interno di più file o importati della pagina HTML, rendendo le loro funzionalità disponibili globalmente.

//module.js
const a = 1

function sum(num) {
  return num + 1;
}

export { a, sum }

Avendo dichiarato di voler esporre la variabile a e la funzione sum, possiamo utilizzare la keyword import per utilizzarle all'interno di un altro file JavaScript.

// import 'a' e 'sum' utilizzando un alias
import { a, sum as s } from 'module'

var x = s(a);

Possiamo referenziare il file anche all'interno del documento HTML aggiungendo, come da specifiche, l'attributo type="module" al tag script.

<script type="module" src="module.js"></script>