ES6 (ECMAScript 2015) অনেক নতুন বৈশিষ্ট্য নিয়ে এসেছে, যেমন let, const, arrow functions, class, Promises, Modules, এবং আরো অনেক কিছু। তবে, কিছু পুরনো ব্রাউজার যেমন Internet Explorer এবং পুরনো সংস্করণের ব্রাউজার ES6 ফিচারগুলো সমর্থন করে না। এই কারণে, ES6 কোডের একটি ব্যাকওয়ার্ড কম্প্যাটিবল সংস্করণ তৈরি করতে হয়, যাতে পুরনো ব্রাউজারগুলোও সেগুলো চালাতে পারে। এই প্রক্রিয়াকে বলা হয় "Transpiling" (এটি "Translating + Compiling" এর সংমিশ্রণ) এবং এটি ES6 কোডকে ES5 (পুরনো JavaScript সংস্করণ) এ রূপান্তর করার মাধ্যমে করা হয়।
Transpiling এর প্রয়োজনীয়তা
ES6 ফিচারগুলো কিছু আধুনিক ব্রাউজারে সমর্থিত হলেও, কিছু পুরনো ব্রাউজার যেমন Internet Explorer (যেটি ES6 ফিচারগুলো সমর্থন করে না), সেখানে কোডটি ঠিকভাবে কাজ করবে না। তাই, ES6 কোডকে ES5 এ রূপান্তর করার জন্য Babel নামক একটি জনপ্রিয় টুল ব্যবহৃত হয়।
Babel কী?
Babel একটি জাভাস্ক্রিপ্ট ট্রান্সপাইলার, যা ES6 (এবং তার পরবর্তী সংস্করণের) কোডকে পুরনো জাভাস্ক্রিপ্ট ভার্সনে রূপান্তর করতে সাহায্য করে। এটি মূলত কোডে নতুন ফিচার ব্যবহার করার সুবিধা প্রদান করে, তবে একই সাথে পুরনো ব্রাউজারে সেগুলো চালানোর উপযুক্ত রূপে রূপান্তরিত করে।
Babel এর মূল ফিচার:
- ES6, ES7, এবং এর পরবর্তী ECMAScript ফিচারগুলোকে পুরনো JavaScript (ES5) কোডে রূপান্তর করে।
- আপনি বিভিন্ন প্লাগইন বা প্রিসেট ব্যবহার করে Babel কনফিগার করতে পারেন।
- মোডার্ন JavaScript কোডের জন্য এক্সটেনশন সমর্থন করে যেমন JSX (React এর জন্য), TypeScript ইত্যাদি।
Babel ব্যবহার করে ES6 কোডকে ES5 এ রূপান্তর করা
ES6 কোডকে ES5 এ রূপান্তর করতে প্রথমেই Babel টুলটি ইনস্টল করতে হবে এবং সেটআপ করতে হবে। এটি কয়েকটি সহজ ধাপে করা যায়:
1. Babel ইনস্টলেশন:
Babel ব্যবহার করার জন্য আপনাকে প্রথমে Node.js এবং npm ইনস্টল করতে হবে। এরপর npm ব্যবহার করে Babel ইনস্টল করা হয়।
প্রথম ধাপ:
প্রোজেক্ট ফোল্ডারে package.json ফাইল তৈরি করতে:
npm init -y
এরপর, Babel এর প্রয়োজনীয় প্যাকেজগুলো ইনস্টল করুন:
npm install --save-dev @babel/core @babel/cli @babel/preset-env
এটি Babel এর মূল প্যাকেজ এবং @babel/preset-env ইনস্টল করবে, যা ES6 বা তার পরবর্তী কোডকে ES5 এ রূপান্তর করতে ব্যবহৃত হয়।
2. Babel কনফিগারেশন:
Babel কনফিগার করার জন্য একটি কনফিগারেশন ফাইল তৈরি করতে হবে। সাধারণত, .babelrc ফাইল তৈরি করা হয়। এতে আপনাকে কোন প্রিসেট ব্যবহার করবেন তা উল্লেখ করতে হবে।
এখানে একটি সাধারণ .babelrc কনফিগারেশন ফাইলের উদাহরণ:
{
"presets": ["@babel/preset-env"]
}
এটি নির্দেশ করে যে, আপনি @babel/preset-env প্রিসেট ব্যবহার করছেন, যা ES6 কোডকে ES5 এ রূপান্তর করবে।
3. Babel CLI ব্যবহার করে কোড ট্রান্সপাইল করা:
এখন আপনি Babel ব্যবহার করে ES6 কোডকে ES5 এ রূপান্তর করতে পারবেন। এজন্য, Babel CLI ব্যবহার করা হয়।
npx babel src --out-dir dist
এখানে:
src: আপনার সোর্স ফোল্ডার যেখানে ES6 কোড আছে।dist: আউটপুট ফোল্ডার যেখানে ES5 কোড থাকবে।
এটি সমস্ত src ফোল্ডারে থাকা ES6 কোডকে ES5 এ রূপান্তর করে এবং dist ফোল্ডারে সংরক্ষণ করবে।
4. ES6 কোডের উদাহরণ এবং রূপান্তর:
ES6 কোড (src/app.js):
const greet = name => `Hello, ${name}!`;
console.log(greet("John"));
ES5 রূপান্তরিত কোড (dist/app.js):
"use strict";
var greet = function greet(name) {
return "Hello, " + name + "!";
};
console.log(greet("John"));
এখানে, Arrow function এবং Template literals ES5 কোডে traditional function এবং string concatenation তে রূপান্তরিত হয়েছে।
Babel এর সাথে Polyfills
কিছু ES6 ফিচার যেমন Promise, Map, Set ইত্যাদি ES5 ব্রাউজারে স্বাভাবিকভাবে কাজ করে না। এসব ফিচারগুলো Polyfills দিয়ে সমর্থন করা হয়। Babel এর মাধ্যমে Polyfills যোগ করার জন্য @babel/polyfill ব্যবহার করা হয়।
আপনি @babel/preset-env এর সাথে useBuiltIns অপশন ব্যবহার করে Polyfills যোগ করতে পারেন।
উদাহরণ:
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "entry",
"corejs": 3
}
]
]
}
এটি core-js ব্যবহার করে স্বয়ংক্রিয়ভাবে Polyfills যোগ করবে।
সারাংশ
ES6 কোডকে ES5 এ রূপান্তর করতে Babel একটি শক্তিশালী এবং জনপ্রিয় টুল। এটি পুরনো ব্রাউজারে ES6 ফিচারগুলো সমর্থন করার জন্য কোড ট্রান্সপাইল করে দেয়। এর মাধ্যমে আপনি আপনার নতুন JavaScript কোডটি পুরনো ব্রাউজারেও চালাতে পারেন, যা আপনার অ্যাপ্লিকেশন বা ওয়েবসাইটের গ্রাহককে আরও ভালো ব্যবহার অভিজ্ঞতা প্রদান করবে।
Read more
