पाठ 31 / 31
Quick Reference और Cheat Sheet
तुरंत संदर्भ के लिए तैयार Babel व SWC configs और सबसे आम transpilation commands कॉपी करें।
Essential .babelrc configs
Common setups के लिए copy-paste configs।
// 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।
// 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।
# 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
अंतिम क्विज़
त्वरित जाँच: Babel का मुख्य उद्देश्य क्या है?
- Minify code
- Bundle files
- Convert modern JavaScript into compatible code
- Run tests
Answer
Convert modern JavaScript into compatible code — यह आपके target environments के लिए syntax बदलता है।
अंतिम क्विज़ 2/8
अंतिम क्विज़
त्वरित जाँच: SWC, 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 और parallelism इसे तेज़ करते हैं।
अंतिम क्विज़ 3/8
अंतिम क्विज़
त्वरित जाँच: क्या Babel और SWC TypeScript को type-check करते हैं?
- 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
अंतिम क्विज़
त्वरित जाँच: @babel/preset-env क्या देखकर तय करता है कि क्या transpile करना है?
- File size
- Your browser or Node targets
- Git history
- Package name
Answer
Your browser or Node targets — Targets browserslist या targets option से आते हैं।
अंतिम क्विज़ 5/8
अंतिम क्विज़
त्वरित जाँच: Polyfills क्या जोड़ते हैं?
- New syntax rules
- Type checking
- Missing runtime features such as Promise
- Minification
Answer
Missing runtime features such as Promise — Syntax transforms runtime APIs नहीं जोड़ सकते।
अंतिम क्विज़ 6/8
अंतिम क्विज़
त्वरित जाँच: Automatic JSX runtime किसकी जरूरत हटाता है?
- Writing JSX
- Using components
- Using hooks
- Importing React in every file
Answer
Importing React in every file — Compiler react/jsx-runtime से jsx() inject करता है।
अंतिम क्विज़ 7/8
अंतिम क्विज़
त्वरित जाँच: कौन-सा tool variable names और whitespace compress करता है?
- A minifier such as Terser
- Babel
- Prettier
- tsc
Answer
A minifier such as Terser — Transpilation और minification अलग चरण हैं।
अंतिम क्विज़ 8/8
अंतिम क्विज़
त्वरित जाँच: Babel plugin 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 syntax tree में घूमते हैं।