Babel and SWC: JavaScript Transpilation and Build Speed

What you'll learn

• Explain transpilation, ASTs and the difference between Babel, SWC and bundlers.
• Configure presets, plugins and targets for browsers and Node.js.
• Compile JSX and TypeScript and add polyfills only where needed.
• Configure SWC and migrate a project from Babel to SWC.
• Debug transpilation issues and choose between Babel, SWC and newer tools.

Syllabus

Module 1: Getting Started

1. What are Babel and SWC?
2. When Do You Need a Transpiler?
3. Brief History and Evolution

Module 2: Setup & Core Concepts

1. Installing and Configuring Babel
2. Installing and Configuring SWC
3. Abstract Syntax Trees (AST)

Module 3: Babel Basics

1. @babel/preset-env: Smart Targeting
2. Other Essential Presets
3. Understanding Plugins

Module 4: Presets & Plugins Deep Dive

1. JSX Transformation
2. TypeScript Compilation
3. Decorators and Advanced Features

Module 5: Target Environments & Transform Strategies

1. Targeting Modern vs Legacy Browsers
2. Targeting Node.js Versions
3. Output Module Formats

Module 6: Modern JavaScript & Polyfills

1. Transpiling Modern Features
2. Polyfills and Core-js
3. Loose Mode and Edge Cases

Module 7: Performance & Optimization

1. Babel Performance Tuning
2. SWC: The Speed Alternative
3. Transpilation vs Minification

Module 8: SWC Deep Dive

1. SWC Configuration and Options
2. SWC Plugins and Ecosystem
3. SWC in Webpack, Vite, and Next.js

Module 9: Migration & Advanced Topics

1. Migrating from Babel to SWC
2. Debugging Transpilation Issues
3. Best Practices
4. Modern Alternatives: esbuild, Oxc & Native TypeScript

Module 10: Interview Prep & Cheat Sheet

1. Common Interview Questions
2. Real-World Scenarios
3. Quick Reference & Cheat Sheet