Transpilation

A build step that turns TypeScript, JSX, or newer JavaScript into JavaScript the target runtime can execute.

turn TypeScript into JavaScriptmake new JavaScript work in old browsersthe Babel stepwhy does JSX need compilingthe browser has no idea what a .tsx file istranspillingunexpected token error on my modern syntaxcompile my code into code, not into binary

What it is

Transpilation converts source code into different source code at roughly the same level. TypeScript becomes JavaScript, JSX becomes function calls, and newer JavaScript syntax can become older syntax. Babel, SWC, esbuild, and the TypeScript compiler all do versions of this work, often inside a framework's build pipeline. Babel started life in 2014 under the name 6to5, which described the job exactly: ES6 in, ES5 out.

Reach for it when the code authors should write is not the code the target runtime understands. A browserslist target can tell Babel which syntax transformations older browsers need, while a TypeScript build can erase types before JavaScript reaches Node.js or the browser. Source maps connect errors in the generated output back to the original file.

Syntax support and runtime APIs are separate problems. Turning optional chaining into older syntax does not add fetch, Promise, or other missing globals; those need polyfills. TypeScript types also disappear at build time, so transpilation does not validate API responses at runtime. Pick targets from real support requirements instead of compiling everything down by habit.

Ask AI for it

Configure Babel with @babel/preset-env and @babel/preset-typescript for this library: read targets from browserslist, preserve ES modules for tree shaking, emit source maps, and compile TypeScript plus modern syntax to the minimum transformations those targets require. Add core-js 3 with useBuiltIns: "usage" for missing runtime APIs, and include one build test that executes the compiled output in the oldest supported environment.

You might have meant

bundlertree shakingcode splitting

Go deeper