Frontend Academy · Lezione

Moduli: import ed export

Suddividere il codice in moduli ES con export denominati e predefiniti, importare selettivamente e comprendere come i module bundler risolvono il grafo delle dipendenze.

Moduli: import ed export è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 4 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.

Perché i moduli?

Prima dei moduli, tutto JavaScript veniva eseguito nell'ambito globale. Le variabili entravano in conflitto. L'ordine del codice era importante. I file dovevano essere caricati in sequenza. Gli ES Modules assegnano a ogni file il proprio ambito, importazioni esplicite ed esportazioni compatibili con il tree shaking.

Esportazioni con nome

Esporti valori specifici con la parola chiave export. Un file può contenere molte esportazioni con nome. Chi utilizza il modulo importa esattamente ciò di cui ha bisogno.

// utils.js
export const PI = 3.14159;

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

export class Vector {
  constructor(x, y) { this.x = x; this.y = y; }
}

Importazioni con nome

Importi le esportazioni con nome usando le parentesi graffe. Può importare più esportazioni da un singolo modulo in un'unica istruzione.

import { PI, add, Vector } from './utils.js';

console.log(PI);        // 3.14159
console.log(add(2, 3)); // 5

Esportazioni predefinite

Ogni modulo può avere un'unica esportazione predefinita, in genere l'elemento principale fornito dal modulo. La importi senza parentesi graffe e le assegni qualsiasi nome.

// Button.js
export default function Button({ label }) {
  return `<button>${label}</button>`;
}

// Importing:
import Button from './Button.js';
import MyButton from './Button.js'; // any name works

Riesportazione

Un modulo può riesportare elementi da altri moduli per creare un barrel file, cioè un unico punto di ingresso che riesporta più elementi.

// components/index.js
export { default as Button } from './Button.js';
export { default as Input } from './Input.js';
export { default as Modal } from './Modal.js';

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

Importazioni con namespace

Importi tutto da un modulo in un oggetto namespace con import * as name. È utile quando servono molte esportazioni o si vuole rendere esplicita la loro origine.

import * as utils from './utils.js';

console.log(utils.PI);        // 3.14159
console.log(utils.add(1, 2)); // 3

Importazioni con soli effetti collaterali

Alcuni moduli vengono importati esclusivamente per i loro effetti collaterali (polyfill, registrazione di gestori di eventi). Li importi senza creare un binding.

import './polyfills.js'; // runs the code, imports nothing

import() dinamico — Suddivisione del codice

La funzione dinamica import() restituisce una Promise. La utilizzi per caricare un modulo in modo differito, solo quando serve. I bundler creano automaticamente un chunk separato per i moduli importati dinamicamente.

// Load a heavy module only when the button is clicked:
button.addEventListener('click', async () => {
  const { processFile } = await import('./fileProcessor.js');
  processFile(data);
});

import.meta

import.meta è un oggetto speciale disponibile all'interno dei moduli. import.meta.url è l'URL del modulo. Vite utilizza import.meta.env per le variabili d'ambiente.

// Vite environment variables:
console.log(import.meta.env.VITE_API_URL);
console.log(import.meta.env.MODE); // 'development' or 'production'

Risoluzione dei moduli

I bundler come Vite risolvono i moduli dal file system (percorsi relativi come './utils'), da node_modules ('lodash') o tramite alias dei percorsi ('@/components' configurati in vite.config.js).

CommonJS e ES Modules

In origine Node.js utilizzava CommonJS (require / module.exports). Il browser utilizza gli ES Modules (import / export). Anche Node.js moderno supporta gli ES Modules con type: "module" in package.json.

// CommonJS (Node.js, older tooling):
const fs = require('fs');
module.exports = { myFunc };

// ES Modules (modern):
import fs from 'fs';
export { myFunc };

Verifica rapida

Qual è il principale vantaggio dell'utilizzo di dynamic import() rispetto a un'importazione statica?

Riepilogo: ES Modules

Le esportazioni e importazioni con nome consentono di gestire più valori. L'esportazione e l'importazione predefinite servono per l'elemento principale. Le riesportazioni creano barrel file. import() dinamico consente il caricamento differito e la suddivisione del codice. import.meta fornisce metadati del modulo. I bundler risolvono alias, node_modules e percorsi relativi.

Domande Frequenti

La lezione «Moduli: import ed export» è gratuita?

Sì — il testo completo di «Moduli: import ed export» è 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: import ed export»?

Suddividere il codice in moduli ES con export denominati e predefiniti, importare selettivamente e comprendere come i module bundler risolvono il grafo delle dipendenze. 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 4 di 4.

Quanto tempo richiede la lezione «Moduli: import ed export»?

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

Metodi degli array: map, filter, reduce e find
Destructuring e spread degli oggetti
Template literal e optional chaining
Moduli: import ed export

← Torna a Frontend Academy