</>SkillByAI
🇬🇧 English

Lesson 31 / 31

Quick Reference & Cheat Sheet

Copy ready-made Babel and SWC configs and the most common transpilation commands for quick reference.

Essential .babelrc configs

Copy-paste configs for common setups.

// React + TypeScript, modern browsers
{
  "presets": [
    ["@babel/preset-env", { "targets": { "browsers": ["last 2 versions"] } }],
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]
}

// React + TypeScript, with polyfills for older browsers
{
  "presets": [
    ["@babel/preset-env", { "useBuiltIns": "usage", "corejs": "3" }],
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]
}

Essential .swcrc configs

Quick SWC setups for typical projects.

// React + TypeScript (most common)
{
  "env": { "targets": { "chrome": "90" } },
  "jsc": {
    "parser": { "syntax": "typescript", "jsx": true, "tsx": true },
    "transform": { "react": { "runtime": "automatic" } }
  },
  "module": { "type": "es6" }
}

// CommonJS output for Node.js
{
  "env": { "targets": { "node": "18" } },
  "jsc": { "parser": { "syntax": "typescript" } },
  "module": { "type": "commonjs" }
}

CLI commands quick reference

Most common transpilation commands.

# Babel
npx babel src/index.js                    # Transpile one file
npx babel src -d dist                     # Transpile directory
npx babel src --watch                     # Watch and transpile on change
npx babel src --out-file bundle.js        # Output to single file

# SWC
npx swc src/index.js                      # Transpile one file
npx swc src -d dist                       # Transpile directory
npx swc src --watch                       # Watch mode
npx swc compile src                       # Full compile

Final quiz 1 of 8

Final quiz

Quick check: What is the main purpose of Babel?

  • Minify code
  • Bundle files
  • Convert modern JavaScript into compatible code
  • Run tests
Answer

Convert modern JavaScript into compatible code — It transforms syntax for your target environments.

Final quiz 2 of 8

Final quiz

Quick check: Why is SWC faster than Babel?

  • It skips JSX
  • It caches nothing
  • It uses fewer plugins only
  • It is written in Rust and compiled to native code
Answer

It is written in Rust and compiled to native code — Native code and parallelism speed it up.

Final quiz 3 of 8

Final quiz

Quick check: Do Babel and SWC type-check TypeScript?

  • No, they only strip types
  • Yes, fully
  • Only in production
  • Only with plugins
Answer

No, they only strip types — Run tsc --noEmit for type checking.

Final quiz 4 of 8

Final quiz

Quick check: What does @babel/preset-env use to decide what to transpile?

  • File size
  • Your browser or Node targets
  • Git history
  • Package name
Answer

Your browser or Node targets — Targets come from browserslist or the targets option.

Final quiz 5 of 8

Final quiz

Quick check: What do polyfills add?

  • New syntax rules
  • Type checking
  • Missing runtime features such as Promise
  • Minification
Answer

Missing runtime features such as Promise — Syntax transforms cannot add runtime APIs.

Final quiz 6 of 8

Final quiz

Quick check: What does the automatic JSX runtime remove the need for?

  • Writing JSX
  • Using components
  • Using hooks
  • Importing React in every file
Answer

Importing React in every file — The compiler injects jsx() from react/jsx-runtime.

Final quiz 7 of 8

Final quiz

Quick check: Which tool compresses variable names and whitespace?

  • A minifier such as Terser
  • Babel
  • Prettier
  • tsc
Answer

A minifier such as Terser — Transpilation and minification are separate steps.

Final quiz 8 of 8

Final quiz

Quick check: How does a Babel plugin change code?

  • By editing text with regex
  • By visiting and modifying the AST
  • By running the code
  • By downloading packages
Answer

By visiting and modifying the AST — Plugins traverse the syntax tree.