Babel JavaScript (Node.js): पूरी गाइड उदाहरणों के साथ

Babel क्या है और इसकी आवश्यकता क्यों है?

Babel JavaScript के लिए एक शक्तिशाली ट्रांसपाइलर (कंपाइलर) है, जो डेवलपर्स को ECMAScript (ES6, ES7, ES8, ES9, ES10, ES11, ES12 और उससे ऊपर) के सबसे आधुनिक वर्जन में कोड लिखने और उसे बैकवर्ड-कम्पैटिबल JavaScript में बदलने की अनुमति देता है, जो पुराने ब्राउज़रों और रनटाइम एनवायरनमेंट (जैसे Node.js के 12 से नीचे के वर्जन) में चल सके।

Babel जिस मुख्य समस्या को हल करता है, वह है भाषा की नई सुविधाओं (एरो फंक्शन, async/await, डिस्ट्रक्चरिंग, क्लासेस, मॉड्यूल्स, ऑप्शनल चेनिंग आदि) और वास्तविक एनवायरनमेंट में उनके सपोर्ट के बीच का अंतर। Babel एक पुल की तरह काम करता है, जिससे डेवलपर्स सभी ब्राउज़रों के अपडेट होने का इंतज़ार किए बिना आधुनिक JavaScript के सभी लाभ उठा सकते हैं।

Babel तीन मुख्य घटकों से बना है:

• कोर (@babel/core) — मुख्य इंजन जो कोड को पार्स करता है, उसे बदलता है और नया कोड जनरेट करता है।
• प्लगइन्स — अलग-अलग मॉड्यूल, जिनमें से प्रत्येक एक विशिष्ट सिंटैक्स कंस्ट्रक्शन को बदलने के लिए जिम्मेदार है (जैसे एरो फंक्शन के लिए प्लगइन, async/await के लिए प्लगइन)।
• प्रीसेट्स — पहले से कॉन्फ़िगर किए गए प्लगइन सेट (जैसे @babel/preset-env, @babel/preset-react)।

Babel का उपयोग TypeScript, JSX (React), Flow और JavaScript के अन्य एक्सटेंशन को ट्रांसपाइल करने के लिए भी किया जाता है।

Babel की स्थापना (Installation)

Babel को npm (Node Package Manager) के माध्यम से इंस्टॉल किया जाता है। शुरू करने के लिए आपको Node.js वर्जन 12 या उससे ऊपर की आवश्यकता होगी।

एक नया प्रोजेक्ट बनाएं और उसे इनिशियलाइज़ करें:

mkdir my-babel-project
cd my-babel-project
npm init -y

Babel के मुख्य पैकेज इंस्टॉल करें:

npm install --save-dev @babel/core @babel/cli @babel/preset-env

आइए समझें कि हमने क्या इंस्टॉल किया:

• @babel/core — Babel का कोर। इसके बिना कुछ भी काम नहीं करेगा।
• @babel/cli — कमांड लाइन इंटरफ़ेस, जो टर्मिनल से Babel चलाने की अनुमति देता है।
• @babel/preset-env — सबसे महत्वपूर्ण प्रीसेट, जो टार्गेट एनवायरनमेंट (ब्राउज़र या Node.js वर्जन) के आधार पर स्वचालित रूप से निर्धारित करता है कि किन प्लगइन्स की आवश्यकता है।

React के साथ काम करने के लिए अतिरिक्त इंस्टॉल करें:

npm install --save-dev @babel/preset-react

TypeScript के लिए:

npm install --save-dev @babel/preset-typescript

कोड उदाहरण के साथ त्वरित शुरुआत

प्रोजेक्ट की रूट में Babel कॉन्फ़िगरेशन फ़ाइल (babel.config.json या .babelrc) बनाएं:

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "node": "current"
      }
    }]
  ]
}

आधुनिक कोड के साथ src/index.js फ़ाइल बनाएं:

// src/index.js
const greet = (name) => {
  return `Hello, ${name}!`;
};

const users = ['Alice', 'Bob', 'Charlie'];
const greetings = users.map(user => greet(user));

console.log(greetings);

// async/await का उपयोग
const fetchData = async () => {
  const data = await Promise.resolve({ message: 'Success' });
  console.log(data.message);
};

fetchData();

अब Babel का उपयोग करके कोड कंपाइल करें:

npx babel src --out-dir dist

कमांड चलाने के बाद dist फ़ोल्डर में index.js फ़ाइल बनेगी जिसमें बदला हुआ कोड होगा:

// dist/index.js
"use strict";

var greet = function greet(name) {
  return "Hello, ".concat(name, "!");
};

var users = ['Alice', 'Bob', 'Charlie'];
var greetings = users.map(function (user) {
  return greet(user);
});

console.log(greetings);

var fetchData = async function fetchData() {
  var data = await Promise.resolve({ message: 'Success' });
  console.log(data.message);
};

fetchData();

ध्यान दें: एरो फंक्शन सामान्य फंक्शन में बदल गए हैं, टेम्पलेट स्ट्रिंग्स कॉन्केटनेशन में बदल गई हैं,