BabelJS এবং ব্রাউজার সাপোর্ট

BabelJS মূলত আধুনিক JavaScript কোডকে পুরনো ব্রাউজার এবং JavaScript ইঞ্জিনে সমর্থিত কোডে রূপান্তর (transpile) করতে ব্যবহৃত হয়। আধুনিক ECMAScript (ES6 এবং পরবর্তী) ফিচারগুলো অনেক ব্রাউজারে সমর্থিত না হওয়ার কারণে, এগুলোকে পুরনো JavaScript সংস্করণে রূপান্তর করার প্রয়োজন হয়। BabelJS এই কাজটি করে, যাতে কোডটি সর্বোচ্চ পরিসরে ব্রাউজার বা পরিবেশে চলতে পারে।

BabelJS এর ভূমিকা

ব্রাউজারগুলি সব সময় একযোগে নতুন JavaScript ফিচারগুলো সমর্থন করে না। ফলে, যখন আপনি ES6, ES7, বা তার পরবর্তী ফিচারগুলো ব্যবহার করেন, তখন এগুলোকে ট্রান্সপাইল করে পুরনো ব্রাউজারগুলোর জন্য সমর্থন যোগানো হয়। BabelJS এর মাধ্যমে আপনি ES6+ কোডকে ES5 তে রূপান্তর করতে পারেন, যাতে আপনার অ্যাপ্লিকেশনটি পুরনো ব্রাউজার যেমন Internet Explorer, Safari, Firefox, Chrome ইত্যাদিতে সঠিকভাবে কাজ করে।

ব্রাউজার সাপোর্টের সমস্যা

যদিও আধুনিক JavaScript ফিচারগুলো যেমন Arrow Functions, Classes, Template Literals, Destructuring, Async/Await ইত্যাদি ডেভেলপারদের কোড লিখতে অনেক সহজ করে তুলেছে, কিন্তু ব্রাউজারের সমর্থন সব সময় সমান থাকে না। উদাহরণস্বরূপ:

• ES6 Modules: অনেক পুরনো ব্রাউজার ES6 Modules সাপোর্ট করে না।
• Promise: অনেক পুরনো ব্রাউজার Promise ফিচার সাপোর্ট করে না, যা অ্যাসিনক্রোনাস কাজের জন্য গুরুত্বপূর্ণ।
• Async/Await: Async/Await কোড ব্রাউজারের পুরনো সংস্করণে কাজ করবে না, কারণ এগুলো ES7 এর অংশ।

এক্ষেত্রে BabelJS কাজ করে, যাতে এসব আধুনিক ফিচারগুলো পুরনো JavaScript কোডে রূপান্তরিত হয়ে সেগুলো সেই ব্রাউজারে সঠিকভাবে কাজ করে।

BabelJS এর মাধ্যমে ব্রাউজার সাপোর্ট বৃদ্ধি

BabelJS ব্রাউজারের সাপোর্টের জন্য preset-env ব্যবহার করে কোড ট্রান্সপাইলেশন এবং polyfills যোগ করার কাজ করে। @babel/preset-env এমন একটি preset যা target browsers (অথবা environments) নির্ধারণ করে, এবং সেই অনুযায়ী কোডটিকে রূপান্তরিত করে।

Babel Preset-এ ব্রাউজার সাপোর্ট কনফিগার করা

আপনি চাইলে নির্দিষ্ট ব্রাউজারের জন্য BabelJS কনফিগার করতে পারেন, যাতে শুধুমাত্র সেই ব্রাউজারে কোডটি রূপান্তরিত হয়। আপনি .browserslistrc ফাইল অথবা browserslist কনফিগারেশন ব্যবহার করে target browsers নির্ধারণ করতে পারেন।

উদাহরণ: .browserslistrc ফাইল

> 0.25% 
last 2 versions
not ie 11
not op_mini all

এখানে:

• > 0.25%: বিশ্বব্যাপী ব্যবহৃত ব্রাউজারগুলির মধ্যে 0.25% এর বেশি ব্যবহৃত ব্রাউজারগুলো।
• last 2 versions: শেষ দুটি ব্রাউজার সংস্করণ।
• not ie 11: Internet Explorer 11 এর জন্য কোডটি ট্রান্সপাইল করা হবে না।
• not op_mini all: সমস্ত Opera Mini সংস্করণের জন্য কোডটি ট্রান্সপাইল করা হবে না।

এই কনফিগারেশন অনুযায়ী, BabelJS নির্দিষ্ট ব্রাউজারদের জন্য কোড ট্রান্সপাইল করবে এবং ব্রাউজারের পুরনো সংস্করণগুলি সহ সাপোর্ট নিশ্চিত করবে।

Polyfills এর ভূমিকা

Polyfills হল এমন স্ক্রিপ্ট যা নতুন JavaScript ফিচারগুলিকে পুরনো ব্রাউজারে সমর্থিত করে তোলে। উদাহরণস্বরূপ, Promise বা fetch API পুরনো ব্রাউজার সাপোর্ট করে না, তাই BabelJS সেই ফিচারগুলোর জন্য polyfill যোগ করতে পারে।

BabelJS এর core-js এবং regenerator-runtime প্যাকেজগুলো polyfills এর জন্য ব্যবহৃত হয়। BabelJS preset-env এর মাধ্যমে স্বয়ংক্রিয়ভাবে প্রয়োজনীয় polyfills যোগ করতে পারে।

Polyfill কনফিগারেশন

BabelJS কনফিগারেশন ফাইলে useBuiltIns অপশন ব্যবহার করে polyfills কিভাবে যুক্ত হবে তা নির্ধারণ করা যায়:

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

এখানে:

• useBuiltIns: "entry": এটি core-js এর polyfills-কে entry point হিসেবে ব্যবহার করতে বলে।
• corejs: 3: Polyfill এর জন্য core-js এর version 3 ব্যবহার করবে।

এই কনফিগারেশনটি নিশ্চিত করে যে শুধুমাত্র যে ফিচারগুলি আপনার নির্দিষ্ট টার্গেট ব্রাউজারে সাপোর্ট নেই, সেগুলির জন্য polyfills যোগ হবে।

BabelJS এবং ব্রাউজার সাপোর্টের জন্য গুরুত্বপূর্ণ টিপস

1. Target নির্ধারণ করুন: আপনার অ্যাপ্লিকেশনটি কোন ব্রাউজার বা পরিবেশে চলবে তা জানুন। তারপর সেই অনুযায়ী browserslist কনফিগারেশন করুন।
2. Polyfills ব্যবহার করুন: যদি আপনার অ্যাপ্লিকেশনটি নতুন JavaScript ফিচার ব্যবহার করে, তবে polyfills যুক্ত করতে ভুলবেন না। বিশেষ করে Promise বা async/await ফিচারগুলির জন্য।
3. Presets এবং Plugins ব্যবহার করুন: @babel/preset-env এর মাধ্যমে আপনার কোডটি শুধুমাত্র টার্গেট ব্রাউজারগুলোর জন্য রূপান্তরিত হবে। এছাড়া React বা TypeScript কোডের জন্য সংশ্লিষ্ট presets এবং plugins ব্যবহার করতে হবে।
4. স্ট্যান্ডার্ড ব্রাউজার সাপোর্ট: আপনার ব্রাউজারের সাপোর্ট চেক করুন এবং পুরনো ব্রাউজারগুলির জন্য ট্রান্সপাইলেশন এবং polyfills যুক্ত করুন। আপনি @babel/preset-env ব্যবহার করে পুরনো ব্রাউজারের জন্য ট্রান্সপাইল করতে পারেন।

BabelJS ব্রাউজার সাপোর্টের জন্য একটি অপরিহার্য টুল। এটি আধুনিক JavaScript কোডকে পুরনো ব্রাউজারে সমর্থিত কোডে রূপান্তর করে এবং নতুন JavaScript ফিচারগুলির জন্য polyfills যোগ করতে সাহায্য করে। @babel/preset-env এবং polyfills ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনটিকে সর্বোচ্চ সংখ্যক ব্রাউজারে সঠিকভাবে চালানোর জন্য প্রস্তুত করতে পারেন।

BabelJS একটি জনপ্রিয় JavaScript ট্রান্সপাইলার যা আপনাকে আধুনিক JavaScript কোড (যেমন ES6, ES7, বা তার পরবর্তী সংস্করণ) পুরনো ব্রাউজার বা JavaScript ইঞ্জিনে কম্প্যাটিবল করে তোলার সুযোগ দেয়। এটি বিভিন্ন নতুন ফিচার যেমন ক্লাস, মডিউল, অ্যারো ফাংশন, async/await ইত্যাদিকে পুরনো JavaScript কোডে রূপান্তর করে, যা বিভিন্ন ব্রাউজারে সঠিকভাবে কাজ করতে সক্ষম।

ব্রাউজার কম্প্যাটিবিলিটি নিশ্চিত করতে BabelJS ব্যবহার করা একদম গুরুত্বপূর্ণ, কারণ সব ব্রাউজার নতুন JavaScript ফিচার সাপোর্ট করে না, এবং এতে ব্যবহারকারীদের অভিজ্ঞতা খারাপ হতে পারে। বিশেষত, পুরনো ব্রাউজার যেমন Internet Explorer, Safari 10 এবং এর আগে যে ব্রাউজারগুলোর JavaScript সমর্থন সীমিত, তাদের ক্ষেত্রে এই প্রক্রিয়া কার্যকর।

ব্রাউজার কম্প্যাটিবিলিটি নিশ্চিত করার জন্য BabelJS কিভাবে কাজ করে?

BabelJS একটি transpiler যা আধুনিক JavaScript কোডকে পুরনো বা কম্প্যাটিবল JavaScript কোডে রূপান্তর করে। এটি মূলত দুটি উপায়ে কাজ করে ব্রাউজারের কম্প্যাটিবিলিটি নিশ্চিত করতে:

1. Transpiling (কোড রূপান্তর): আধুনিক JavaScript ফিচার যেমন let, const, arrow functions, async/await, class ইত্যাদি পুরনো JavaScript কোডে রূপান্তর করে।
2. Polyfilling: নতুন ফিচারের জন্য (যেমন Promise, Map, Set, Object.assign ইত্যাদি) যদি পুরনো ব্রাউজারে সাপোর্ট না থাকে, তবে সেই ফিচারগুলির জন্য polyfill যোগ করা হয়।

@babel/preset-env: ব্রাউজার কম্প্যাটিবিলিটি

@babel/preset-env একটি শক্তিশালী Babel preset যা আপনাকে নির্দিষ্ট ব্রাউজার বা JavaScript ইঞ্জিনের জন্য ট্রান্সপাইল করতে সক্ষম করে। এটি target environments সেট করে, যার মাধ্যমে আপনি নির্ধারণ করতে পারেন কোন ব্রাউজারগুলো আপনার কোড সাপোর্ট করবে এবং যেগুলোতে আপনাকে polyfill যোগ করতে হবে।

১. Targeting Specific Browsers

@babel/preset-env এর মাধ্যমে আপনি নির্দিষ্ট ব্রাউজারগুলির জন্য কোড ট্রান্সপাইল করতে পারেন। এই presetটি ব্রাউজারগুলির জন্য উপযুক্ত polyfills এবং ট্রান্সপাইলিং শৈলী ঠিক করে দেয়, যাতে আপনার কোড সর্বাধিক কম্প্যাটিবল থাকে।

উদাহরণ:

আপনি যদি আপনার কোডকে শুধুমাত্র Chrome, Firefox, Safari এর নতুন ভার্সনগুলোর জন্য কম্প্যাটিবল করতে চান, তবে আপনার Babel কনফিগারেশনটি এমন হতে পারে:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "> 0.25%, not dead, Chrome >= 58, Firefox >= 54, Safari >= 10"
      }
    ]
  ]
}

এখানে:

• "> 0.25%": এই অপশনটি গ্লোবাল ব্রাউজার মার্কেট শেয়ারের 0.25% এর বেশি ব্যবহারকারী ব্রাউজারগুলোকে সাপোর্ট করবে।
• not dead: "ডেড" বা অপ্রচলিত ব্রাউজারগুলো বাদ দেয়া হয়।
• Chrome >= 58, Firefox >= 54, Safari >= 10: নির্দিষ্ট ব্রাউজার ভার্সনগুলোতে কোডটি কম্প্যাটিবল হবে।

২. Polyfill Management

ব্রাউজারের পারফরম্যান্স এবং কম্প্যাটিবিলিটি উন্নত করার জন্য polyfill ব্যবহৃত হয়। Polyfill হল একটি স্ক্রিপ্ট যা নতুন JavaScript ফিচারকে পুরনো ব্রাউজারে সিমুলেট করে। উদাহরণস্বরূপ, Promise যদি একটি পুরনো ব্রাউজারে সাপোর্ট না করে, তবে Polyfill এর মাধ্যমে তা সাপোর্ট যোগ করা হয়।

@babel/preset-env এর মাধ্যমে আপনি "useBuiltIns" অপশন ব্যবহার করে polyfill গুলি কাস্টমাইজ করতে পারেন। এটি দুটি মানে ব্যবহার করা যেতে পারে:

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

উদাহরণ: useBuiltIns: "usage" সেটিং

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

এখানে:

• useBuiltIns: "usage": শুধুমাত্র কোডে ব্যবহৃত ফিচারগুলির জন্য polyfill যুক্ত হবে।
• corejs: 3: Polyfill এর জন্য core-js v3 ব্যবহার করা হবে।

Babel Runtime: কোড অপ্টিমাইজেশন এবং কম্প্যাটিবিলিটি

Babel Runtime ব্যবহারের মাধ্যমে আপনি কোডের পুনরাবৃত্তি কমাতে এবং ব্রাউজারের কম্প্যাটিবিলিটি উন্নত করতে পারেন। এটি helper functions এবং polyfills গুলোকে বাইরের লাইব্রেরি হিসেবে ব্যবহার করে কোডের আকার ছোট করে এবং কাস্টমাইজড polyfill ব্যবহারের সুযোগ দেয়।

Babel Runtime সহ @babel/plugin-transform-runtime প্লাগিন ব্যবহার করলে আপনি helper functions এবং polyfills পুনরায় ব্যবহার করতে পারেন, যা কোডকে আরো কমপ্যাক্ট এবং কার্যকর করে তোলে।

BabelJS এবং ব্রাউজার কম্প্যাটিবিলিটি

BabelJS ব্রাউজার কম্প্যাটিবিলিটি নিশ্চিত করার জন্য বেশ কিছু গুরুত্বপূর্ণ উপায় অনুসরণ করে:

1. ES6+ ফিচারগুলির ট্রান্সপাইলিং: Babel কোডের আধুনিক ফিচারগুলিকে পুরনো JavaScript কোডে রূপান্তর করে, যাতে এটি পুরনো ব্রাউজারে কাজ করতে পারে।
2. Polyfill ব্যবস্থাপনা: polyfills শুধুমাত্র আপনার কোডের প্রয়োজনীয় ফিচারগুলির জন্য যোগ করে, যাতে অবাঞ্ছিত কোড থেকে বাঁচা যায়।
3. Babel Presets: @babel/preset-env ব্যবহার করে আপনি নির্দিষ্ট ব্রাউজার বা পরিবেশের জন্য কোডকে কম্প্যাটিবল করতে পারেন।

সারাংশ

BabelJS এর মাধ্যমে আপনি আধুনিক JavaScript ফিচারগুলিকে পুরনো ব্রাউজার বা পরিবেশে কম্প্যাটিবল করে তুলতে পারেন। @babel/preset-env এবং polyfill management এর মাধ্যমে আপনি কোডের সাইজ ছোট করতে, কোডের কার্যকারিতা বৃদ্ধি করতে এবং ব্রাউজারের সঙ্গে সঠিকভাবে কাজ করানোর জন্য প্রয়োজনীয় সেটিংস কাস্টমাইজ করতে পারবেন। এইভাবে, আপনি ব্রাউজার কম্প্যাটিবিলিটি নিশ্চিত করতে এবং কোড অপ্টিমাইজেশন করতে BabelJS ব্যবহার করতে পারেন।

BabelJS একটি শক্তিশালী ট্রান্সপাইলার যা আধুনিক JavaScript কোডকে পুরনো JavaScript সংস্করণে রূপান্তরিত করে, যাতে এটি পুরনো বা Legacy ব্রাউজারে সঠিকভাবে কাজ করতে পারে। Legacy ব্রাউজার সাপোর্ট মানে হচ্ছে, যেসব ব্রাউজারে আধুনিক JavaScript ফিচার (যেমন ES6, ES7, JSX, অথবা Async/Await) সমর্থিত নয়, সেগুলোতে কোডটি চালানো।

যেহেতু অনেক পুরনো ব্রাউজার (যেমন Internet Explorer, পুরনো Firefox, Safari, এবং Edge) নতুন JavaScript ফিচারগুলো সঠিকভাবে সমর্থন করে না, তাই BabelJS ব্যবহার করা হয় এই ফিচারগুলোকে polyfill এবং transpile করার জন্য, যাতে কোডটি এগুলোর সাথে সামঞ্জস্যপূর্ণ হয়।

Legacy ব্রাউজার সাপোর্ট কেন গুরুত্বপূর্ণ?

বিভিন্ন পুরনো ব্রাউজারে নতুন JavaScript ফিচারগুলো সঠিকভাবে কাজ নাও করতে পারে। যেমন:

• ES6 (ECMAScript 2015) এর নতুন ফিচারগুলি (যেমন let, const, arrow functions, classes) পুরনো ব্রাউজারে নেই।
• Promises, async/await, modules (import/export) ইত্যাদি ES6 এর পরবর্তী ফিচারগুলোও পুরনো ব্রাউজারে সমর্থিত নয়।
• JSX React কোডে ব্যবহৃত হয়, যা শুধুমাত্র React.createElement() এ ট্রান্সপাইল হয়।

এই সমস্যা সমাধানে BabelJS ব্যবহার করা হয়, যা polyfills যোগ করে এবং transpile (রূপান্তর) করে কোডটিকে পুরনো ব্রাউজারে চালানোর উপযোগী করে।

BabelJS এর মাধ্যমে Legacy ব্রাউজার সাপোর্ট যোগ করা

Legacy ব্রাউজার সাপোর্ট যোগ করার জন্য আপনাকে Babel কনফিগারেশনে কিছু অতিরিক্ত সেটিংস করতে হবে:

1. @babel/preset-env ব্যবহার করা
2. Polyfill যোগ করা (যদি প্রয়োজন হয়)
3. Targets সেট করা

১. @babel/preset-env ব্যবহার করা

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

.babelrc অথবা babel.config.json ফাইল কনফিগারেশন:

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

এখানে:

• "targets": "> 0.25%, not dead": এই সেটিংটি নির্দেশ করে যে কোডটি বিশ্বের ০.২৫% বা তার বেশি ব্যবহারকারী থাকা ব্রাউজারগুলির জন্য ট্রান্সপাইল হবে এবং মৃত ব্রাউজার (যেমন Internet Explorer 10 বা পুরনো) বাদ দেওয়া হবে।
• আপনি যদি নির্দিষ্ট ব্রাউজার লক্ষ্য করতে চান, তাহলে আপনি ব্রাউজারের নাম উল্লেখ করতে পারেন, যেমন: "chrome >= 58", "firefox >= 50", ইত্যাদি।

এইভাবে, আপনি legacy বা পুরনো ব্রাউজার যেমন Internet Explorer এর জন্য কোডটিকে ট্রান্সপাইল করতে পারবেন।

২. Polyfill যোগ করা

Polyfill হলো একটি স্ক্রিপ্ট যা আধুনিক ফিচারগুলিকে পুরনো JavaScript ইঞ্জিনে সমর্থন করার জন্য প্রয়োজনীয় ফাংশনালিটি প্রদান করে। কিছু নতুন JavaScript ফিচার (যেমন Array.from(), Promise, Object.assign()) পুরনো ব্রাউজারে স্বাভাবিকভাবে কাজ করে না। আপনি core-js এবং regenerator-runtime লাইব্রেরি ব্যবহার করে এই ফিচারগুলোকে polyfill করতে পারেন।

Polyfill ব্যবহার করা:

প্রথমে আপনাকে core-js এবং regenerator-runtime ইন্সটল করতে হবে:

npm install core-js regenerator-runtime

তারপর, Babel কনফিগারেশনে polyfill যুক্ত করুন।

.babelrc কনফিগারেশন:

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

এখানে:

• "useBuiltIns": "usage": BabelJS স্বয়ংক্রিয়ভাবে polyfills যোগ করবে যখন আপনি নতুন JavaScript ফিচার ব্যবহার করবেন।
• "corejs": 3: এটি core-js এর সংস্করণ নির্ধারণ করে, যেটি polyfill যোগ করার জন্য ব্যবহৃত হবে।

এটি BabelJS কে নির্দেশ দেয় যে শুধুমাত্র সেই ফিচারগুলির জন্য polyfills যোগ করতে হবে, যেগুলো আপনি কোডে ব্যবহার করেছেন।

৩. ব্রাউজারের জন্য টার্গেটস সেট করা

@babel/preset-env কনফিগারেশনের মধ্যে targets সেট করা খুবই গুরুত্বপূর্ণ, কারণ এটি নির্ধারণ করে যে কোন ব্রাউজারগুলোকে আপনি সাপোর্ট করতে চান।

উদাহরণ:

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

এখানে:

• "last 2 versions": এই সেটিংটি সর্বশেষ দুটি সংস্করণের ব্রাউজারগুলোকে সমর্থন করবে।
• "IE 11": এটি Internet Explorer 11 ব্রাউজারটিকে সাপোর্ট করবে।

React অ্যাপ্লিকেশনের জন্য Legacy ব্রাউজার সাপোর্ট

যদি আপনি React ব্যবহার করেন, তবে @babel/preset-react এবং @babel/preset-env একসাথে ব্যবহার করতে পারেন। React JSX কোডটিকে সাধারণ JavaScript কোডে রূপান্তর করতে এবং Legacy ব্রাউজারে সাপোর্ট যোগ করতে এই presets দুটি দরকার।

React প্রকল্পের জন্য কনফিগারেশন:

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

এই কনফিগারেশনটি React কোডের জন্য JSX ট্রান্সপাইল করবে এবং Legacy ব্রাউজারগুলির জন্য JavaScript ফিচারগুলিকে polyfill করবে।

BabelJS Legacy ব্রাউজার সাপোর্ট যোগ করার জন্য অত্যন্ত গুরুত্বপূর্ণ একটি টুল। এটি @babel/preset-env এর মাধ্যমে কোডটিকে পুরনো ব্রাউজারগুলির জন্য ট্রান্সপাইল করে এবং polyfills যোগ করে নতুন JavaScript ফিচারগুলোকে পুরনো ব্রাউজারে সমর্থিত করে তোলে। Legacy ব্রাউজারগুলোর জন্য React অ্যাপ্লিকেশন বা সাধারণ JavaScript কোডের সাপোর্ট নিশ্চিত করতে আপনাকে Babel এর সঠিক কনফিগারেশন এবং polyfills ব্যবহারের মাধ্যমে এই কাজটি করতে হবে।

Browserslist একটি কনফিগারেশন টুল যা বিভিন্ন ধরনের ফিচার এবং ব্রাউজার সমর্থন করতে ব্যবহৃত হয়। এটি বিশেষভাবে BabelJS এবং অন্যান্য টুল যেমন Autoprefixer, ESLint ইত্যাদির সাথে ব্যবহৃত হয়, যাতে আপনি নির্দিষ্ট ব্রাউজার বা ব্রাউজার ভার্সনের জন্য কোড ট্রান্সপাইল করতে পারেন। Browserslist আপনাকে ঠিক করে দেয় কোন ব্রাউজারগুলোতে কোড সমর্থিত হবে এবং কোন ব্রাউজারে কোডের সর্বোচ্চ কার্যকারিতা নিশ্চিত করা যাবে।

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

১. Browserslist কনফিগারেশন ফাইল

Browserslist কনফিগারেশন সাধারণত একটি **.browserslistrc** ফাইলে রাখা হয় অথবা package.jsonফাইলে"browserslist"` নামক একটি সেকশনে নির্ধারণ করা হয়।

.browserslistrc ফাইল

আপনি যদি .browserslistrc ফাইল ব্যবহার করতে চান, তবে এই ফাইলটি আপনার প্রজেক্টের মূল ডিরেক্টরিতে রাখতে হবে। এই ফাইলে আপনি সমর্থিত ব্রাউজারগুলোর জন্য নিয়মাবলী নির্ধারণ করতে পারেন।

উদাহরণ:

> 0.5%
last 2 versions
Firefox ESR
not dead

এখানে:

• > 0.5%: বিশ্বব্যাপী ব্রাউজার মার্কেট শেয়ারের 0.5% এর বেশি ব্যবহৃত ব্রাউজারগুলোকে সমর্থন করবে।
• last 2 versions: শেষ দুইটি ভার্সন সব ব্রাউজারের জন্য সমর্থিত হবে।
• Firefox ESR: Firefox এর ESR (Extended Support Release) ভার্সন সমর্থিত হবে।
• not dead: যে ব্রাউজারগুলোর আর আপডেট পাওয়া যাচ্ছে না, সেগুলোকে বাদ দেয়া হবে।

package.json এ Browserslist কনফিগারেশন

আপনি চাইলে package.json ফাইলের মধ্যে "browserslist" সেকশন ব্যবহার করে কনফিগারেশন করতে পারেন।

{
  "browserslist": [
    "> 0.5%",
    "last 2 versions",
    "Firefox ESR",
    "not dead"
  ]
}

এভাবে package.json ফাইলের মধ্যেও Browserslist কনফিগারেশন রাখা যায়।

২. BabelJS এবং Browserslist এর সংযোগ

BabelJS এর @babel/preset-env প্রিসেট ব্যবহার করার সময়, Browserslist কনফিগারেশন স্বয়ংক্রিয়ভাবে ব্যবহৃত হয়। @babel/preset-env আপনার কোডকে শুধুমাত্র সেই ব্রাউজারগুলোর জন্য ট্রান্সপাইল করবে, যেগুলো আপনি Browserslist কনফিগারেশন ফাইলে নির্ধারণ করেছেন।

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

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: "> 0.5%, last 2 versions, Firefox ESR, not dead"
      }
    ]
  ]
};

এখানে, @babel/preset-env প্রিসেটের মাধ্যমে BabelJS শুধুমাত্র নির্দিষ্ট ব্রাউজারগুলোর জন্য কোড ট্রান্সপাইল করবে, যা আপনি Browserslist কনফিগারেশনে উল্লেখ করেছেন।

৩. Browserslist এর স্ট্রিং সন্নিবেশ (Query)

Browserslist কনফিগারেশন স্ট্রিংগুলোর মাধ্যমে আপনি নির্দিষ্ট ব্রাউজার বা ব্রাউজার ভার্সন নির্বাচন করতে পারেন। এখানে কিছু সাধারণ কুয়েরি দেওয়া হলো:

সাধারণ কুয়েরি:

• last 2 versions: সর্বশেষ দুইটি ভার্সন সব ব্রাউজারের জন্য সমর্থিত।
• > 0.5%: বিশ্বব্যাপী 0.5% বা তার বেশি ব্যবহৃত ব্রাউজারগুলো।
• not dead: মৃত (dead) ব্রাউজার বাদ দিতে ব্যবহার হয়। মৃত ব্রাউজার মানে, যেগুলো আর আপডেট হয় না।
• Safari >= 10: Safari ব্রাউজারের ভার্সন 10 অথবা তার পরবর্তী ভার্সন।
• Firefox > 50: Firefox ব্রাউজারের 50 এর উপরের ভার্সন।
• Edge >= 16: Microsoft Edge ব্রাউজারের ভার্সন 16 বা তার পরবর্তী ভার্সন।

এবং কিছু উদাহরণ:

last 2 versions  # শেষ দুটি ভার্সন সব ব্রাউজারের
> 1%             # ১% বা তার বেশি ব্যবহৃত ব্রাউজার
Safari >= 10     # Safari ১০ অথবা পরবর্তী ভার্সন

৪. Autoprefixer এবং Browserslist

Autoprefixer একটি জনপ্রিয় CSS টুল, যা আপনার CSS কোডে স্বয়ংক্রিয়ভাবে সঠিক ব্রাউজার প্রিফিক্স যোগ করে দেয়। এটি Browserslist কনফিগারেশন ফাইল ব্যবহার করে এবং সেই অনুযায়ী প্রিফিক্স যোগ করে।

Autoprefixer কনফিগারেশন:

আপনি যদি Autoprefixer ব্যবহার করতে চান, তবে সেটি PostCSS এর মাধ্যমে করতে পারেন। Browserslist কনফিগারেশনটি স্বয়ংক্রিয়ভাবে Autoprefixer দ্বারা ব্যবহৃত হবে।

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

{
  "plugins": {
    "autoprefixer": {}
  }
}

এখানে, Autoprefixer কনফিগারেশন স্বয়ংক্রিয়ভাবে Browserslist কনফিগারেশন অনুযায়ী কাজ করবে।

৫. Browserslist এর ফিচার

Browserslist একটি শক্তিশালী কনফিগারেশন টুল যা আপনাকে শুধুমাত্র কোডের কার্যকারিতা উন্নত করতে সহায়তা করে না, বরং ব্রাউজারের গতিশীল পরিবর্তনগুলোও চিহ্নিত করতে সহায়তা করে। এটি CSS এবং JavaScript এর জন্য সমর্থিত ব্রাউজারগুলোকে নির্ধারণ করতে ব্যবহৃত হয়।

• Dynamic Query: Browserslist কনফিগারেশন ফাইলটি আপডেট করলে সেটি তৎক্ষণাৎ কার্যকর হয়।
• Cross-tool Support: এটি Babel, Autoprefixer, ESLint, Stylelint ইত্যাদির মাধ্যমে ব্যবহৃত হয়।
• Simplicity: কনফিগারেশন খুবই সহজ এবং ব্রাউজার সমর্থন সম্পর্কিত সিদ্ধান্ত নিতে সহায়ক।

সারাংশ

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

BabelJS একটি শক্তিশালী ট্রান্সপাইলার, যা আধুনিক JavaScript কোড (ES6, ES7, ESNext) কে পুরনো JavaScript সংস্করণে রূপান্তর করতে ব্যবহৃত হয়, যাতে এটি পুরনো ব্রাউজারে সঠিকভাবে কাজ করে। তবে, সব ব্রাউজারের জন্য একই রকম কোড আউটপুট প্রয়োজন হয় না। কিছু ব্রাউজার নতুন JavaScript ফিচার সাপোর্ট করে, আবার কিছু পুরনো ব্রাউজার শুধুমাত্র পুরনো ফিচারগুলো সাপোর্ট করে।

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

১. Browserslist কনফিগারেশন ব্যবহার করা

Browserslist একটি কনফিগারেশন ফাইল বা পদ্ধতি যা আপনাকে নির্দিষ্ট ব্রাউজার এবং তাদের ভার্সন অনুযায়ী কোড আউটপুট কাস্টমাইজ করতে সাহায্য করে। এটি একটি সহজ কনফিগারেশন ফাইল বা প্যাকেজের মধ্যে উল্লেখ করা যায়, যা BabelJS, Autoprefixer, ESLint ইত্যাদির সাথে ইন্টিগ্রেট করা যায়।

Browserslist কনফিগারেশন ফাইল তৈরি করা

আপনি browserslist ফাইল তৈরি করে বা package.json এর মধ্যে browserslist সেকশন যোগ করে আপনার লক্ষ্য ব্রাউজারগুলো উল্লেখ করতে পারেন।

package.json এ Browserslist কনফিগারেশন:

{
  "browserslist": [
    "last 2 versions",
    "not dead",
    "> 0.2%",
    "Firefox ESR"
  ]
}

এখানে:

• "last 2 versions": শেষ দুটি ব্রাউজার ভার্সন সমর্থিত হবে।
• "not dead": "dead" ব্রাউজার (যেগুলোর আর সাপোর্ট নেই) বাদ দেওয়া হবে।
• "> 0.2%": ব্রাউজারগুলোর বাজার শেয়ার যদি ০.২% বা তার বেশি হয়, সেগুলো অন্তর্ভুক্ত করা হবে।
• "Firefox ESR": Firefox এর Extended Support Release (ESR) ভার্সন সমর্থিত হবে।

এছাড়াও, আপনি অন্য কনফিগারেশন পদ্ধতি যেমন .browserslistrc ফাইলও ব্যবহার করতে পারেন।

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

@babel/preset-env একটি Babel প্রিসেট যা browserslist কনফিগারেশন অনুসরণ করে এবং কেবলমাত্র সেই JavaScript ফিচারগুলো ট্রান্সপাইল বা পলিফিল করে যা নির্দিষ্ট ব্রাউজারে কাজ করবে না।

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

babel.config.js:

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: '> 0.2%, last 2 versions, not dead',  // Browserslist কনফিগারেশন
        useBuiltIns: 'usage',  // প্রয়োজন অনুযায়ী পলিফিল ব্যবহার
        corejs: 3,  // Core-js সংস্করণ
      },
    ],
  ],
};

এখানে:

• targets: এটি browserslist কনফিগারেশন ফাইলের বিকল্প হিসেবে কাজ করে। আপনি যদি browserslist ফাইল ব্যবহার না করতে চান, তাহলে এখানে সরাসরি ব্রাউজার নির্ধারণ করতে পারেন।
• useBuiltIns: এই সেটিংটি নির্ধারণ করে যে কীভাবে পলিফিল ব্যবহার করা হবে। এর দুটি অপশন আছে:
  • false: পলিফিল ব্যবহার করা হবে না।
  • entry: সব পলিফিল core-js এবং regenerator-runtime এর মতো প্যাকেজ থেকে ইনপোর্ট করা হবে।
  • usage: শুধুমাত্র আপনার কোডে যে ফিচারগুলো ব্যবহার করা হয়েছে, সেগুলোর জন্য পলিফিল যোগ করা হবে।
• corejs: পলিফিলের জন্য ব্যবহৃত Core-js সংস্করণ উল্লেখ করা।

৩. Polyfills এবং JavaScript ফিচার কাস্টমাইজ করা

BabelJS শুধুমাত্র সিনট্যাক্স ট্রান্সপাইল করেই শেষ নয়, এটি আধুনিক JavaScript ফিচারগুলোর জন্য পলিফিল (polyfill)ও যোগ করতে পারে। পলিফিল এমন কোড ব্লক যা পুরনো ব্রাউজারগুলোতে নতুন ফিচারগুলোর কাজ করার সুবিধা দেয়।

Polyfill এর উদাহরণ:

Promise এবং Array.from মতো ফিচারগুলো যদি আপনার কোডে থাকে এবং পুরনো ব্রাউজারে সাপোর্ট না থাকে, তবে BabelJS core-js প্যাকেজের মাধ্যমে পলিফিল যোগ করতে পারে।

আপনি useBuiltIns: 'usage' এবং corejs: 3 ব্যবহার করলে, Babel শুধুমাত্র আপনার কোডে যে নতুন ফিচারগুলো ব্যবহার করা হয়েছে, সেগুলোর জন্য পলিফিল যোগ করবে।

৪. Babel CLI এবং Browserslist এর Integration

Babel CLI এর মাধ্যমে আপনি কোড ট্রান্সপাইল করার সময় --env ফ্ল্যাগ ব্যবহার করে নির্দিষ্ট ব্রাউজার বা পরিবেশ অনুযায়ী কাস্টমাইজড কোড আউটপুট করতে পারেন।

উদাহরণ:

npx babel src --out-dir dist --env production

এখানে, --env ফ্ল্যাগ ব্যবহার করে নির্দিষ্ট পরিবেশের জন্য ব্রাউজার টার্গেট করা যায়। যেমন production পরিবেশের জন্য আপনি আলাদা কনফিগারেশন রাখতে পারেন।

৫. Babel এবং Autoprefixer Integration

ব্রাউজার অনুযায়ী কোড আউটপুট কাস্টমাইজ করার সময়, আপনাকে CSS এ ব্রাউজার সাপোর্টের জন্য prefixes যোগ করতে হতে পারে। এ জন্য Autoprefixer প্যাকেজ ব্যবহার করা হয়, যা CSS কোডে ব্রাউজারের জন্য প্রয়োজনীয় prefixes যোগ করে।

Autoprefixer ইন্টিগ্রেট করার উদাহরণ:

npm install --save-dev autoprefixer

এটা PostCSS এর মাধ্যমে ব্যবহার করা যায়। Autoprefixer CSS এর জন্য স্বয়ংক্রিয়ভাবে ব্রাউজার নির্ধারণ করে এবং প্রয়োজনীয় prefixes যোগ করে।

সারাংশ

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

এছাড়া, Polyfills এবং Autoprefixer ইন্টিগ্রেশন ব্যবহার করে CSS এবং JavaScript উভয়ের ক্ষেত্রেই ব্রাউজার সাপোর্ট নিশ্চিত করতে পারেন।