JavaScript Tooling and Build Trivia
Three quick-fire build-pipeline questions: transpiler vs polyfill, Babel vs SWC, and what source maps actually do.
Question Bank
Easy
JavaScript
3 questions
quiz
js-language
interview-prep
fundamentals
1,029 views
30
Explain the difference between a transpiler (e.g. Babel) and a polyfill. Give one concrete example of each.
Examples
Example 1:
Input: target browser doesn't understand class syntax or Array.prototype.includes
Output: Babel transpiles `class` to constructor functions; core-js polyfills `Array.prototype.includes` at runtime.
Explanation: A transpiler rewrites syntax; a polyfill adds missing runtime APIs.// Source written with modern JS:
// let total = 10;
// let sum = total ?? 100;
// Babel transpiles it to (roughly):
'use strict';
var total = 10;
var sum = total !== null && total !== void 0 ? total : 100;Compare Babel and SWC at a high level. What problem does SWC solve, and where does Babel still win?
Examples
Example 1:
Input: same TS+JSX project transpiled with both
Output: SWC finishes ~10x-20x faster, Babel offers a richer plugin ecosystem
Explanation: SWC is written in Rust and parallelizes well; Babel is JS-only and slower, but its plugin API is mature.// .swcrc (SWC) vs babel.config.js (Babel)
// both transpile modern JS/TS to a chosen targetWhat is a source map, and what concrete problem does it solve in production?
Examples
Example 1:
Input: a minified bundle throws TypeError: e.foo is not a function at line 1:1234
Output: with the source map loaded, DevTools shows the original file/line/column and even the original identifier `userProfile.foo`
Explanation: A source map is a JSON file mapping (generated line, column) back to (source line, column, name).// app.min.js
// ...
//# sourceMappingURL=app.min.js.map