What transpiling does to modern syntax
Same results, much more code: that's the price of supporting old browsers. void 0 is a short, safe way to write undefined. Notice the empty name stays "": ?? only replaces null and undefined, and the transpiled version keeps that exact rule.
A bundler follows your imports from one entry file and combines the modules into a few optimised files, transpiling new syntax for older browsers, removing unused code and minifying; a dev server such as Vite serves your code instantly while you work and updates the page as you save.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write minifyNumbers(code) that removes every space except those inside double-quoted strings. Test it on const total = 1 + 2; const s = "a b";.
Write the package.json scripts and the vite.config.js for a site deployed to https://example.com/blog/, with source maps turned on.
Explain it without notes
Why do we bundle JavaScript for production if browsers support ES modules?
What is the difference between transpiling and polyfilling?
How does Vite's dev server differ from its production build?
What is tree shaking, and why does it need ES modules?
Preview
Console
Nothing logged yet.Expected console output
"guest" "guest"
"guest" "guest"
"" ""
"Asha" "Asha"