Modules and Tooling

How a program made of many files becomes one running application: what export and import really do, why a module evaluates once, how dynamic import splits a bundle, what CommonJS does differently, and what each tool in a modern project is actually for.

What you will be able to do

• Export and import values with named, default and renamed forms, and say which you would choose
• Explain module scope, single evaluation and live bindings from the behaviour, not the slogan
• Recognise a circular import and reorganise the graph instead of patching around it
• Load code on demand with import() and handle a chunk that fails to arrive
• Split an application by route and add the right preload hint
• Read a CommonJS file, spot the four behaviours that differ from ESM, and interop safely
• Choose between .mjs, .cjs and "type": "module" for a given package
• Read the package.json fields that decide how your code is resolved and published
• Match a version against a semver range and explain what a lockfile guarantees
• Describe what a bundler, a transpiler, a minifier and a source map each contribute
• Judge a dependency before you install it, including its supply-chain risk

Lessons

1. ES Modules — A module is a file with a private scope and a published list of names. An import is not a copy of a value, it is a window onto the variable that lives in the other file. (18 min)