# Quick Reference और Cheat Sheet — Babel और SWC: JavaScript Transpilation और Build Speed

Source: https://www.skillbyai.com/hi/babel-swc/bs-cheat-sheet

> तुरंत संदर्भ के लिए तैयार Babel व SWC configs और सबसे आम transpilation commands कॉपी करें।

## Essential .babelrc configs

Common setups के लिए copy-paste configs।

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

Typical projects के लिए quick SWC setups।

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

सबसे 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
```

## अंतिम क्विज़ 1/8

अंतिम क्विज़

**Quiz:** Babel का मुख्य उद्देश्य क्या है?

- [ ] Minify code
- [ ] Bundle files
- [x] Convert modern JavaScript into compatible code
- [ ] Run tests

*Answer:* Convert modern JavaScript into compatible code. यह आपके target environments के लिए syntax बदलता है।

## अंतिम क्विज़ 2/8

अंतिम क्विज़

**Quiz:** SWC, 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 और parallelism इसे तेज़ करते हैं।

## अंतिम क्विज़ 3/8

अंतिम क्विज़

**Quiz:** क्या Babel और SWC TypeScript को type-check करते हैं?

- [x] No, they only strip types
- [ ] Yes, fully
- [ ] Only in production
- [ ] Only with plugins

*Answer:* No, they only strip types. Type checking के लिए tsc --noEmit चलाएँ।

## अंतिम क्विज़ 4/8

अंतिम क्विज़

**Quiz:** @babel/preset-env क्या देखकर तय करता है कि क्या transpile करना है?

- [ ] File size
- [x] Your browser or Node targets
- [ ] Git history
- [ ] Package name

*Answer:* Your browser or Node targets. Targets browserslist या targets option से आते हैं।

## अंतिम क्विज़ 5/8

अंतिम क्विज़

**Quiz:** Polyfills क्या जोड़ते हैं?

- [ ] New syntax rules
- [ ] Type checking
- [x] Missing runtime features such as Promise
- [ ] Minification

*Answer:* Missing runtime features such as Promise. Syntax transforms runtime APIs नहीं जोड़ सकते।

## अंतिम क्विज़ 6/8

अंतिम क्विज़

**Quiz:** Automatic JSX runtime किसकी जरूरत हटाता है?

- [ ] Writing JSX
- [ ] Using components
- [ ] Using hooks
- [x] Importing React in every file

*Answer:* Importing React in every file. Compiler react/jsx-runtime से jsx() inject करता है।

## अंतिम क्विज़ 7/8

अंतिम क्विज़

**Quiz:** कौन-सा tool variable names और whitespace compress करता है?

- [x] A minifier such as Terser
- [ ] Babel
- [ ] Prettier
- [ ] tsc

*Answer:* A minifier such as Terser. Transpilation और minification अलग चरण हैं।

## अंतिम क्विज़ 8/8

अंतिम क्विज़

**Quiz:** Babel plugin 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 syntax tree में घूमते हैं।