Moduli JavaScript: import, export e organizzazione

Sei stanco di navigare in file JavaScript infiniti da 3000 righe? La gestione del codice “spaghetti” è un problema che ogni sviluppatore affronta, ma la soluzione esiste ed è standard: i moduli JavaScript (ES Modules), il sistema nativo per superare il caos dei file monolitici e dello scope globale.

Fino a pochi anni fa, per dividere il codice in più file dovevamo affidarci a tag <script> multipli o librerie esterne. Oggi, grazie allo standard ECMAScript 2015 (ES6), abbiamo un sistema nativo potente ed elegante per gestire la modularità.

In questa guida imparerai a padroneggiare la sintassi di import ed export per trasformare il tuo caos in un’architettura software professionale e scalabile.

Cos’è un modulo in JavaScript

I moduli ES6 sono semplicemente file JavaScript che vivono nel proprio scope locale. Questo significa che variabili, funzioni e classi definite in un modulo non sono visibili all’esterno, a meno che tu non decida esplicitamente di esportarle.

Utilizzare i moduli offre tre vantaggi cruciali:

• Manutenibilità: Codice diviso in piccoli pezzi logici facili da gestire.
• Namespace pulito: Eviti conflitti di nomi nel Global Scope (niente più variabili sovrascritte per errore!).
• Riutilizzabilità: Scrivi una funzione una volta, la importi ovunque.

Come usare export nei moduli JavaScript

Per rendere disponibile una parte del tuo codice ad altri file, devi usare la keyword export. Esistono due tipi principali di esportazione che devi conoscere.

1. Named export (esportazioni nominate)

I Named Exports sono ideali quando vuoi esportare più valori da un singolo file (come una libreria di utility). Devono essere importati con il loro nome esatto.

// file: mathUtils.js

// Esportazione inline
export const PI_GRECO = 3.14159;

export function somma(a, b) {
    return a + b;
}

// Esportazione multipla alla fine
const sottrai = (a, b) => a - b;
const moltiplica = (a, b) => a * b;

export { sottrai, moltiplica };

// file: mathUtils.js

// Esportazione inline
export const PI_GRECO = 3.14159;

export function somma(a, b) {
    return a + b;
}

// Esportazione multipla alla fine
const sottrai = (a, b) => a - b;
const moltiplica = (a, b) => a * b;

export { sottrai, moltiplica };

2. Default export (esportazione predefinita)

Il Default Export è progettato per moduli che fanno “una cosa sola”, come una Classe o un Componente React. Puoi avere solo un export default per file.

// file: Utente.js

export default class Utente {
    constructor(nome) {
        this.nome = nome;
    }

    saluta() {
        return `Ciao, sono ${this.nome}`;
    }
}

// file: Utente.js

export default class Utente {
    constructor(nome) {
        this.nome = nome;
    }

    saluta() {
        return `Ciao, sono ${this.nome}`;
    }
}

Come usare import nei moduli JavaScript

Ora che abbiamo esportato il codice, vediamo come importarlo correttamente con la sintassi import.

Importare i named export

Usa le parentesi graffe {}. I nomi devono corrispondere esattamente a quelli esportati.

// file: main.js
import { somma, PI_GRECO } from './mathUtils.js';

console.log(somma(10, 5)); // Output: 15

// file: main.js
import { somma, PI_GRECO } from './mathUtils.js';

console.log(somma(10, 5)); // Output: 15

Se hai un conflitto di nomi, puoi rinominare l’importazione con as:

import { somma as sommaTotale } from './mathUtils.js';

import { somma as sommaTotale } from './mathUtils.js';

Importare un default export

Per i default export, non servono le graffe e puoi scegliere il nome che preferisci.

// file: app.js
import UserProfile from './Utente.js'; // Posso chiamarlo come voglio

const myUser = new UserProfile("Fabio");

// file: app.js
import UserProfile from './Utente.js'; // Posso chiamarlo come voglio

const myUser = new UserProfile("Fabio");

Combinare import di default e nominati

Nello stesso file puoi importare sia i named export di un modulo sia l’export di default di un altro, rinominando con as ciò che va in conflitto:

import { somma as addizione, PI_GRECO } from './mathUtils.js';
import MioUtente from './Utente.js';

console.log(addizione(10, 5)); // 15 (usando il nuovo nome)

Best practice per un’architettura modulare

Per ottenere il massimo dai moduli JavaScript e mantenere il codice di qualità, segui queste regole:

1. Usa type=”module” nel browser

Se stai usando i moduli direttamente nel browser (senza un bundler come Webpack o Vite), devi specificare l’attributo nel tuo HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Moduli JS</title>
  </head>
  <body>
    <!-- Il browser tratterà questo file come un modulo -->
    <script type="module" src="main.js"></script>
  </body>
</html>

2. Import namespace (importare tutto)

Se un modulo esporta molte funzioni, puoi importarle tutte insieme come un oggetto unico per mantenere il codice pulito:

import * as Matematica from './mathUtils.js';

console.log(Matematica.somma(2, 2));

import * as Matematica from './mathUtils.js';

console.log(Matematica.somma(2, 2));

3. Evita la logica al momento dell’import

I moduli dovrebbero contenere definizioni, non esecuzioni. Evita di far eseguire codice pesante semplicemente importando un file.

Conclusione

Padroneggiare import ed export è il primo passo per diventare un Senior Developer. Ti permette di strutturare le tue applicazioni come i professionisti, rendendo il debugging un gioco da ragazzi.

Vuoi approfondire altri concetti moderni? Leggi la nostra guida su scope, var, let e const o scopri come gestire gli errori con async/await e try…catch.

Per i dettagli tecnici più approfonditi, ti consiglio di consultare la documentazione ufficiale su MDN Web Docs.