Risoluzione dei moduli in Node e nei bundler per browser
Impari come vengono risolti gli import: specifier relativi e bare, estensioni dei file (.js/.mjs/.cjs), file index e semplici entry point dei pacchetti.
Risoluzione dei moduli in Node e nei bundler per browser è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 3 di 3. 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 JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 3 lezioni in totale.
Panoramica
Obiettivo: capire come vengono risolti i percorsi delle importazioni.
- Specificatori relativi e bare
- Usare .js in modo esplicito (scelta predefinita sicura)
- index.js nelle cartelle
- Punti di ingresso dei pacchetti (main/exports, in breve)
Relativi e bare
Le importazioni relative iniziano con ./ o ../. Le importazioni bare fanno riferimento ai pacchetti installati.
// Relative path imports start with ./ or ../
// Bare specifiers refer to packages installed (e.g., "lodash")
const examples = [
"import { sum } from \\"./math.js\\"; // relative, file nearby",
"import leftPad from \\"left-pad\\"; // bare, from node_modules",
"import thing from \\"../lib/thing.js\\"; // parent folder"
];
console.log("specifiers:");
for (const line of examples) console.log(line);
Le estensioni contano
Aggiunga l'estensione .js in ESM per evitare errori di risoluzione. Potrebbe anche vedere .mjs o .cjs.
// Include file extensions for ESM (safe beginner habit)
const extTips = [
"Good (ESM): import util from \\"./util.js\\"",
"Also seen: .mjs for ESM files, .cjs for CJS files",
"Avoid: import \\"./util\\" (may fail in Node/browsers)"
];
console.log("extensions:");
for (const t of extTips) console.log(t);
Cartelle e index.js
Le cartelle spesso espongono index.js. Essere espliciti (.../index.js) è più chiaro per chi sta imparando.
// If you import a folder, many setups look for index.js inside it
const folderExample = [
"my-lib/",
" index.js",
" helpers/",
" index.js"
];
for (const l of folderExample) console.log(l);
// Typical imports
const dirImports = [
"import main from \\"./my-lib/index.js\\";",
"import alsoMain from \\"./my-lib/\\"; // some setups resolve to index.js",
"import helper from \\"./my-lib/helpers/index.js\\";"
];
console.log("imports:");
for (const l of dirImports) console.log(l);
Punti di ingresso dei pacchetti
I pacchetti espongono i punti di ingresso tramite main/exports. Le importazioni bare scelgono il file corretto per ESM o CJS.
// Installed packages declare entry points in package.json
const pkgJson = [
"{",
" \\"name\\": \\"tiny-lib\\",",
" \\"main\\": \\"dist/cjs/index.cjs\\",",
" \\"exports\\": {",
" \\".\\": { \\"import\\": \\"./dist/esm/index.js\\", \\"require\\": \\"./dist/cjs/index.cjs\\" }",
" }",
"}"
];
console.log("package.json entry (example):");
for (const l of pkgJson) console.log(l);
// Importing a bare specifier will use these fields
console.log("import tiny-lib -> resolves to ESM or CJS entry depending on environment");
Suggerimenti e insidie
Suggerimenti:
- Preferisca i percorsi relativi con .js per i file locali.
- Usi le importazioni bare solo per i pacchetti installati.
- Sia esplicito con index.js per evitare ambiguità.
- Nel browser, le importazioni devono essere URL validi (spesso con le estensioni).
Quiz sulle basi della risoluzione
Controllo rapido: percorso sicuro per un'importazione locale.
Riepilogo
Riepilogo: file locali → ./file.js. Pacchetti → nomi bare. Le cartelle spesso vengono risolte in index.js. Conoscere queste regole mantiene le importazioni semplici e prevedibili.
Domande Frequenti
La lezione «Risoluzione dei moduli in Node e nei bundler per browser» è gratuita?
Sì — il testo completo di «Risoluzione dei moduli in Node e nei bundler per browser» è 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 JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 3 lezioni in totale.
Cosa imparerò in «Risoluzione dei moduli in Node e nei bundler per browser»?
Impari come vengono risolti gli import: specifier relativi e bare, estensioni dei file (.js/.mjs/.cjs), file index e semplici entry point dei pacchetti. Eserciti JavaScript 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 JavaScript Academy?
Non è richiesta alcuna esperienza precedente. JavaScript 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 3 di 3.
Quanto tempo richiede la lezione «Risoluzione dei moduli in Node e nei bundler per browser»?
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 JavaScript Academy?
Sì. Ogni lezione JavaScript 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
- Basi di ESM — import/export, default e named
- Basi di CommonJS — require/module.exports ed exports
- Risoluzione dei moduli in Node e nei bundler per browser