BabelJS Presets

BabelJS-এ Presets হলো একটি পূর্বনির্ধারিত কনফিগারেশন সেট, যা একাধিক Babel প্লাগিনকে একত্রে গ্রুপ করে। Presets ব্যবহার করে আপনি নির্দিষ্ট একটি JavaScript সংস্করণ থেকে অন্য সংস্করণে কোড ট্রান্সপাইল করতে পারেন। উদাহরণস্বরূপ, ES6 থেকে ES5 বা অন্য কোনো পুরনো JavaScript সংস্করণে কোড রূপান্তর করা।

Presets এর ভূমিকা:

• সহজ কনফিগারেশন: Presets ব্যবহারের মাধ্যমে আপনি বিভিন্ন প্লাগিনগুলোর কনফিগারেশন একত্রে করতে পারেন, যা আপনার কোডটিকে দ্রুত এবং সহজে ট্রান্সপাইল করতে সাহায্য করে।
• একাধিক প্লাগিন একত্রিত: Presets বিভিন্ন প্লাগিনের সমন্বয়ে গঠিত, যেগুলি সাধারণত একটি নির্দিষ্ট ফিচারের ট্রান্সফরমেশনে ব্যবহৃত হয়।
• নির্দিষ্ট জাভাস্ক্রিপ্ট সংস্করণের সমর্থন: এটি একাধিক JavaScript সংস্করণকে সমর্থন করে, যেমন ES5, ES6, ES7 ইত্যাদি।

বিবিধ Presets

BabelJS-এ কিছু জনপ্রিয় presets রয়েছে যা বিভিন্ন জাভাস্ক্রিপ্ট ফিচারকে সমর্থন করে। এখানে কয়েকটি গুরুত্বপূর্ণ preset এর আলোচনা করা হলো।

১. @babel/preset-env

@babel/preset-env হলো সবচেয়ে সাধারণ এবং বহুল ব্যবহৃত preset। এটি আপনার কোডকে নির্দিষ্ট JavaScript সংস্করণে রূপান্তরিত করে। আপনি এই preset ব্যবহার করে সেটি কনফিগার করতে পারেন, যেন আপনার কোড শুধুমাত্র সেইসব ব্রাউজার বা পরিবেশে কাজ করে যেখানে প্রয়োজনীয় ফিচারগুলির সমর্থন আছে।

কেন ব্যবহৃত হয়?

• ES6 এবং তার পরবর্তী সংস্করণের ফিচারগুলিকে পুরনো ব্রাউজারে সমর্থনযোগ্য কোডে রূপান্তরিত করতে ব্যবহৃত হয়।
• আপনি ব্রাউজার বা প্ল্যাটফর্মের নির্দিষ্ট সমর্থন কনফিগার করতে পারেন।

কনফিগারেশন উদাহরণ:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "> 0.25%, not dead" // এটি সেগুলে ব্রাউজারে কোড রূপান্তর করবে, যেখানে 0.25% এর বেশি বাজারে ব্যবহৃত।
      }
    ]
  ]
}

এই কনফিগারেশনটি ব্রাউজারগুলোর তালিকা নির্ধারণ করে যেগুলোর জন্য কোড ট্রান্সপাইল করা হবে।

২. @babel/preset-react

@babel/preset-react বিশেষভাবে React প্রজেক্টগুলির জন্য ব্যবহৃত হয়। এটি JSX (JavaScript XML) সিনট্যাক্সকে সাধারন JavaScript কোডে রূপান্তরিত করে।

কেন ব্যবহৃত হয়?

• React-এ JSX কোড লেখা হয় যা সরাসরি ব্রাউজারে চলতে পারে না।
• JSX কোডকে সাধারণ JavaScript কোডে রূপান্তর করতে ব্যবহৃত হয়।

কনফিগারেশন উদাহরণ:

{
  "presets": ["@babel/preset-react"]
}

৩. @babel/preset-typescript

@babel/preset-typescript TypeScript কোডকে JavaScript কোডে রূপান্তরিত করতে ব্যবহৃত হয়। TypeScript একটি superset of JavaScript যা টাইপিং সিস্টেমের জন্য ব্যবহৃত হয়।

কেন ব্যবহৃত হয়?

• TypeScript কোডকে সাধারণ JavaScript কোডে রূপান্তর করতে।
• TypeScript এর টাইপিং এবং ক্লাস সিনট্যাক্স সমর্থন করতে।

কনফিগারেশন উদাহরণ:

{
  "presets": ["@babel/preset-typescript"]
}

৪. @babel/preset-flow

@babel/preset-flow Flow টাইপ সিস্টেমকে সমর্থন করে। Flow একটি স্ট্যাটিক টাইপ চেকিং সিস্টেম, যা JavaScript কোডে টাইপ নিরাপত্তা প্রদান করে।

কেন ব্যবহৃত হয়?

• Flow টাইপ সিস্টেমের ফিচারগুলিকে সাধারণ JavaScript কোডে রূপান্তর করতে।

কনফিগারেশন উদাহরণ:

{
  "presets": ["@babel/preset-flow"]
}

Presets কনফিগারেশন ব্যবহার কিভাবে করা যায়?

Babel কনফিগারেশনে একাধিক preset একত্রিত করা যায়, যাতে আপনার কোডটির ট্রান্সফর্মেশন আরো সুনির্দিষ্ট ও কার্যকর হয়।

উদাহরণ:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

এখানে:

• @babel/preset-env ES6 কোডকে ES5 তে রূপান্তরিত করবে।
• @babel/preset-react JSX কোডকে JavaScript এ রূপান্তরিত করবে।

কাস্টম Preset তৈরি করা

Babel এর preset আপনার নিজস্ব কাস্টমাইজেশনের জন্য তৈরি করা যেতে পারে, যাতে নির্দিষ্ট ধরনের প্লাগিন বা কনফিগারেশন ব্যবহার করা যায়।

উদাহরণ:

{
  "presets": [
    [
      "custom-preset", // আপনার কাস্টম preset নাম
      {
        "targets": "chrome 58",
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]
}

সারাংশ

Presets BabelJS-এ JavaScript কোডকে একটি নির্দিষ্ট সংস্করণে রূপান্তরিত করার জন্য ব্যবহৃত কনফিগারেশন সেট। এটি অনেকগুলো প্লাগিনের সমন্বয়ে গঠিত হয় এবং আপনার কোডের রূপান্তর প্রক্রিয়াকে সহজ করে তোলে। জনপ্রিয় presets গুলোর মধ্যে @babel/preset-env, @babel/preset-react, @babel/preset-typescript, এবং @babel/preset-flow অন্তর্ভুক্ত। এগুলি আপনার প্রজেক্টের প্রয়োজন অনুযায়ী কোড ট্রান্সফর্মেশন সহজ এবং কার্যকরী করে।

@babel/preset-env হল একটি Babel preset যা ES6 (বা তার পরবর্তী সংস্করণ) থেকে ES5 এ কোড ট্রান্সপাইল করতে ব্যবহৃত হয়। এটি এমন একটি শক্তিশালী টুল যা কাস্টমাইজেশন এবং অটোমেটিক ব্রাউজার সমর্থন পরিচালনার মাধ্যমে JavaScript কোডের সাম্প্রতিক বৈশিষ্ট্যগুলোকে পুরনো ব্রাউজার বা পরিবেশের জন্য উপযুক্ত করে তোলে।

@babel/preset-env কী?

@babel/preset-env একটি অত্যন্ত জনপ্রিয় Babel preset যা আপনার কোডের সব আধুনিক ফিচার (যেমন, arrow functions, async/await, destructuring) কে এমনভাবে ট্রান্সপাইল করে, যাতে তা পুরনো JavaScript ইঞ্জিন (যেমন, ES5) দ্বারা সঠিকভাবে কাজ করে। এটি মডার্ন JavaScript কোডকে পুরনো কোডে রূপান্তরিত করার কাজটি সহজ করে এবং Polyfill ব্যবহারের মাধ্যমে প্রাচীন ব্রাউজারগুলির জন্য প্রয়োজনীয় ফিচারগুলো অন্তর্ভুক্ত করতে পারে।

এটি একটি অত্যন্ত কাস্টমাইজযোগ্য preset, যার মাধ্যমে আপনি নির্দিষ্ট ব্রাউজার বা এনভায়রনমেন্টের জন্য আপনার কোডটি ট্রান্সপাইল করতে পারেন।

@babel/preset-env এর সুবিধা

1. ব্যবহারকারী নির্ধারিত ব্রাউজার সাপোর্ট: আপনি নির্দিষ্ট ব্রাউজার বা সংস্করণ চয়ন করে আপনার কোডকে ট্রান্সপাইল করতে পারেন। উদাহরণস্বরূপ, আপনি চাইলে IE 11, Chrome 80, বা Safari 10 এর জন্য কোড ট্রান্সপাইল করতে পারেন।
2. স্বয়ংক্রিয় Polyfill ব্যবস্থাপনা: আপনি যে ফিচারগুলি ব্যবহার করছেন, তা ব্রাউজারে সঠিকভাবে কাজ করার জন্য স্বয়ংক্রিয়ভাবে প্রয়োজনীয় polyfill গুলো অন্তর্ভুক্ত করে। উদাহরণস্বরূপ, যদি আপনি Promise ব্যবহার করেন এবং ব্রাউজারটি এটি সমর্থন না করে, তাহলে এটি Babel এর মাধ্যমে polyfill হিসেবে যুক্ত হয়ে যাবে।
3. কাস্টমাইজেশন: আপনি targets, useBuiltIns, এবং corejs এর মতো বিভিন্ন কনফিগারেশন অপশন ব্যবহার করে আপনার প্রজেক্টের জন্য উপযুক্ত কনফিগারেশন তৈরি করতে পারেন।
4. কমপাইলিংকে সহজ করে: ES6 থেকে ES5 তে কোড ট্রান্সপাইল করতে এটি সহজ এবং সরল পদ্ধতি প্রদান করে, যার ফলে আপনি পুরনো ব্রাউজারেও আধুনিক কোড রান করাতে পারেন।

@babel/preset-env কনফিগারেশন

@babel/preset-env ব্যবহার করতে, প্রথমে এটি ইনস্টল করতে হবে এবং তারপর কনফিগারেশন ফাইলে এটি সংযুক্ত করতে হবে।

Step 1: Install @babel/preset-env

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

Step 2: Babel কনফিগারেশন ফাইলে সেটআপ

Babel এর কনফিগারেশন ফাইলে (যেমন .babelrc অথবা babel.config.js) @babel/preset-env যোগ করতে হবে।

উদাহরণ (বাবেল কনফিগারেশন)

.babelrc

{
  "presets": ["@babel/preset-env"]
}

এছাড়া আপনি কাস্টম টার্গেটিং (targeting) এবং polyfill ব্যবস্থাপনার জন্য আরো সেটিংস দিতে পারেন। নিচে কিভাবে তা করবেন তা দেখানো হলো।

Step 3: কাস্টম টার্গেটস সেট করা

target ব্যবহার করে আপনি কোন ব্রাউজার বা Node.js ভার্সনের জন্য কোডটি ট্রান্সপাইল করতে চান তা নির্দিষ্ট করতে পারেন।

উদাহরণ: IE 11 এবং Chrome 80 এর জন্য কোড ট্রান্সপাইল করা

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": ["> 1%", "last 2 versions", "IE 11"]
        }
      }
    ]
  ]
}

এখানে:

• "browsers" অপশনে ব্রাউজারের ভার্সন এবং জনপ্রিয়তার ভিত্তিতে কোড ট্রান্সপাইল হবে।
• "last 2 versions" মানে শেষ দুটি ব্রাউজার সংস্করণ সমর্থিত হবে।

Step 4: Polyfills সহ কাজ করা

Babel polyfill ব্যবহারের মাধ্যমে নতুন ফিচারগুলিকে পুরনো ব্রাউজারেও কাজ করার উপযোগী করে তোলে। আপনি যদি polyfill ব্যবহার করতে চান, তাহলে useBuiltIns এবং corejs অপশন ব্যবহার করতে হবে।

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry", 
        "corejs": 3
      }
    ]
  ]
}

এখানে:

• useBuiltIns: "entry": এর মানে হল যে polyfill গুলি কেবল তখনই লোড হবে যখন আপনি import "core-js"; বা import "regenerator-runtime/runtime"; যোগ করবেন।
• corejs: 3: এটি polyfill গুলোর ভার্সন নির্দিষ্ট করে (যেমন, core-js ভার্সন 3)।

আপনি যদি চাইলে useBuiltIns অপশনে "usage" ব্যবহার করতে পারেন, যাতে শুধুমাত্র আপনার কোডে ব্যবহৃত ফিচারগুলির জন্য polyfill লোড হয়।

@babel/preset-env এর অপশনসমূহ

1. targets: আপনার কোড কোন পরিবেশে চলবে তা নির্দিষ্ট করতে ব্যবহৃত হয়। উদাহরণস্বরূপ, ব্রাউজার বা Node.js সংস্করণ।
2. useBuiltIns: polyfill ব্যবহারের কিভাবে তা পরিচালনা করবে, যেমন "entry" বা "usage"।
3. corejs: polyfill গুলি কোন ভার্সনের জন্য ব্যবহার করা হবে তা নির্দিষ্ট করা।
4. modules: মডিউল সিস্টেমটি কোন ফরম্যাটে থাকবে তা নির্ধারণ করা। উদাহরণস্বরূপ, false, "commonjs", "umd" ইত্যাদি।

@babel/preset-env এর উদাহরণ কনফিগারেশন

babel.config.js (নতুন ফিচারের জন্য কাস্টম কনফিগারেশন)

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: '> 0.25%, not dead',  // সর্বাধিক জনপ্রিয় ব্রাউজার
        useBuiltIns: 'usage',           // ব্যবহৃত ফিচারের জন্য polyfill
        corejs: 3,                     // core-js ভার্সন 3 ব্যবহার
      },
    ],
  ],
};

@babel/preset-env এর উপকারিতা

1. কাস্টমাইজেশন: আপনি আপনার প্রজেক্টের জন্য খুবই নির্দিষ্ট কনফিগারেশন তৈরি করতে পারেন, যেমন কোন ব্রাউজার বা Node.js সংস্করণের জন্য কোড ট্রান্সপাইল করা হবে।
2. Polyfill ব্যবস্থাপনা: useBuiltIns এবং corejs এর মাধ্যমে স্বয়ংক্রিয়ভাবে polyfills অন্তর্ভুক্ত করতে পারে।
3. কমপাইলিং সহজ করে: একটি কনফিগারেশন দিয়ে আপনি কোডের আধুনিক বৈশিষ্ট্যগুলোকে পুরনো ব্রাউজার বা পরিবেশে সমর্থনযোগ্য করে ফেলতে পারেন।

সারাংশ

@babel/preset-env হল একটি অত্যন্ত শক্তিশালী Babel preset যা আধুনিক JavaScript ফিচারগুলোকে পুরনো ব্রাউজার বা Node.js পরিবেশের জন্য উপযোগী করে তোলে। এটি কাস্টমাইজযোগ্য, স্বয়ংক্রিয়ভাবে polyfill অন্তর্ভুক্ত করতে পারে এবং একটি নির্দিষ্ট টার্গেট প্ল্যাটফর্মের জন্য কোড ট্রান্সপাইল করতে সাহায্য করে। এটি JavaScript ডেভেলপমেন্টকে সহজ এবং কার্যকরী করে তোলে, বিশেষত যখন পুরনো ব্রাউজার সাপোর্ট করা প্রয়োজন।

BabelJS এর মধ্যে @babel/preset-env একটি অত্যন্ত শক্তিশালী এবং জনপ্রিয় preset (প্রিসেট) যা JavaScript কোডকে পুরনো ব্রাউজার বা পরিবেশে চলার মতো রূপান্তরিত করতে ব্যবহৃত হয়। এটি ES6 বা পরবর্তী JavaScript সংস্করণ (যেমন ES7, ES8) কে পুরনো সংস্করণে রূপান্তরিত করার জন্য বিভিন্ন প্লাগিন এবং ট্রান্সফরমেশন ব্যবহার করে।

@babel/preset-env এর কাজ

@babel/preset-env মূলত আপনার বর্তমান JavaScript কোডটি পর্যালোচনা করে এবং প্রয়োজনীয় ট্রান্সফরমেশন এবং প্লাগিনসমূহ নির্বাচন করে, যাতে কোডটি একটি নির্দিষ্ট ব্রাউজার বা পরিবেশে সঠিকভাবে কাজ করতে পারে। এটি মডার্ন JavaScript ফিচারগুলো (যেমন, Arrow Functions, Promises, Class, Destructuring) কে পুরনো JavaScript সংস্করণ (ES5) তে রূপান্তর করে।

@babel/preset-env এর কাজের প্রধান দিকগুলো

1. ব্রাউজার বা পরিবেশের জন্য ট্রান্সফরমেশন
   @babel/preset-env এর মাধ্যমে আপনি নির্দিষ্ট ব্রাউজার বা পরিবেশের জন্য ট্রান্সপাইলিং (transpiling) করতে পারেন। উদাহরণস্বরূপ, আপনি যদি বলতে চান যে আপনার কোডটি শুধুমাত্র Internet Explorer 11 বা আধুনিক Chrome, Firefox এবং Safari ব্রাউজারে কাজ করবে, তাহলে preset-env সেই অনুযায়ী কোডটি ট্রান্সপাইল করবে।
2. Polyfills যোগ করা
   যেসব নতুন JavaScript ফিচারগুলি পুরনো ব্রাউজার বা পরিবেশে সমর্থিত নয় (যেমন Array.prototype.includes বা Promise), preset-env স্বয়ংক্রিয়ভাবে প্রয়োজনীয় polyfills যুক্ত করবে। Polyfills হল এমন স্ক্রিপ্ট যা নতুন ফিচারগুলোর সমর্থন আনতে পুরনো ব্রাউজারে যোগ করা হয়।

3. আপনার টার্গেট নির্ধারণ
   preset-env ব্যবহার করার সময় আপনি target environments নির্ধারণ করতে পারেন, যেমন:

   • ব্রাউজারের সংস্করণ (যেমন, Chrome 80, Firefox 70)
   • Node.js এর সংস্করণ
   • বা এমনকি সাধারণ “last 2 versions” বা “> 0.25%” (সবচেয়ে জনপ্রিয় ব্রাউজার) এর মতো কভারেজ ব্যবহার করা যায়।

   উদাহরণ:

   {
     "presets": [
       [
         "@babel/preset-env",
         {
           "targets": "> 0.25%, not dead"
         }
       ]
     ]
   }
   

   এখানে "targets": "> 0.25%, not dead" এর মানে হল যে preset-env কোডটিকে শুধুমাত্র এমন ব্রাউজারে ট্রান্সপাইল করবে যেগুলোর বাজারে জনপ্রিয়তা 0.25% এর বেশি, এবং dead ব্রাউজার (যেগুলো আর আপডেট হয় না) বাদ দেবে।

4. স্মার্ট ট্রান্সফরমেশন
   preset-env স্মার্টভাবে কোড ট্রান্সফর্ম করে শুধুমাত্র সেই ফিচারগুলো ট্রান্সপাইল করে যা টার্গেট পরিবেশে সমর্থিত নয়। এর ফলে কোডের সাইজ কম থাকে এবং অপ্রয়োজনীয় ট্রান্সফরমেশন হয় না।

@babel/preset-env কিভাবে কাজ করে?

এটি কাজ করে নির্দিষ্ট কনফিগারেশন ও টার্গেট পরিবেশের উপর ভিত্তি করে। যখন আপনি @babel/preset-env ব্যবহার করেন, এটি আপনার কোডের জন্য উপযুক্ত প্লাগিন এবং ট্রান্সফরমেশন নির্বাচন করে এবং আপনার নির্ধারিত টার্গেট ব্রাউজারে কাজ করার জন্য কোডটি রূপান্তর করে।

উদাহরণ:

1. targets অপশন দিয়ে নির্দিষ্ট পরিবেশ লক্ষ্য করা
   ধরুন আপনি আপনার কোডটিকে Internet Explorer 11 এবং সর্বশেষ দুইটি Chrome সংস্করণের জন্য ট্রান্সপাইল করতে চান:

   {
     "presets": [
       [
         "@babel/preset-env",
         {
           "targets": {
             "browsers": ["IE 11", "last 2 versions"]
           }
         }
       ]
     ]
   }
   

2. useBuiltIns এবং corejs অপশন
   আপনার কোডে যেসব নতুন JavaScript ফিচার রয়েছে, সেগুলোর জন্য Polyfills যুক্ত করার জন্য আপনি useBuiltIns অপশন এবং corejs সংস্করণ ব্যবহার করতে পারেন। এতে আপনি কোন JavaScript ফিচারগুলো Polyfill করতে চান তা নির্ধারণ করতে পারবেন।

   উদাহরণ:

   {
     "presets": [
       [
         "@babel/preset-env",
         {
           "useBuiltIns": "entry",
           "corejs": 3
         }
       ]
     ]
   }
   

   এখানে:

   • useBuiltIns: "entry" অর্থ হল যে আপনাকে আপনার অ্যাপ্লিকেশনের প্রধান এন্ট্রি ফাইলে import "core-js"; যোগ করতে হবে।
   • corejs: 3 দ্বারা আপনি নির্দিষ্ট করেন যে Polyfill এর জন্য core-js এর 3rd সংস্করণ ব্যবহার হবে।

@babel/preset-env এর অন্যান্য অপশন

1. modules: এটি নির্ধারণ করে যে আপনি মডিউল সিস্টেমের জন্য কী ধরনের ট্রান্সফরমেশন চান। আপনি যদি Webpack বা Rollup এর মতো বান্ডলার ব্যবহার করেন, তাহলে আপনি মডিউল সিস্টেমকে false হিসেবে সেট করতে পারেন যাতে মডিউলগুলো ES6 মডিউল হিসেবে থাকে এবং বাণ্ডলিং সময় এগুলি প্রক্রিয়া করা হয়।

   উদাহরণ:

   {
     "presets": [
       [
         "@babel/preset-env",
         {
           "modules": false
         }
       ]
     ]
   }
   

2. shippedProposals: এটি ES বৈশিষ্ট্যগুলির ভবিষ্যত সংস্করণ যা সম্ভবত ব্রাউজারে শিপ হবে, তাদের জন্য Polyfill যোগ করার জন্য ব্যবহৃত হয়।

সারাংশ

@babel/preset-env হলো একটি অত্যন্ত শক্তিশালী টুল যা ES6 এবং পরবর্তী সংস্করণের JavaScript কোডকে পুরনো ব্রাউজার এবং পরিবেশের সাথে সামঞ্জস্যপূর্ণ করতে রূপান্তরিত করে। এটি আপনার নির্দিষ্ট target environments অনুসারে কেবলমাত্র প্রয়োজনীয় প্লাগিন এবং Polyfills যোগ করে, ফলে কোডের সাইজ কম হয় এবং কার্যকারিতা বজায় থাকে। targets, useBuiltIns, corejs, এবং অন্যান্য অপশনগুলি ব্যবহার করে আপনি কীভাবে কোডটি ট্রান্সপাইল হবে তা নিয়ন্ত্রণ করতে পারেন।

@babel/preset-env হলো একটি Babel preset যা আপনার JavaScript কোডকে সেই ব্রাউজার বা প্ল্যাটফর্মের জন্য ট্রান্সপাইল (transpile) করে, যেখানে এটি চলবে। এটি মূলত ES6 (বা তার পরবর্তী সংস্করণ) এর নতুন ফিচারগুলোকে পুরনো ব্রাউজারে কাজ করার জন্য সমর্থনযোগ্য (backward compatible) কোডে রূপান্তর করে। এই preset ব্যবহার করে আপনি নির্দিষ্ট ব্রাউজার বা প্ল্যাটফর্মের জন্য কোডকে কাস্টমাইজ করতে পারেন, যাতে কোড শুধুমাত্র সেইসব ফিচারগুলো অন্তর্ভুক্ত করে যা আপনার লক্ষ্য প্ল্যাটফর্মে সমর্থিত।

@babel/preset-env কীভাবে কাজ করে?

@babel/preset-env আপনার কোডকে এমনভাবে রূপান্তরিত করে যাতে তা আধুনিক JavaScript ফিচার (যেমন arrow functions, async/await, etc.) পুরনো বা সীমিত ব্রাউজারে সমর্থিত হয়। এটি কনফিগারেশনের মাধ্যমে আপনাকে নির্দেশ দেয় যে, আপনি কোন ব্রাউজারগুলোতে আপনার কোড চালাতে চান এবং সেই অনুযায়ী কোড ট্রান্সপাইল করা হয়।

@babel/preset-env ব্রাউজার কম্প্যাটিবিলিটি পরিচালনার জন্য দুইটি মূল পদ্ধতি ব্যবহার করে:

1. ব্যবহারকারীর পছন্দের ব্রাউজার নির্ধারণ (Targets): আপনি কোন ব্রাউজারে বা JavaScript রuntime-এ কোড রান করতে চান তা নির্দিষ্ট করতে পারেন।
2. polyfills এবং transformations: এটি প্রয়োজনীয় polyfills এবং transformations যোগ করে, যাতে পুরনো ব্রাউজারগুলো নতুন ফিচারগুলো বুঝতে পারে।

ব্রাউজার বা প্ল্যাটফর্ম নির্ধারণ করা

@babel/preset-env কনফিগার করার সময় আপনি targets অপশন ব্যবহার করে নির্দিষ্ট করতে পারেন যে কোন ব্রাউজার বা প্ল্যাটফর্মের জন্য কোডটিকে ট্রান্সপাইল করা হবে।

কনফিগারেশন উদাহরণ:

1. ব্রাউজার সাপোর্টের জন্য targets:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "> 0.25%, not dead"
      }
    ]
  ]
}

এখানে:

• > 0.25%: বিশ্বের ০.২৫% ব্রাউজারের জন্য কোডটিকে সমর্থনযোগ্য করতে বলছে।
• not dead: অর্থাৎ, যে ব্রাউজারগুলো আর ব্যবহার হয় না বা যেগুলোর সাপোর্ট বন্ধ হয়ে গেছে (যেমন Internet Explorer 10), সেগুলোর জন্য কোড রূপান্তর করতে চাইছে না।

2. নির্দিষ্ট ব্রাউজার নির্ধারণ:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": "58",
          "firefox": "54",
          "safari": "10"
        }
      }
    ]
  ]
}

এখানে কোড শুধুমাত্র Chrome 58, Firefox 54, এবং Safari 10 এর জন্য ট্রান্সপাইল হবে।

3. ব্রাউজার ভার্সন রেঞ্জ:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "last 2 versions"
      }
    ]
  ]
}

এখানে last 2 versions নির্দেশ করছে যে, কোডটি সর্বশেষ দুইটি ভার্সনের সকল ব্রাউজারের জন্য সমর্থনযোগ্য হবে।

4. Node.js রuntime এর জন্য:

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

এখানে node: "10" ব্যবহার করে Node.js এর ভার্সন 10 এর জন্য কোডটিকে ট্রান্সপাইল করতে বলা হচ্ছে।

Polyfill সমর্থন

Polyfills হলো কোডের ছোট অংশ যা পুরনো ব্রাউজারে নতুন JavaScript ফিচারগুলো সমর্থনযোগ্য করে তোলে। যেমন, যদি আপনার কোডে Promise বা Object.assign ব্যবহার করা থাকে, তাহলে পুরনো ব্রাউজারে এই ফিচারগুলো কাজ না করার সম্ভাবনা থাকে। @babel/preset-env এই সমস্যা সমাধান করতে সাহায্য করে, যাতে প্রয়োজনীয় polyfills স্বয়ংক্রিয়ভাবে কোডে যুক্ত হয়।

Polyfill যোগ করার জন্য দুটি প্রধান পদ্ধতি:

1. UseBuiltIns: "usage": এই অপশনটি ব্যবহার করলে, Babel শুধুমাত্র আপনার কোডে যেসব নতুন ফিচার ব্যবহার করা হয়েছে তা সাপোর্ট করার জন্য polyfills যোগ করবে। এটি সবচেয়ে কার্যকরী পদ্ধতি, কারণ এতে অব্যবহৃত polyfill গুলো অন্তর্ভুক্ত করা হয় না।

   উদাহরণ:

   {
     "presets": [
       [
         "@babel/preset-env",
         {
           "useBuiltIns": "usage",
           "corejs": 3
         }
       ]
     ]
   }
   

   এখানে:

   • useBuiltIns: "usage": কেবলমাত্র কোডে ব্যবহৃত নতুন ফিচারগুলির জন্য polyfills যুক্ত করবে।
   • corejs: 3: core-js লাইব্রেরির ৩য় সংস্করণ ব্যবহার করে polyfill গুলি যোগ করা হবে।

2. UseBuiltIns: "entry": এই অপশনটি ব্যবহার করলে, আপনাকে core-js এবং regenerator-runtime এর entry পয়েন্টগুলো নিজে যোগ করতে হবে। এটি পুরো প্রজেক্টের জন্য polyfills লোড করবে।

   উদাহরণ:

   {
     "presets": [
       [
         "@babel/preset-env",
         {
           "useBuiltIns": "entry",
           "corejs": 3
         }
       ]
     ]
   }
   

   এই ক্ষেত্রে আপনাকে আপনার কোডের entry ফাইলে polyfill যোগ করতে হবে:

   import "core-js";
   import "regenerator-runtime/runtime";
   

অন্যান্য @babel/preset-env অপশন

• loose: এই অপশনটি ব্যবহার করলে, Babel কিছু ফিচারের ট্রান্সপাইলিংয়ের সময় আরও বেশি অনুমতি দেয়, যাতে কোড ছোট হয় এবং আরও দ্রুত চলে, তবে এতে কিছু বৈশিষ্ট্য ক্ষতিগ্রস্ত হতে পারে।

  {
    "presets": [
      [
        "@babel/preset-env",
        {
          "loose": true
        }
      ]
    ]
  }
  

• modules: এই অপশনটি false করলে, Babel মডিউল সিস্টেমটি পরিবর্তন করবে না (যেমন ES মডিউল)। এটি আপনার কোডকে ক্লায়েন্ট সাইডে সহজে বান্ধব করবে।

  {
    "presets": [
      [
        "@babel/preset-env",
        {
          "modules": false
        }
      ]
    ]
  }
  

সারাংশ

@babel/preset-env হল একটি শক্তিশালী Babel preset যা ES6 এবং পরবর্তী সংস্করণের ফিচারগুলোকে এমনভাবে রূপান্তরিত করে, যাতে তা শুধুমাত্র আপনার লক্ষ্য ব্রাউজার বা প্ল্যাটফর্মে সমর্থিত হয়। এটি আপনাকে targets অপশনের মাধ্যমে নির্দিষ্ট ব্রাউজার বা Node.js সংস্করণ নির্ধারণের সুবিধা দেয় এবং polyfills যোগ করতে সাহায্য করে, যাতে আপনার কোড পুরনো ব্রাউজারেও ঠিকভাবে কাজ করে। @babel/preset-env এর মাধ্যমে আপনি কোডের কম্প্যাটিবিলিটি পরিচালনা করতে পারেন এবং প্রয়োজনীয় ফিচারগুলো ছেড়ে দেয়ার মাধ্যমে কোডকে ছোট ও দ্রুত রাখতে পারেন।

BabelJS এর @babel/preset-env একটি শক্তিশালী এবং অত্যন্ত ব্যবহৃত preset যা আপনার কোডকে নির্দিষ্ট target environment অনুযায়ী ট্রান্সপাইল (রূপান্তর) করতে সহায়তা করে। এর মাধ্যমে আপনি আপনার কোডটি বিভিন্ন ব্রাউজার, Node.js ভার্সন, বা অন্যান্য JavaScript রানটাইম প্ল্যাটফর্মে চালানোর উপযোগী করতে পারেন।

এটি সাধারণত পুরনো ব্রাউজার বা পরিবেশে আধুনিক JavaScript কোড (যেমন ES6, ES7+) চালানোর জন্য ব্যবহার করা হয়, যাতে আপনার কোডটির সর্বোচ্চ সম্ভাব্য সামঞ্জস্যতা নিশ্চিত হয়।

@babel/preset-env এর কাজ

@babel/preset-env আপনার target environment এর উপর ভিত্তি করে কোডের ট্রান্সফর্মেশন এবং polyfill প্রয়োগ করে। এটি প্রধানত দুইটি কাজ করে:

1. সিনট্যাক্স ট্রান্সফরমেশন: আধুনিক JavaScript সিনট্যাক্স (যেমন arrow functions, classes, modules ইত্যাদি) কে পুরনো ভার্সনে রূপান্তরিত করা, যাতে পুরনো ব্রাউজার বা পরিবেশে কাজ করতে পারে।
2. Polyfills যোগ করা: নতুন JavaScript ফিচার (যেমন Promise, Array.from, Object.assign ইত্যাদি) যদি ব্রাউজারে সাপোর্ট না থাকে, তাহলে স্বয়ংক্রিয়ভাবে polyfills যোগ করা, যাতে ওই ফিচারগুলো সঠিকভাবে কাজ করে।

টার্গেট Environment কনফিগারেশন

@babel/preset-env টার্গেট পরিবেশ কনফিগার করার জন্য বিভিন্ন অপশন প্রদান করে। এর মাধ্যমে আপনি কোন ব্রাউজার বা JavaScript রানটাইমের জন্য কোডটি তৈরি করবেন, তা নির্ধারণ করতে পারেন। এটি সাধারণত targets ফিল্ড ব্যবহার করে কনফিগার করা হয়।

১. targets অপশন

targets অপশনটি আপনাকে নির্দিষ্ট করে দিতে পারে যে, আপনি কোডটি কোন ব্রাউজার বা JavaScript ভার্সনের জন্য রূপান্তর করতে চান। এটি কয়েকটি উপায়ে কনফিগার করা যেতে পারে:

১.১ ব্রাউজার অনুযায়ী টার্গেট

আপনি ব্রাউজারের নাম এবং ভার্সন অনুযায়ী টার্গেট করতে পারেন। উদাহরণস্বরূপ, যদি আপনি কোডটি Chrome 58 এবং Firefox 50 এর জন্য সমর্থিত করতে চান, তাহলে আপনি এইভাবে কনফিগার করবেন:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": ["Chrome 58", "Firefox 50"]
        }
      }
    ]
  ]
}

১.২ ব্রাউজারের বাজার শেয়ার অনুযায়ী টার্গেট

আপনি ব্রাউজারের বাজার শেয়ার অনুযায়ীও টার্গেট করতে পারেন। উদাহরণস্বরূপ, আপনি যেসব ব্রাউজারের বাজার শেয়ার 1% বা তার বেশি, সেগুলোর জন্য কোডটি ট্রান্সপাইল করতে চাইলে:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "> 1%, not dead"
      }
    ]
  ]
}

এখানে:

• > 1% মানে বাজারে ১% বা তার বেশি শেয়ার রয়েছে এমন ব্রাউজার।
• not dead মানে মারা যাওয়া ব্রাউজারগুলি বাদ দেওয়া।

১.৩ ব্রাউজারের সর্বশেষ সংস্করণ

আপনি ব্রাউজারের সর্বশেষ দুটি ভার্সন লক্ষ্য করতে চাইলে:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": ["last 2 versions"]
        }
      }
    ]
  ]
}

এখানে, last 2 versions অর্থ হলো ব্রাউজারের সর্বশেষ দুটি ভার্সন।

১.৪ Node.js ভার্সন অনুযায়ী টার্গেট

আপনি Node.js এর নির্দিষ্ট ভার্সনের জন্য কোডটি ট্রান্সপাইল করতে চাইলে:

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

এখানে, node: "14" Node.js এর ১৪ তম সংস্করণের জন্য কোডটি ট্রান্সপাইল করবে।

২. useBuiltIns এবং corejs অপশন

যদি আপনার টার্গেট পরিবেশে কিছু আধুনিক JavaScript ফিচার বা API (যেমন Array.from, Promise ইত্যাদি) না থাকে, তাহলে আপনি polyfills ব্যবহার করতে পারেন। useBuiltIns এবং corejs অপশন দুটি আপনাকে এই পলিফিলগুলো স্বয়ংক্রিয়ভাবে অন্তর্ভুক্ত করতে সহায়তা করবে।

২.১ useBuiltIns

• useBuiltIns: "entry": এই অপশন ব্যবহার করলে, আপনাকে core-js এবং regenerator-runtime ডিপেন্ডেন্সি ফাইলগুলো import করতে হবে এবং এটি প্রয়োজনীয় polyfills ইনক্লুড করবে।
• useBuiltIns: "usage": এই অপশন ব্যবহার করলে, শুধুমাত্র আপনার কোডে ব্যবহৃত ফিচারগুলোর জন্য polyfills যোগ করা হবে।

২.২ corejs

corejs অপশনটি নির্ধারণ করে কোন ভার্সনের core-js পলিফিলগুলো ব্যবহার করতে চান। corejs এর দুটি ভার্সন রয়েছে: 2.x এবং 3.x।

উদাহরণ:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "> 0.25%, not dead",
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]
}

এখানে:

• useBuiltIns: "usage": কেবলমাত্র আপনার কোডে ব্যবহৃত ফিচারগুলোর জন্য polyfills অন্তর্ভুক্ত হবে।
• corejs: 3: Core-js এর ৩য় ভার্সন ব্যবহার করা হবে।

৩. Force All Polyfills

আপনি যদি সবগুলো polyfills ইনক্লুড করতে চান, তবে useBuiltIns: "entry" এর সাথে আপনাকে polyfills এর জন্য ম্যানুয়ালি import করতে হবে:

import "core-js";
import "regenerator-runtime/runtime";

এভাবে সবগুলোর জন্য পলিফিলস যোগ করা হবে।

সারাংশ

@babel/preset-env এর মাধ্যমে আপনি target environment কনফিগার করতে পারেন এবং সেই অনুযায়ী কোডটিকে ট্রান্সপাইল করতে পারেন। targets অপশনটি আপনাকে নির্দিষ্ট ব্রাউজার বা Node.js ভার্সন কনফিগার করার সুযোগ দেয়। এর সাথে আপনি useBuiltIns এবং corejs অপশন ব্যবহার করে স্বয়ংক্রিয়ভাবে polyfills অন্তর্ভুক্ত করতে পারেন।

এটি মূলত কোডটিকে সব ধরণের পুরনো পরিবেশে চলার উপযোগী করে তোলে, যাতে আপনার JavaScript কোডটি সর্বোচ্চ সংখ্যক ব্রাউজার এবং প্ল্যাটফর্মে কাজ করতে পারে।

@babel/preset-react একটি জনপ্রিয় Babel preset যা React এর JSX (JavaScript XML) সিনট্যাক্সকে সাধারণ JavaScript কোডে রূপান্তর করতে ব্যবহৃত হয়। React ব্যবহারের সময় JSX সিনট্যাক্স ব্যবহার করা হয়, যা JavaScript কোডের ভিতরে HTML-এর মতো কোড লেখার সুবিধা দেয়। কিন্তু, ব্রাউজারে JSX সরাসরি কাজ করে না, তাই এটি Babel-এর মাধ্যমে ট্রান্সপাইল করতে হয়।

@babel/preset-react presetটি JSX কোডকে JavaScript কোডে রূপান্তরিত করতে এবং React সম্পর্কিত অন্যান্য বৈশিষ্ট্য সমর্থন করতে ব্যবহৃত হয়।

@babel/preset-react এর কার্যকারিতা

১. JSX রূপান্তর (JSX Transformation)

JSX কোডকে সাধারণ JavaScript কোডে রূপান্তর করা হয়। উদাহরণস্বরূপ:

JSX:

const element = <h1>Hello, world!</h1>;

রূপান্তরিত JavaScript:

const element = React.createElement('h1', null, 'Hello, world!');

এই রূপান্তরটি নিশ্চিত করে যে React কোড ব্রাউজারে সঠিকভাবে কাজ করবে।

২. React কোডের জন্য সুপারিশকৃত প্লাগিন ব্যবহার

React-এর কিছু নতুন ফিচার যেমন automatic JSX runtime বা class properties এর জন্য অতিরিক্ত প্লাগিনের প্রয়োজন হয়। @babel/preset-react এই প্লাগিনগুলো স্বয়ংক্রিয়ভাবে কনফিগার করে দেয়।

৩. JSX রানটাইম (JSX Runtime)

React 17 থেকে automatic JSX runtime চালু হয়েছে, যা React কোডে React নামক গ্লোবাল ভেরিয়েবল ব্যবহার করার প্রয়োজনীয়তা কমিয়ে দেয়। @babel/preset-react এর মাধ্যমে এটি সমর্থন পাওয়া যায়।

@babel/preset-react সেটআপ

React প্রজেক্টে @babel/preset-react ব্যবহার করার জন্য আপনাকে সেটি ইনস্টল এবং কনফিগার করতে হবে।

১. ইনস্টলেশন

প্রথমে আপনাকে @babel/preset-react ইনস্টল করতে হবে। কমান্ড লাইন থেকে নিচের কোডটি চালান:

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

২. Babel কনফিগারেশন ফাইল আপডেট

এখন আপনাকে Babel কনফিগারেশন ফাইলে (যেমন .babelrc বা babel.config.js) @babel/preset-react যোগ করতে হবে।

.babelrc (যদি .babelrc ফাইল ব্যবহার করেন):

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

babel.config.js (যদি babel.config.js ব্যবহার করেন):

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react'
  ]
};

এখন Babel আপনার React JSX কোডকে সঠিক JavaScript কোডে রূপান্তরিত করবে।

React 17+ এর জন্য JSX Runtime

React 17 থেকে JSX ব্যবহার করার জন্য React ভেরিয়েবলটি আর import করার প্রয়োজন নেই, যদি আপনি automatic JSX runtime ব্যবহার করেন। @babel/preset-react এর মাধ্যমে এটি স্বয়ংক্রিয়ভাবে কনফিগার করা যায়।

১. Automatic Runtime সক্রিয় করা

যদি React 17 বা তার পরবর্তী ভার্সন ব্যবহার করেন, তাহলে @babel/preset-react সেটআপ করার সময় runtime অপশনটি automatic হিসাবে সেট করুন।

babel.config.js:

module.exports = {
  presets: [
    [
      '@babel/preset-react',
      {
        runtime: 'automatic'
      }
    ]
  ]
};

এই কনফিগারেশনের মাধ্যমে, Babel JSX ট্রান্সপাইল করার সময় React.createElement() কে অটোমেটিকালি ব্যবহার করবে, এবং আপনার কোডে React ইমপোর্টের প্রয়োজন হবে না।

২. Legacy Runtime

React 16.x এর জন্য, আপনাকে JSX কোডে React ইমপোর্ট করতে হবে। এই জন্য runtime অপশনটি classic রাখতে হবে।

module.exports = {
  presets: [
    [
      '@babel/preset-react',
      {
        runtime: 'classic'
      }
    ]
  ]
};

@babel/preset-react এর সুবিধাসমূহ

1. JSX ট্রান্সপাইল: JSX সিনট্যাক্সকে ব্রাউজারে চলা JavaScript কোডে রূপান্তর করা।
2. Automatic JSX Runtime: React 17+ এর automatic runtime এর মাধ্যমে React ইমপোর্টের প্রয়োজনীয়তা কমানো।
3. Class Properties সমর্থন: React ক্লাস কম্পোনেন্টগুলিতে ক্লাস প্রপার্টি এবং ফাংশনাল কম্পোনেন্টে হুকস সমর্থন।
4. React এর নতুন ফিচারের সাথে সামঞ্জস্যপূর্ণ: React-এর নতুন ফিচারগুলো যেমন fragment shorthand, React.createElement কম্প্যাক্ট কোড সমর্থন।

সারাংশ

@babel/preset-react একটি গুরুত্বপূর্ণ Babel preset যা React JSX কোডকে সঠিক JavaScript কোডে রূপান্তরিত করতে ব্যবহৃত হয়। এটি React এর আধুনিক ফিচারগুলো যেমন automatic JSX runtime, class properties, এবং React এর অন্যান্য নতুন বৈশিষ্ট্যগুলির সমর্থন প্রদান করে। React প্রজেক্টে সহজে JSX কোড ট্রান্সপাইল করতে এই presetটি ব্যবহৃত হয়, যা কোডের উন্নয়ন এবং কার্যক্ষমতা বাড়াতে সাহায্য করে।

React কোড, যেমন JSX (JavaScript XML), React এর জন্য একটি বিশেষ সিনট্যাক্স যা ব্রাউজারে সরাসরি রান করতে পারে না। এটি একটি HTML-অনুপ্রাণিত সিনট্যাক্স যা JavaScript কোডের মধ্যে লেখা হয়। তবে, ব্রাউজারগুলি JSX বুঝতে পারে না, তাই JSX কোডকে সাধারণ JavaScript কোডে রূপান্তর (Transpile) করতে হয়। এই কাজটি করার জন্য BabelJS ব্যবহৃত হয় এবং @babel/preset-react হল সেই প্যাকেজ যা React কোডকে ট্রান্সপাইল করতে সাহায্য করে।

@babel/preset-react এর ভূমিকা

@babel/preset-react একটি Babel preset যা JSX (JavaScript XML) এবং অন্যান্য React ফিচারগুলিকে সাধারণ JavaScript কোডে রূপান্তর করে। এটি JSX সিনট্যাক্সকে React.createElement() কলসের মধ্যে রূপান্তর করে, যাতে React কোডটি ব্রাউজারে সঠিকভাবে কাজ করতে পারে।

@babel/preset-react এর কাজ কীভাবে করে?

React কোডের জন্য JSX এবং React-specific features যেমন Fragment, PropTypes, এবং jsx ফিচারগুলিকে সঠিক JavaScript কোডে রূপান্তর করা প্রয়োজন। @babel/preset-react এটি করে এবং এতে কিছু অতিরিক্ত অপশনও থাকে যা React এর বিভিন্ন বৈশিষ্ট্যকে নিয়ন্ত্রণ করতে সাহায্য করে।

JSX ট্রান্সফর্মেশন:

JSX কোডটি সাধারণত React.createElement() ফাংশনের কল হিসেবে রূপান্তরিত হয়। উদাহরণস্বরূপ:

JSX:

const element = <h1>Hello, world!</h1>;

ট্রান্সপাইলড কোড:

const element = React.createElement('h1', null, 'Hello, world!');

@babel/preset-react এর ইনস্টলেশন

Babel এবং @babel/preset-react সেটআপ করতে, প্রথমে আপনাকে প্রয়োজনীয় প্যাকেজগুলো ইনস্টল করতে হবে। এখানে পুরো প্রক্রিয়াটি দেয়া হলো:

১. Babel এবং @babel/preset-react ইনস্টল করা:

Node.js প্রকল্পে Babel এবং React preset ইনস্টল করতে নীচের কমান্ডগুলো চালান:

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

এছাড়াও, যদি আপনি React কোডের ট্রান্সপাইলিং ব্যবহার করতে চান, তবে @babel/preset-env ইনস্টল করাও দরকার হতে পারে:

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

২. Babel কনফিগারেশন ফাইল তৈরি করা:

এখন আপনাকে Babel এর কনফিগারেশন ফাইল তৈরি করতে হবে (যেমন .babelrc বা babel.config.js), যাতে @babel/preset-react নির্ধারণ করা হয়।

উদাহরণ: .babelrc কনফিগারেশন ফাইল

{
  "presets": [
    "@babel/preset-env",   // ES6+ কোড ট্রান্সপাইল করার জন্য
    "@babel/preset-react"  // React কোড ট্রান্সপাইল করার জন্য
  ]
}

এই কনফিগারেশনে:

• @babel/preset-env ES6 বা পরবর্তী JavaScript ফিচারগুলিকে পুরনো ভার্সনে রূপান্তর করবে।
• @babel/preset-react JSX কোড এবং React এর অন্যান্য বৈশিষ্ট্য ট্রান্সপাইল করবে।

৩. কোড ট্রান্সপাইল করা:

Babel কনফিগারেশন সেট আপ করার পর, এখন আপনি আপনার React কোডটিকে ট্রান্সপাইল করতে পারবেন। টার্মিনালে নিম্নলিখিত কমান্ডটি চালান:

npx babel src --out-dir dist

এখানে:

• src হলো আপনার কোডের উৎস ফোল্ডার (যেখানে React কোড রয়েছে)।
• dist হলো আউটপুট ফোল্ডার (যেখানে ট্রান্সপাইল করা কোড থাকবে)।

@babel/preset-react এর অতিরিক্ত ফিচার

@babel/preset-react এর মধ্যে কিছু অতিরিক্ত অপশনও রয়েছে যা আপনাকে React কোড ট্রান্সপাইল করার সময় কাস্টমাইজ করতে সাহায্য করতে পারে:

১. Development এবং Production Mode

• development: এটি React এর জন্য একটি উন্নত ডিবাগিং অভিজ্ঞতা প্রদান করে।
• production: এটি React কোডকে অটো অপটিমাইজ করে, যেমন React.createElement কলগুলো মুছে ফেলে এবং কোডকে ছোট করে।

কনফিগারেশন উদাহরণ:

{
  "presets": [
    ["@babel/preset-env", { "targets": "defaults" }],
    ["@babel/preset-react", { "development": true }]
  ]
}

২. Automatic JSX Runtime (React 17+)

React 17 থেকে JSX কোডকে ট্রান্সপাইল করার জন্য নতুন একটি রUNTIME চালু করা হয়েছে। এটি React কে সরাসরি কোডে ইনপুট দেয়ার প্রয়োজনীয়তা কমিয়ে দেয়।

{
  "presets": [
    ["@babel/preset-react", { "runtime": "automatic" }]
  ]
}

এতে, আপনাকে JSX ব্যবহার করতে হলে React ইমপোর্ট করার প্রয়োজন হয় না, যেমনটা পূর্বে ছিল।

৩. React Refresh (Fast Refresh)

React এর হট রিলোডিং ফিচার React Fast Refresh কে উন্নত করতে সাহায্য করে, যা ডেভেলপমেন্টে কোডের পরিবর্তনগুলিকে দ্রুত এবং সঠিকভাবে দেখায়। এটি বিশেষ করে ডেভেলপমেন্ট পরিবেশে ব্যবহৃত হয়।

সারাংশ

@babel/preset-react React কোডকে ট্রান্সপাইল করতে ব্যবহৃত একটি গুরুত্বপূর্ণ Babel preset। এটি JSX এবং React-specific features (যেমন Fragment, PropTypes) কে সাধারণ JavaScript কোডে রূপান্তর করে, যাতে React কোড ব্রাউজারে সঠিকভাবে কাজ করতে পারে। এটি React 17+ তে automatic JSX runtime সাপোর্ট করে এবং ডেভেলপমেন্ট এবং প্রোডাকশন উভয় পরিবেশে React কোডকে অপটিমাইজ করতে সাহায্য করে।

React কোড ট্রান্সপাইল করতে, আপনি @babel/preset-react সহ অন্যান্য presets (যেমন @babel/preset-env) ব্যবহার করতে পারেন। Babel কনফিগারেশন ফাইলের মাধ্যমে আপনি সহজেই এই সেটআপটি কনফিগার করতে পারবেন।

BabelJS একটি ট্রান্সপাইলার যা ES6+ (এবং তার পরবর্তী সংস্করণ) কোডকে পুরনো JavaScript সংস্করণে রূপান্তরিত করে। @babel/preset-typescript হল একটি Babel preset যা TypeScript কোডকে সাধারণ JavaScript কোডে রূপান্তরিত করে। এটি TypeScript এর টাইপ চেকিং বা টাইপ সিস্টেমকে প্রক্রিয়া করে না, তবে TypeScript কোডকে JavaScript কোডে রূপান্তরিত করতে সহায়তা করে।

@babel/preset-typescript কী?

@babel/preset-typescript একটি Babel preset যা TypeScript কোডের স্ট্যাটিক টাইপ চেকিং কে বাদ দিয়ে, কেবলমাত্র TypeScript সিনট্যাক্সকে JavaScript সিনট্যাক্সে রূপান্তরিত করে। এটি TypeScript এর ts বা tsx এক্সটেনশন ফাইলগুলোকে .js বা .jsx ফাইলে ট্রান্সপাইল করে।

বৈশিষ্ট্য:

• TypeScript কোড ট্রান্সপাইল করা: TypeScript কোড (যেমন .ts এবং .tsx ফাইল) কে সাধারণ JavaScript কোডে রূপান্তরিত করে।
• টাইপ চেকিং ছাড়া ট্রান্সপাইলেশন: এটি শুধুমাত্র সিনট্যাক্স পরিবর্তন করে, টাইপ চেকিং বা টাইপ ত্রুটি যাচাই করে না।
• ব্রাউজার এবং Node.js এর জন্য উপযোগী: এটি JavaScript কোডে রূপান্তরিত হওয়ায়, উভয়ই ব্রাউজার এবং Node.js পরিবেশে কাজ করতে পারে।

ইন্সটলেশন

@babel/preset-typescript ব্যবহার করার জন্য আপনাকে প্রথমে এটি ইনস্টল করতে হবে।

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

কনফিগারেশন

Babel এর কনফিগারেশন ফাইল (যেমন .babelrc অথবা babel.config.js) এ @babel/preset-typescript যুক্ত করতে হবে।

.babelrc বা babel.config.json:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript"
  ]
}

babel.config.js:

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-typescript'
  ]
};

প্রকল্পে TypeScript এবং Babel ব্যবহার করা

যদি আপনি TypeScript কোড লিখতে চান এবং এটি Babel দ্বারা ট্রান্সপাইল করতে চান, তাহলে আপনাকে কিছু অতিরিক্ত কনফিগারেশন এবং ফাইল ব্যবস্থাপনা করতে হবে।

1. TypeScript কনফিগারেশন: TypeScript প্রকল্পের জন্য tsconfig.json ফাইল থাকতে হবে, যা TypeScript এর কনফিগারেশন সেট করে।

   উদাহরণ:

   {
     "compilerOptions": {
       "target": "ES6",          // রূপান্তরিত কোডের টার্গেট ES6
       "module": "ESNext",       // মডিউল সিস্টেম হিসেবে ES মডিউল
       "strict": true            // স্ট্রিক টাইপ চেকিং
     },
     "include": ["src/**/*"]
   }
   

2. Babel কনফিগারেশন: আপনি Babel এর মাধ্যমে TypeScript কোডটিকে JavaScript এ রূপান্তরিত করতে পারবেন, তবে মনে রাখতে হবে, Babel শুধুমাত্র টাইপ চেকিং বাদ দিয়ে কোড ট্রান্সপাইল করে।

টাইপস্ক্রিপ্টের বৈশিষ্ট্য সমর্থন

@babel/preset-typescript মূলত TypeScript কোডের টাইপ সিস্টেম এবং টাইপ চেকিং এর বাইরে কাজ করে, তবে TypeScript এর বিস্তারিত সিনট্যাক্স যেমন ক্লাস ডেকোরেটর, টাইপ অ্যানোটেশন, ইন্টারফেস ইত্যাদি সমর্থন করে।

যেমন:

• Typescript ফিচারসমূহ:
  • ক্লাস ডেকোরেটর (@decorator)
  • টাইপ অ্যানোটেশন (: string, : number)
  • ইন্টারফেস (interface)

@babel/preset-typescript এর মাধ্যমে TypeScript কোডকে সঠিকভাবে JavaScript এ রূপান্তরিত করা যায়।

@babel/preset-typescript এর সীমাবদ্ধতা

• টাইপ চেকিং বা টাইপ ডিফিনিশন চেক করা হয় না: @babel/preset-typescript কেবলমাত্র সিনট্যাক্স ট্রান্সপাইল করে, টাইপ চেকিং করে না। অর্থাৎ, TypeScript ফাইলের টাইপ ভুল থাকলে সেগুলো রূপান্তরিত হবে, কিন্তু ভুল টাইপ সম্পর্কে কোন সতর্কতা বা ত্রুটি দেখাবে না।

  টাইপ চেকিং এর জন্য TypeScript এর নিজস্ব কম্পাইলার (tsc) ব্যবহার করা উচিত।

• অ্যাক্সেসযোগ্য ডিফিনিশন ফাইল (d.ts): @babel/preset-typescript এর মাধ্যমে TypeScript এর *.d.ts ফাইলগুলো রূপান্তরিত হয় না। যদি আপনার প্রকল্পে টাইপ ডিফিনিশন ফাইল থাকে, সেগুলো আপনাকে অন্যভাবে হ্যান্ডেল করতে হবে।

উদাহরণ

ধরা যাক, আপনি একটি TypeScript ফাইল লিখেছেন:

greet.ts

function greet(name: string): string {
  return `Hello, ${name}!`;
}

export { greet };

এখন, আপনি এটি Babel এর মাধ্যমে JavaScript এ রূপান্তরিত করতে চাইলে, @babel/preset-typescript ব্যবহার করবেন।

1. প্রথমে @babel/preset-typescript ইনস্টল করুন:

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

2. তারপরে .babelrc ফাইলে এই preset যোগ করুন:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript"
  ]
}

3. এরপর, greet.ts ফাইলটি ট্রান্সপাইল করে greet.js ফাইলে রূপান্তরিত হবে।

greet.js (JavaScript Output)

function greet(name) {
  return `Hello, ${name}!`;
}

export { greet };

এখানে, TypeScript টাইপগুলো (যেমন string) মুছে যাবে এবং সাধারণ JavaScript কোডে পরিণত হবে।

সারাংশ

• @babel/preset-typescript TypeScript কোডকে JavaScript এ রূপান্তরিত করে।
• এটি টাইপ চেকিং বা টাইপ সিস্টেমের কোনো যাচাই করে না, শুধুমাত্র সিনট্যাক্স পরিবর্তন করে।
• TypeScript ফিচার যেমন টাইপ অ্যানোটেশন এবং ক্লাস ডেকোরেটর সমর্থন করে, তবে টাইপ চেকিং জন্য tsc কম্পাইলার ব্যবহার করতে হবে।

@babel/preset-typescript একটি গুরুত্বপূর্ণ টুল যা TypeScript কোডকে JavaScript এ ট্রান্সপাইল করতে সাহায্য করে, তবে টাইপ চেকিং বা উন্নত TypeScript ফিচারের জন্য আপনাকে অন্য টুলস ব্যবহার করতে হবে।

BabelJS সাধারণত JavaScript কোড ট্রান্সপাইল করার জন্য ব্যবহৃত হয়, কিন্তু যখন TypeScript এবং React কোড ব্যবহৃত হয়, তখন BabelJS এর কিছু বিশেষ সেটিংস এবং প্লাগিনের সাহায্যে এই কোডগুলিকে ট্রান্সপাইল করা হয়। এর মধ্যে একটি গুরুত্বপূর্ণ preset হল @babel/preset-typescript, যা TypeScript কোডকে JavaScript এ রূপান্তর করতে সাহায্য করে।

এছাড়া, React কোডে JSX সিনট্যাক্স ব্যবহৃত হয়, এবং JSX কে সাধারণ JavaScript এ রূপান্তর করার জন্য @babel/preset-react ব্যবহার করা হয়।

১. প্রথমে প্রয়োজনীয় প্যাকেজগুলো ইনস্টল করা

React এবং TypeScript কোডকে সঠিকভাবে ট্রান্সপাইল করতে BabelJS ব্যবহার করার জন্য প্রথমে কিছু নির্দিষ্ট প্যাকেজ ইনস্টল করতে হবে।

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

এছাড়া, আপনি যদি Webpack ব্যবহার করেন, তাহলে babel-loader ইনস্টল করতে হবে।

npm install --save-dev babel-loader

২. Babel কনফিগারেশন তৈরি করা

TypeScript এবং React কোড ট্রান্সপাইল করতে Babel কনফিগারেশন ফাইলে @babel/preset-typescript এবং @babel/preset-react যোগ করতে হবে।

babel.config.js কনফিগারেশন ফাইল উদাহরণ:

module.exports = {
  presets: [
    '@babel/preset-env',          // ES6/ES7 ফিচার সমর্থন করার জন্য
    '@babel/preset-react',        // JSX ট্রান্সপাইল করতে
    '@babel/preset-typescript'    // TypeScript ট্রান্সপাইল করতে
  ]
};

এখানে:

• @babel/preset-env: ES6 বা পরবর্তী সংস্করণের JavaScript কোডকে পুরনো সংস্করণে (যেমন ES5) রূপান্তরিত করতে ব্যবহৃত হয়।
• @babel/preset-react: JSX কোড (React কোড) কে সাধারণ JavaScript এ রূপান্তরিত করতে ব্যবহৃত হয়।
• @babel/preset-typescript: TypeScript কোডকে JavaScript কোডে রূপান্তরিত করতে ব্যবহৃত হয়।

৩. TypeScript কোডের উদাহরণ

ধরা যাক, আপনি একটি TypeScript ফাইল ব্যবহার করছেন যেটিতে React JSX কোড রয়েছে।

App.tsx

import React from 'react';

interface Props {
  name: string;
}

const App: React.FC<Props> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export default App;

এটি একটি React + TypeScript কোড, যেখানে TypeScript টাইপিং এবং JSX ব্যবহৃত হয়েছে।

৪. Babel দ্বারা কোড ট্রান্সপাইল করা

আপনি Babel CLI ব্যবহার করে কোডটিকে ট্রান্সপাইল করতে পারেন। এখানে একটি সাধারণ কমান্ড রয়েছে যা আপনার TypeScript এবং React কোডকে JavaScript এ রূপান্তর করবে:

npx babel src --out-dir dist

এখানে:

• src: আপনার সোর্স ফাইলের ডিরেক্টরি।
• dist: ট্রান্সপাইলড JavaScript ফাইল সেভ করার ডিরেক্টরি।

৫. Webpack ব্যবহার করে Babel Configuration

যদি আপনি Webpack ব্যবহার করে ট্রান্সপাইলিং করতে চান, তবে babel-loader সেটআপ করতে হবে। এখানে একটি সাধারণ Webpack কনফিগারেশন দেওয়া হলো:

webpack.config.js

module.exports = {
  entry: './src/index.tsx',  // আপনার মূল ইনপুট ফাইল
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,  // JS, JSX, TS, এবং TSX ফাইলগুলোকে ট্রান্সপাইল করবে
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  },
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist',
  },
};

এখানে:

• babel-loader ব্যবহার করে আপনার JS, JSX, TS, এবং TSX ফাইলগুলো ট্রান্সপাইল করা হবে।
• resolve.extensions দিয়ে আপনি ফাইল এক্সটেনশন নির্ধারণ করতে পারেন, যাতে Webpack ফাইলগুলো সঠিকভাবে লোড করতে পারে।

৬. React কোডের JSX ট্রান্সপাইলিং

React কোডে JSX সিনট্যাক্স ব্যবহৃত হয়, যেটি Babel এর মাধ্যমে ট্রান্সপাইল করা হয়। @babel/preset-react স্বয়ংক্রিয়ভাবে JSX সিনট্যাক্সকে React.createElement() কলগুলিতে রূপান্তরিত করবে।

JSX উদাহরণ:

const element = <h1>Hello, World!</h1>;

Babel এই JSX কোডটিকে নিম্নরূপে ট্রান্সপাইল করবে:

const element = React.createElement('h1', null, 'Hello, World!');

৭. কোড রান এবং আউটপুট

এখন আপনার কোডটি ট্রান্সপাইল হয়ে যাবে এবং আপনি dist ফোল্ডারে JavaScript আউটপুট পাবেন। আপনি যেকোনো JavaScript পরিবেশে এই কোডটি ব্যবহার করতে পারবেন (যেমন Node.js, ব্রাউজার ইত্যাদি)।

সারাংশ

React এবং TypeScript কোড ট্রান্সপাইল করতে BabelJS ব্যবহার করতে হলে, আপনি @babel/preset-typescript এবং @babel/preset-react প্রিসেটগুলো ব্যবহার করবেন। @babel/preset-typescript TypeScript কোডকে JavaScript এ রূপান্তরিত করবে এবং @babel/preset-react JSX সিনট্যাক্সকে সঠিক JavaScript কোডে রূপান্তর করবে। এই সেটআপের মাধ্যমে আপনি React + TypeScript কোড সহজেই JavaScript পরিবেশে চালাতে পারবেন।

BabelJS একটি শক্তিশালী টুল যা আপনাকে JavaScript কোডটি আধুনিক ফিচার থেকে পুরনো ব্রাউজার বা পরিবেশে সাপোর্ট করার জন্য রূপান্তর করতে সহায়তা করে। তবে শুধু ES6/ES7 কোডই নয়, আপনি বিভিন্ন ফ্রেমওয়ার্ক বা লাইব্রেরি যেমন Vue, Angular ইত্যাদির জন্য নির্দিষ্ট presets ব্যবহার করতে পারেন, যা আপনাকে সহজে এসব পরিবেশের জন্য কাস্টম কোড রূপান্তর করতে সহায়তা করে। এখানে বিভিন্ন জনপ্রিয় ফ্রেমওয়ার্কের জন্য ব্যবহৃত Babel presets এর সম্পর্কে আলোচনা করা হয়েছে।

১. @babel/preset-react (React)

React, যা একটি জনপ্রিয় JavaScript লাইব্রেরি, সাধারণত JSX ব্যবহার করে। JSX হলো HTML এর মতো সিনট্যাক্স যা JavaScript কোডের মধ্যে লেখা হয়। BabelJS এর @babel/preset-react preset এই JSX কোডকে সাধারণ JavaScript এ রূপান্তর করতে সহায়তা করে।

ব্যবহারের উদাহরণ:

{
  "presets": ["@babel/preset-react"]
}

@babel/preset-react JSX কোডকে সাধারণ JavaScript কোডে রূপান্তরিত করে এবং React এর অন্যান্য বৈশিষ্ট্য যেমন React.createElement() ফাংশন ব্যবহার করতে সহায়তা করে।

২. @babel/preset-vue (Vue)

Vue.js হলো আরেকটি জনপ্রিয় JavaScript ফ্রেমওয়ার্ক যা একটি রিয়্যাকটিভ ইউজার ইন্টারফেস তৈরি করতে ব্যবহৃত হয়। Vue-র কোড সাধারণত Vue সিঙ্কট্যাক্স ব্যবহার করে, যা ডিফল্টভাবে JSX-এর মতো নয়। Vue কোডকে সঠিকভাবে ট্রান্সপাইল করার জন্য Babel এর জন্য একটি নির্দিষ্ট preset রয়েছে, যা @babel/preset-vue নামে পরিচিত।

ব্যবহারের উদাহরণ:

{
  "presets": ["@babel/preset-vue"]
}

এই preset Vue ফাইলগুলিকে উপযুক্ত JavaScript কোডে রূপান্তর করতে সহায়তা করে এবং Vue এর single file components (SFC) সমর্থন করে।

৩. @babel/preset-angular (Angular)

Angular হলো একটি শক্তিশালী JavaScript ফ্রেমওয়ার্ক যা TypeScript এবং HTML templates ব্যবহার করে। Angular প্রকল্পে কোড ট্রান্সপাইল করার জন্য @babel/preset-angular একটি নির্দিষ্ট preset হিসেবে ব্যবহৃত হয়। এটি Angular এর ফিচার যেমন decorators এবং TypeScript-এ লেখা কোডকে সমর্থন করতে সহায়তা করে।

ব্যবহারের উদাহরণ:

{
  "presets": ["@babel/preset-angular"]
}

এই preset Angular এর কোড, যেমন TypeScript ফাইল এবং Angular decorators কে আধুনিক JavaScript কোডে রূপান্তর করে।

৪. @babel/preset-typescript (TypeScript)

যদিও TypeScript নিজেই একটি টাইপিং সিস্টেম, BabelJS-এ একটি নির্দিষ্ট preset রয়েছে, যা TypeScript কোডকে JavaScript কোডে রূপান্তরিত করতে সাহায্য করে। @babel/preset-typescript মূলত TypeScript এর নতুন ফিচারগুলোকে সাধারণ JavaScript কোডে রূপান্তর করে, তবে TypeScript-এর টাইপ চেকিং এর কাজটি Babel করে না, সেক্ষেত্রে TSC (TypeScript Compiler) এর মাধ্যমে টাইপ চেকিং করা হয়।

ব্যবহারের উদাহরণ:

{
  "presets": ["@babel/preset-typescript"]
}

এটি TypeScript কোডের type annotations এবং interfaces কে উপেক্ষা করে, শুধুমাত্র কোডটিকে JavaScript-এ রূপান্তরিত করে।

৫. @babel/preset-env (ES6/ES7/ESNext)

যদিও @babel/preset-env মূলত ES6 এবং পরবর্তী সংস্করণের JavaScript কোডের জন্য ব্যবহৃত হয়, তবে এটি অন্যান্য ফ্রেমওয়ার্কের কোড রূপান্তরেও সহায়তা করতে পারে। @babel/preset-env এমন একটি preset যা বর্তমান JavaScript কোডের সব ধরনের ফিচার এবং polyfill ব্যবহারের সুযোগ দেয়, যাতে কোডটি পুরনো ব্রাউজারে কাজ করে।

ব্যবহারের উদাহরণ:

{
  "presets": ["@babel/preset-env"]
}

এই preset ES6/ES7/ESNext ফিচারগুলোকে সাধারণ JavaScript কোডে রূপান্তর করে, যেমন arrow functions, async/await, const/let, ইত্যাদি।

৬. @babel/preset-flow (Flow)

Flow হলো Facebook এর একটি টাইপিং সিস্টেম যা JavaScript কোডে টাইপ চেকিং করতে ব্যবহৃত হয়। BabelJS এর জন্য @babel/preset-flow একটি নির্দিষ্ট preset যা Flow টাইপ অ্যানোটেশনগুলিকে JavaScript কোড থেকে বাদ দিয়ে সাধারণ JavaScript কোডে রূপান্তর করতে ব্যবহৃত হয়।

ব্যবহারের উদাহরণ:

{
  "presets": ["@babel/preset-flow"]
}

এই preset Flow টাইপ অ্যানোটেশনগুলোকে উপেক্ষা করে এবং কোডটিকে সাধারণ JavaScript কোডে রূপান্তরিত করে।

৭. @babel/preset-stage-0, @babel/preset-stage-1, @babel/preset-stage-2, @babel/preset-stage-3

Babel এর stage presets ছিল কিছু নির্দিষ্ট JavaScript ফিচারগুলোর পরীক্ষামূলক (experimental) ফিচার সমর্থন করার জন্য ব্যবহৃত presets। তবে, এগুলো এখন @babel/preset-env দ্বারা প্রতিস্থাপিত হয়েছে। @babel/preset-env আপনাকে নির্দিষ্ট ফিচারগুলোর পলিফিলস এবং ট্রান্সফরমেশন কাস্টমাইজ করার সুযোগ দেয়।

সারাংশ

BabelJS বিভিন্ন ধরনের presets প্রদান করে যা বিভিন্ন ফ্রেমওয়ার্ক এবং লাইব্রেরি সমর্থন করতে সহায়তা করে। এই presets ব্যবহার করে আপনি কোডটিকে নির্দিষ্ট পরিবেশ বা ফিচারের জন্য উপযুক্তভাবে ট্রান্সপাইল করতে পারবেন। জনপ্রিয় কিছু presets হলো:

• @babel/preset-react: React JSX কোড ট্রান্সপাইল করতে ব্যবহৃত।
• @babel/preset-vue: Vue.js কোড ট্রান্সপাইল করতে ব্যবহৃত।
• @babel/preset-angular: Angular কোড ট্রান্সপাইল করতে ব্যবহৃত।
• @babel/preset-typescript: TypeScript কোড ট্রান্সপাইল করতে ব্যবহৃত।
• @babel/preset-env: ES6 এবং পরবর্তী ফিচারগুলোকে পুরনো ব্রাউজার সাপোর্ট করার জন্য ট্রান্সপাইল করতে ব্যবহৃত।

এই presets গুলোর মাধ্যমে আপনি আধুনিক JavaScript ফিচারগুলোর ব্যবহার নিশ্চিত করতে পারবেন এবং কোডের প্রাপ্যতা বাড়াতে পারবেন বিভিন্ন পরিবেশে।