Moduli ES6 in JavaScript: come funzionano import ed export

In questo capitolo affrontiamo i moduli e le importazioni/esportazioni in JavaScript. Vedremo come usarli per organizzare e condividere il codice in modo più efficace, e come importare ed esportare dati fra file diversi in tutta sicurezza. Il tutto con esempi concreti e pratici, da riprendere direttamente nel tuo codice.

I moduli e le importazioni/esportazioni fanno parte della specifica ECMAScript 6 (ES6), introdotta nel 2015. Tutti i browser attuali li supportano nativamente: un transpiler come Babel o un bundler come Webpack serve ormai solo per i browser molto vecchi, o per raggruppare i file.

Che cos’è un modulo in JavaScript (ES6)?

I moduli sono un modo di strutturare e organizzare il codice suddividendolo in file indipendenti. Il risultato è un codice più facile da capire e da mantenere nel tempo, più leggibile e con parti molto più riutilizzabili.

Principio dei moduli e vantaggi

Il principio dei moduli si basa sull’istruzione «export», che rende alcune parti del codice accessibili dall’esterno del modulo. Puoi così nascondere ciò che non serve a chi lo utilizza ed esportare solo gli elementi pertinenti.

I vantaggi sono numerosi. Prima di tutto eviti i conflitti di nomi, perché ogni parte del codice resta isolata: comodo soprattutto quando lavori in team su un progetto di grandi dimensioni. Poi organizzi e strutturi meglio il codice, distribuendolo su file più facili da mantenere. Infine lo riutilizzi senza fatica, importandolo in altri progetti.

Creare un modulo con l’istruzione “export”

Per creare un modulo in JavaScript basta mettere l’istruzione «export» davanti agli elementi che vuoi rendere accessibili dall’esterno. Per esempio, per esportare una funzione «saluer» definita in un file module.js, scrivi:

export function saluer() {
  console.log("Bonjour !");
}

Puoi anche esportare più elementi dello stesso modulo, mettendo l’istruzione «export» davanti a ciascuno di essi. Per esempio:

export const maVariable = 'ma variable';
export function maFonction() {
  console.log('Je suis une fonction');
}
export class MaClasse {
  constructor() {
    console.log('Je suis une classe');
  }
}

Esiste inoltre l’istruzione «export default», che designa l’elemento predefinito del modulo. Se non importi esplicitamente un elemento, verrà importato quello predefinito. Per esempio:

export default function maFonctionParDefaut() {
  console.log('Je suis la fonction par défaut');
}

Come importare un modulo in JavaScript (ES6)?

La gestione dei moduli in JavaScript permette di separare il codice in più file e di organizzare il progetto in modo più efficace. Più sopra abbiamo visto come esportare un modulo con l’istruzione export. Ma come si importa un modulo nel proprio codice? È quello che vediamo in questa sezione.

Usare l’istruzione “import”

Per importare un modulo in JavaScript si usa l’istruzione import. Ecco un esempio d’uso:

import * as monModule from '/chemin/vers/mon/module';

Questa sintassi importa tutti gli elementi del modulo monModule e li raccoglie in un oggetto con lo stesso nome. Puoi anche indicare quali elementi importare, elencandoli fra parentesi graffe dopo l’istruzione import:

import { maFonction, maVariable } from '/chemin/vers/mon/module';

È possibile anche importare elementi con nome assegnando loro un alias, con la sintassi «{ nom1 as alias1, nom2 as alias2 }» dopo l’istruzione «import», così:

import { nom1 as alias1, nom2 as alias2 } from 'module';

Per importare una classe o una funzione esportata con export default fai così:

export

export default class MonModule {
  constructor() {
    console.log('Je suis une classe');
  }
}

import MonModule from 'module';

Quando nello stesso modulo usi sia l’importazione predefinita sia quella con nome, conviene scrivere prima quella predefinita, così:

import MonModule, { maFonction } from './monModule';

// uso dell'importazione predefinita
const monModule = new MonModule();

// uso dell'importazione con nome
maFonction();

Infine puoi ricorrere all’importazione dinamica con «import()», che carica un modulo in modo asincrono. È utile quando vuoi caricare un modulo solo nel momento in cui serve davvero, per non appesantire inutilmente il browser.

import('./monModule').then(monModule => {
  // uso degli elementi importati
  monModule.maFonction();
  monModule.maVariable;
});

Come usare i moduli nel browser?

Abbiamo visto come creare ed esportare moduli con l’istruzione «export» e come importarli con l’istruzione «import». Queste istruzioni, però, non sono ancora supportate da tutti i browser. Per usare i moduli in un browser esistono diverse soluzioni, presentate in questa sezione.

Usare l’attributo “type=module” nei tag “script”

Per usare i moduli nel browser devi indicare l’attributo «type=module» nel tag «script» del tuo file JavaScript. Dice al browser che il file è un modulo e che va trattato diversamente da uno script normale. Ecco un esempio di codice:

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

module.js

export const maVariable = 'ma variable';
export function maFonction() {
  console.log('Je suis une fonction');
}
export class MaClasse {
  constructor() {
    console.log('Je suis une classe');
  }
}

script.js

import { maVariable, maFonction, MaClasse } from './module.js';

console.log(maVariable); // Mostra 'ma variable'

Usare un bundler come Webpack

Un altro modo di caricare i moduli nel browser è ricorrere a un bundler. Un bundler è uno strumento che raggruppa più moduli e file JavaScript in un unico file, più facile da caricare per il browser. Webpack è un bundler molto diffuso, con parecchie funzionalità avanzate per la gestione dei moduli. Se vuoi imparare a usare Webpack, ho scritto un tutorial dedicato.

Conclusione

Abbiamo visto come creare un modulo con l’istruzione «export» e come importarlo con l’istruzione «import». Abbiamo visto anche come gestire i percorsi e l’ambiente durante l’importazione dei moduli, oltre all’uso delle importazioni/esportazioni predefinite e con nome. Infine, come usare i moduli nel browser con l’attributo «type=module» nei tag «script».

Questo tutorial ti ha dato le basi per iniziare a programmare in JavaScript e ti ha fatto capire i concetti chiave del linguaggio. Da qui puoi proseguire il tuo percorso e specializzarti in un ambito preciso, come lo sviluppo web. Buono studio e in bocca al lupo per i tuoi prossimi progetti!