# Quick Reference & Cheat Sheet — Babel and SWC: JavaScript Transpilation and Build Speed

Source: https://www.skillbyai.com/en/babel-swc/bs-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.

```json
// 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.

```json
// 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.

```bash
# 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

**Quiz:** What is the main purpose of Babel?

- [ ] Minify code
- [ ] Bundle files
- [x] 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

**Quiz:** Why is SWC faster than Babel?

- [ ] It skips JSX
- [ ] It caches nothing
- [ ] It uses fewer plugins only
- [x] 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

**Quiz:** Do Babel and SWC type-check TypeScript?

- [x] 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

**Quiz:** What does @babel/preset-env use to decide what to transpile?

- [ ] File size
- [x] 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

**Quiz:** What do polyfills add?

- [ ] New syntax rules
- [ ] Type checking
- [x] 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

**Quiz:** What does the automatic JSX runtime remove the need for?

- [ ] Writing JSX
- [ ] Using components
- [ ] Using hooks
- [x] 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

**Quiz:** Which tool compresses variable names and whitespace?

- [x] 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

**Quiz:** How does a Babel plugin change code?

- [ ] By editing text with regex
- [x] 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.