Pathwise

Manuals / JavaScript / Chapter 9

D · Modules & Testing · intermediate · Week 6 · Chapter 9 of 14

ES modules & project structure

ES modules (import/export) replace script-tag soup. Named exports for utilities, default export for main component. Split by responsibility: api.js, render.js, main.js. Vite or native Node "type": "module" for local dev without bundler pain.

Path progress
59%

Step 1 of 5

Named exports

export function foo() {} and export const BAR = 1. Import with import { foo, BAR } from "./utils.js". Extensions required in browser and Node ESM.

Named exportsDrag stickies · tap for tips
Study mapDrag stickies · tap for tipsKeep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Assert the UIdrag · tap →Retry wiselydrag · tap →Seed datadrag · tap →Close the loopdrag · tap →Keep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Pathwise hackdrag · tap →Named exportsdrag · tap →Try thisdrag · tap →Follow the dashed drag · tap →

Example

// utils.js
export function titleCase(str) { /* ... */ }
export function slugify(str) { /* ... */ }

// main.js
import { titleCase, slugify } from "./utils.js"

Do this now

Move your utility functions to utils.js. Import them in main.js.

Was this step clear?
Chapter learning outcomes
  • export / import
  • Default vs named exports
  • Module scope
  • Vite setup
  • Barrel files lite

Clear these before you leave

Side quest

Module refactor

Take any script >100 lines. Split into 3+ modules with clear boundaries. No circular imports.