React কোড Transpile করা

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 পরিবেশে চালাতে পারবেন।