Two different problems
Modern code uses syntax and APIs that older browsers do not support. There are two distinct gaps. A transpiler rewrites new syntax into equivalent older syntax. A polyfill supplies a missing runtime function by adding an implementation at startup.
- Transpile: arrow functions and optional chaining become older equivalents.
- Polyfill: a missing method like a new array helper gets defined.
- Syntax is a compile time concern, missing APIs are a runtime concern.
Targeting browsers
You declare which browsers to support, and the toolchain decides how much to transpile and which polyfills to include. Targeting only modern browsers ships smaller, faster code, while broad support adds weight.
- A browser list drives the transform decisions.
- Including every polyfill bloats the bundle, so include only needed ones.
- Modern browsers often need little transpilation at all.
The key distinction is that no amount of syntax rewriting adds a missing function, and no polyfill fixes syntax an old parser cannot read. You usually need both tools, aimed at the same target list, working together.
Key idea
Transpilers rewrite new syntax to older syntax, polyfills add missing runtime APIs, and a browser target list drives both.