Split a growing script.js file into clean ES modules

My one script.js file now handles the whole page, and finding which part broke after a small change takes longer every week.

Intermediate to advancedRead 6 minDoing: about an hour7 steps

▶ Start

What you'll have at the end

script.js replaced by three ES module files, one for cart state, one for product loading, and one entry file, each exporting only what another file needs, loaded by the page through a module script tag, producing the exact same cart behavior as the original single file for the same clicks.

Before you start

You need

A single script.js file that already works in the browser, loaded by one script tag, whose functions are wired up with addEventListener rather than inline onclick attributes in the HTML.

Not covered

Combining the new files back into one bundle with a build tool, or cutting down the extra network requests the browser now makes for them; that trade-off belongs to whichever bundler gets adopted later.

Leans on

7 steps

Where to go next

Migrate one JavaScript file to TypeScript without a rewrite

once each file has one clear job, adding types to them one at a time is a separate recipe worth doing next

Checked 21 Aug 2026

Part of the JavaScript cookbook