0Pricing
JavaScript Academy · Lesson

Module resolution in Node and browser bundlers

Learn how imports are resolved: relative vs bare specifiers, file extensions (.js/.mjs/.cjs), index files, and simple package entry points.

Big picture

Goal: Know how import paths resolve.

  • Relative vs bare specifiers
  • Use explicit .js (safe default)
  • index.js in folders
  • Package entry points (main/exports, taste)
Module resolution in Node and browser bundlers — illustration 1

Relative vs bare

Relative imports start with ./ or ../. Bare imports point to installed packages.

// 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);
Module resolution in Node and browser bundlers — illustration 2

All lessons in this course

  1. ESM basics — import/export, default vs named
  2. CommonJS basics — require/module.exports and exports
  3. Module resolution in Node and browser bundlers
← Back to JavaScript Academy