I moduli in JavaScript: cosa sono e come si usano

Quando un progetto JavaScript cresce, il codice tende a diventare lungo, difficile da leggere e complicato da mantenere. Mettere tutto in un unico file non è una buona pratica: diventa più facile introdurre errori e più difficile riutilizzare il codice.

Per risolvere questi problemi, JavaScript mette a disposizione i moduli.

In questo articolo vedremo:

cos’è un modulo JavaScript
perché i moduli sono utili
come esportare e importare codice
esempi pratici spiegati passo passo
come usare i moduli nel browser e in Node.js

🔗 Ti piace Techelopment? Dai un'occhiata al sito per tutti i dettagli!

Cos’è un modulo in JavaScript

Un modulo è semplicemente un file JavaScript che:

contiene codice isolato
espone solo ciò che decide di rendere pubblico
può essere importato in altri file

Ogni modulo ha il proprio scope, cioè le variabili definite al suo interno non sono visibili all’esterno a meno che non vengano esplicitamente esportate.

👉 Questo evita conflitti di nomi e rende il codice più sicuro e organizzato.

Perché usare i moduli

I principali vantaggi dei moduli sono:

1. Organizzazione del codice

Puoi separare il codice in file logici:

un file per le funzioni matematiche
un file per la gestione utenti
un file per la logica dell’interfaccia

2. Riutilizzo

Lo stesso modulo può essere importato in più punti del progetto.

3. Manutenibilità

Se devi modificare una funzionalità, sai esattamente dove intervenire.

4. Evitare variabili globali

Le variabili globali sono una delle cause più comuni di bug in JavaScript.

Come funzionano i moduli: export e import

I moduli JavaScript si basano su due parole chiave:

export → per rendere disponibile qualcosa
import → per usare qualcosa esportato da un altro file

Primo esempio semplice

File: `math.js`

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

Qui stiamo:

creando una funzione somma
esportandola con la parola chiave export

Questo significa che altri file potranno usarla.

File: `main.js`

import { somma } from "./math.js";

const risultato = somma(3, 5);
console.log(risultato);

Qui stiamo:

Importando la funzione somma dal file math.js
Usandola come se fosse definita nello stesso file

📌 Le parentesi {} servono perché stiamo importando un’esportazione con nome.

Esportazioni con nome (named export)

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

export function sottrai(a, b) {
  return a - b;
}

import { somma, sottrai } from "./math.js";

console.log(somma(10, 5));
console.log(sottrai(10, 5));

⚠️ Importante

Devi usare gli stessi nomi usati nell’export.

Rinominare un’importazione

import { somma as addizione } from "./math.js";

console.log(addizione(2, 3));

Questo è utile per:

evitare conflitti di nomi
rendere il codice più leggibile

Export di variabili e costanti

export const PI = 3.14159;

import { PI } from "./math.js";
console.log(PI);

Default export

export default function saluta(nome) {
  return `Ciao, ${nome}!`;
}

import saluta from "./saluta.js";

console.log(saluta("Marco"));

📌 Nota importante:

non servono le {}
il nome lo scegli tu - avremmo potuto scrivere anche:
```
import fai_un_saluto from "./saluta.js";
```

Differenza tra export normale e default

Tipo	Numero	Import
named export	più di uno	con `{}`
default export	uno solo	senza `{}`

Importare tutto un modulo

import * as math from "./math.js";

console.log(math.somma(4, 6));
console.log(math.sottrai(8, 3));

Qui:

math è un oggetto
ogni export diventa una proprietà

I moduli nel browser

Per usare i moduli nel browser devi:

usare file separati
dichiarare il tipo module nello script

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

📌 Senza type="module":

import ed export non funzionano

Caratteristiche importanti dei moduli

1. Strict mode automatico

I moduli sono sempre in strict mode, anche senza scriverlo.

2. Caricamento una sola volta

Un modulo viene caricato una sola volta, anche se importato più volte.

3. Percorsi obbligatori

Nel browser devi sempre scrivere:

"./file.js"

Non solo "file.js", ma vediamolo nel dettaglio.

Perché nel browser devi scrivere "./file.js"

Quando usi i moduli JavaScript nel browser, ogni import segue le regole degli URL, non quelle tipiche dei linguaggi di programmazione tradizionali (questo è il punto chiave da capire).

Come il browser interpreta un import

Quando il browser incontra una istruzione come questa:

import { somma } from "file.js";

non interpreta "file.js" come “un file nella stessa cartella”.

Lo interpreta invece come:

il nome di una risorsa esterna
un possibile pacchetto
un percorso assoluto dipendente dal contesto

Di conseguenza, il browser prova a cercare il file come se fosse un URL e il risultato è quasi sempre un errore di caricamento.

Cosa significa "./file.js"

import { somma } from "./file.js";

Il prefisso ./ dice esplicitamente al browser:

“Parti dalla cartella del file corrente”

È la stessa logica dei percorsi del file system:

./ → cartella corrente
../ → cartella precedente
/ → radice del sito

Esempio concreto

Struttura del progetto:

/progetto
  ├─ index.html
  └─ js
      ├─ main.js
      └─ math.js

All’interno di main.js:

import { somma } from "./math.js";

In questo caso:

main.js e math.js sono nella stessa cartella
./math.js è il percorso corretto

Cosa succede se non usi "./"

Se scrivi:

import { somma } from "math.js";

Il browser prova a cercare il file come se fosse:

https://tuosito.it/math.js

Dato che il file non si trova lì, il risultato è un errore 404.

Percorsi relativi più complessi

Se il file si trova in una cartella diversa:

import { somma } from "../utils/math.js";

Questo significa:

salire di una cartella
entrare nella cartella utils
caricare math.js

Perché in Node.js spesso non serve "./"

In Node.js è comune vedere:

import express from "express";

Questo funziona perché Node.js ha un sistema di risoluzione dei moduli che:

cerca i pacchetti in node_modules
riconosce i moduli tramite nome

Il browser invece:

non conosce node_modules
non sa cosa sia un pacchetto
carica solo file tramite URL

Bundler e strumenti di build

Strumenti come Webpack, Vite o Rollup:

simulano il comportamento di Node.js
trasformano gli import in percorsi reali
permettono di usare nomi di pacchetti

Ma questo avviene prima che il codice arrivi al browser.

Regola fondamentale da ricordare

Nel browser, ogni import deve essere un URL valido.

Esempi validi:

./file.js
../file.js
/scripts/file.js
https://example.com/file.js

Riepilogo

Il browser usa URL, non nomi logici
"file.js" da solo non è un percorso relativo valido
"./file.js" indica esplicitamente la cartella corrente
Node.js e i bundler seguono regole diverse
Nel browser il percorso va sempre specificato

Esempio reale: organizzare un progetto

/src
  ├─ utils.js
  ├─ user.js
  └─ main.js

// utils.js
export function formattaNome(nome) {
  return nome.toUpperCase();
}

// user.js
import { formattaNome } from "./utils.js";

export function creaUtente(nome) {
  return {
    nome: formattaNome(nome)
  };
}

// main.js
import { creaUtente } from "./user.js";

const utente = creaUtente("Luca");
console.log(utente);

Conclusione

I moduli sono una fondamenta essenziale del JavaScript moderno. Permettono di:

scrivere codice più pulito
evitare errori comuni
costruire applicazioni scalabili

Capire bene i moduli significa fare un grande passo avanti nello sviluppo JavaScript, sia per piccoli progetti che per applicazioni complesse.

Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment