Frontend Academy · Lezione

Moduli ES: import, export e import dinamico

Usare export denominati, export predefiniti e import tramite namespace, caricando pigramente il codice con import() dinamico per migliorare le prestazioni.

Moduli ES: import, export e import dinamico è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.

Ripasso: nozioni di base sui moduli ES

I moduli ES assegnano a ogni file il proprio ambito. Le esportazioni con nome condividono valori specifici; le esportazioni predefinite condividono il valore principale. Il bundler o il browser risolve le importazioni al momento del caricamento.

// Named exports
export const API_BASE = '/api/v1';
export function formatDate(d) { return d.toISOString().slice(0, 10); }

// Default export
export default class ApiClient {
  constructor(base = API_BASE) { this.base = base; }
}

Tree shaking — Perché le esportazioni con nome sono importanti

I bundler (Rollup, esbuild, Vite) eliminano le esportazioni inutilizzate. Se importate solo { formatDate }, il bundler rimuove tutto il resto dal bundle. Le esportazioni con nome consentono il tree shaking; import * as utils può impedirlo.

// consumers/report.js — only needs formatDate
import { formatDate } from './utils.js';
// Bundler omits API_BASE and ApiClient from this chunk

import() dinamico — Caricamento differito

import() dinamico restituisce una Promise. Il modulo viene recuperato solo quando il codice viene eseguito. I bundler dividono automaticamente queste importazioni in chunk separati.

// Only load the heavy charting library when needed:
const showChart = async () => {
  const { Chart } = await import('./Chart.js');
  new Chart(canvas, config);
};

btn.addEventListener('click', showChart);

import() dinamico con gestione degli errori

Racchiudete le importazioni dinamiche in try/catch per gestire correttamente gli errori di rete o i moduli mancanti.

try {
  const module = await import('./optional-feature.js');
  module.activate();
} catch (err) {
  console.warn('Optional feature unavailable:', err.message);
}

import.meta

import.meta contiene i metadati del modulo corrente. Proprietà principali: import.meta.url (URL assoluto), import.meta.env (variabili d’ambiente di Vite), import.meta.resolve().

// Get the directory of this module:
const dir = new URL('.', import.meta.url).pathname;

// Vite env vars:
const API_URL = import.meta.env.VITE_API_URL;
const isProd = import.meta.env.PROD;

Esecuzione dei moduli — una sola volta

I moduli ES vengono valutati una sola volta, indipendentemente dal numero di importazioni. Tutte le importazioni dello stesso modulo condividono la stessa istanza. Questo rende i moduli ideali per i singleton (store, bus di eventi).

// store.js — evaluated once
const state = { count: 0 };
export const increment = () => state.count++;
export const getCount = () => state.count;

// Any file that imports from store.js gets the same state instance

Dipendenze circolari

Due moduli possono importarsi a vicenda. JavaScript gestisce questa situazione, ma i valori potrebbero essere undefined al primo utilizzo a causa dell’ordine di valutazione. Nella maggior parte dei casi, ristrutturate il codice per evitare i cicli.

Importazioni di soli tipi in TypeScript

Utilizzate import type { ... } per importare solo i tipi. Queste importazioni vengono eliminate in fase di compilazione e non compaiono mai nel bundle prodotto. Usatele per evitare dipendenze circolari causate da riferimenti ai soli tipi.

import type { User } from './types.js';

function greet(user: User): string {
  return `Hello, ${user.name}`;
}

Riesportazioni e file barrel

Un file barrel riesporta elementi da più moduli, creando un unico punto di importazione conveniente. Prestate attenzione ai file barrel nelle applicazioni di grandi dimensioni: possono ostacolare il tree shaking.

// components/index.ts
export { Button } from './Button';
export { Input } from './Input';
export type { ButtonProps } from './Button';

// Consumer:
import { Button, Input } from '@/components';

Script type=module nel browser

Aggiungete type="module" a un tag script per abilitare direttamente nel browser la sintassi dei moduli ES, senza un bundler. I moduli sono differiti per impostazione predefinita e hanno un proprio ambito.

<script type="module">
  import { greet } from './utils.js';
  greet('World');
</script>

Interoperabilità tra CommonJS ed ESM

Node.js supporta entrambi. I file ESM utilizzano .mjs oppure impostano "type": "module" in package.json. Quando utilizzate pacchetti CommonJS da ESM, l’esportazione predefinita corrisponde al valore di module.exports. I bundler gestiscono questa differenza in modo trasparente.

Verifica rapida

Qual è il principale vantaggio in termini di prestazioni delle esportazioni con nome rispetto a un unico oggetto esportato come valore predefinito?

Riepilogo: approfondimento sui moduli ES

I moduli vengono eseguiti una sola volta; tutti gli importatori condividono la stessa istanza. Il tree shaking rimuove le esportazioni con nome inutilizzate. L’importazione dinamica import() abilita il caricamento differito e la suddivisione del codice. import.meta fornisce il contesto del modulo. I file barrel sono convenienti, ma possono danneggiare il tree shaking. Le importazioni di soli tipi in TypeScript non producono alcun output.

Domande Frequenti

La lezione «Moduli ES: import, export e import dinamico» è gratuita?

Sì — il testo completo di «Moduli ES: import, export e import dinamico» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.

Cosa imparerò in «Moduli ES: import, export e import dinamico»?

Usare export denominati, export predefiniti e import tramite namespace, caricando pigramente il codice con import() dinamico per migliorare le prestazioni. Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Frontend Academy?

Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Moduli ES: import, export e import dinamico»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Frontend Academy?

Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Moduli ES: import, export e import dinamico
npm e package.json: dipendenze e script
Vite: server di sviluppo e build
Concetti di bundling: tree shaking e code splitting

← Torna a Frontend Academy