BabelJS এর মাধ্যমে TypeScript এবং React সমর্থন

BabelJS মূলত JavaScript কোড ট্রান্সপাইল করতে ব্যবহৃত হলেও, এটি TypeScript এবং React কোড ট্রান্সপাইল করার জন্যও ব্যবহৃত হতে পারে। TypeScript এবং React কোড ব্যবহারের সময় BabelJS আপনাকে আধুনিক ফিচারগুলোর সাথে সঙ্গতিপূর্ণ কোড ট্রান্সপাইল করতে সাহায্য করে, যা পুরনো ব্রাউজারে বা Node.js পরিবেশে চালানো যায়। নিচে TypeScript এবং React কোডের ট্রান্সপাইল করার জন্য BabelJS সেটআপ কিভাবে করা হয়, তা বিস্তারিতভাবে আলোচনা করা হয়েছে।

১. BabelJS দিয়ে TypeScript সমর্থন

BabelJS TypeScript কোডকে JavaScript এ রূপান্তর করতে সহায়তা করে। তবে, TypeScript কোডের টাইপ চেকিংয়ের জন্য আপনাকে আলাদাভাবে TypeScript এর টুলস যেমন tsc ব্যবহার করতে হবে, কারণ Babel শুধুমাত্র কোডটিকে JavaScript এ রূপান্তরিত করে এবং টাইপ চেকিং করেনা।

TypeScript কোডে Babel এর সমর্থন

TypeScript কোডকে ট্রান্সপাইল করার জন্য আপনাকে @babel/preset-typescript প্রিসেট ব্যবহার করতে হবে। এই প্রিসেট TypeScript সিনট্যাক্সকে JavaScript সিনট্যাক্সে রূপান্তর করে।

প্রয়োজনীয় প্যাকেজ ইনস্টলেশন

TypeScript এবং React কোডের জন্য BabelJS সেটআপ করার জন্য নিচের প্যাকেজগুলো ইনস্টল করতে হবে:

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

• @babel/core: BabelJS এর মূল প্যাকেজ।
• @babel/preset-env: ES6 বা পরবর্তী সংস্করণের JavaScript ফিচারগুলোর সমর্থন।
• @babel/preset-react: JSX সিনট্যাক্স সমর্থন করার জন্য।
• @babel/preset-typescript: TypeScript কোড ট্রান্সপাইল করার জন্য।

২. Babel Configuration

BabelJS এর মাধ্যমে TypeScript এবং React কোড ট্রান্সপাইল করার জন্য কনফিগারেশন ফাইলে প্রিসেটগুলো যোগ করতে হবে।

babel.config.js কনফিগারেশন ফাইল

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

এখানে:

• @babel/preset-env: ES6 বা পরবর্তী JavaScript কোড পুরনো ব্রাউজারে রান করার জন্য ট্রান্সপাইল করা হয়।
• @babel/preset-react: JSX কোড ট্রান্সপাইল করার জন্য ব্যবহৃত হয়।
• @babel/preset-typescript: TypeScript কোডকে JavaScript এ রূপান্তরিত করার জন্য ব্যবহৃত হয়।

৩. React কোডে Babel সমর্থন

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

React + TypeScript কোড উদাহরণ:

App.tsx (React + TypeScript কোড)

import React from 'react';

interface Props {
  name: string;
}

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

export default App;

এই কোডে JSX এবং TypeScript টাইপিং ব্যবহার করা হয়েছে। BabelJS এই কোডটিকে JavaScript কোডে রূপান্তর করবে।

৪. Babel CLI এর মাধ্যমে ট্রান্সপাইল করা

BabelJS CLI ব্যবহার করে কোড ট্রান্সপাইল করা যায়। নিচের কমান্ডটি ব্যবহার করে আপনি TypeScript এবং React কোডটি JavaScript কোডে ট্রান্সপাইল করতে পারবেন:

npx babel src --out-dir dist

এখানে:

• src: আপনার সোর্স কোডের ডিরেক্টরি।
• dist: ট্রান্সপাইলড কোড যেখানে আউটপুট হবে।

এটি TypeScript এবং React কোড ট্রান্সপাইল করে আপনাকে dist ফোল্ডারে JavaScript কোড দেয়, যা যে কোনো পরিবেশে ব্যবহার করা যাবে।

৫. Webpack এর মাধ্যমে TypeScript এবং React সমর্থন

আপনি যদি Webpack ব্যবহার করেন, তবে babel-loader এর সাহায্যে TypeScript এবং React কোড ট্রান্সপাইল করা যায়। এখানে একটি সাধারণ 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 ব্যবহার করে Webpack আপনার TypeScript এবং React কোডকে JavaScript কোডে ট্রান্সপাইল করবে।
• resolve.extensions এর মাধ্যমে আপনি Webpack কে জানান দেবেন কোন ধরনের ফাইল এক্সটেনশনগুলোকে প্রক্রিয়াজাত করতে হবে (যেমন .js, .jsx, .ts, .tsx)।

৬. TypeScript এবং React কোডের ট্রান্সপাইল আউটপুট

BabelJS TypeScript এবং React কোডকে JavaScript এ রূপান্তর করবে। নিচে একটি উদাহরণ দেয়া হলো।

App.tsx (React + TypeScript কোড):

import React from 'react';

interface Props {
  name: string;
}

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

export default App;

ট্রান্সপাইলড JavaScript কোড (App.js):

import React from 'react';

const App = ({ name }) => {
  return /*#__PURE__*/React.createElement("h1", null, "Hello, ", name, "!");
};

export default App;

এখানে JSX কে React.createElement() কলের মাধ্যমে ট্রান্সপাইল করা হয়েছে।

সারাংশ

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