সকল প্রধান ব্রাউজারে ভালোভাবে কাজ করে এমন ওয়েবসাইট তৈরি করা একটি উন্মুক্ত ওয়েব ইকোসিস্টেমের অন্যতম মূল নীতি। তবে, এর জন্য আপনাকে অতিরিক্ত কাজ করে নিশ্চিত করতে হবে যে আপনার লেখা সমস্ত কোড আপনি যেসব ব্রাউজারকে লক্ষ্য করতে চান, তার প্রতিটিতেই সমর্থিত হয়। আপনি যদি জাভাস্ক্রিপ্ট ভাষার নতুন কোনো ফিচার ব্যবহার করতে চান, তবে যে ব্রাউজারগুলো সেগুলোকে সমর্থন করে না, সেগুলোর জন্য আপনাকে এই ফিচারগুলোকে ব্যাকওয়ার্ড-কম্প্যাটিবল ফরম্যাটে ট্রান্সপাইল করতে হবে।
নতুন সিনট্যাক্সযুক্ত কোডকে এমন কোডে কম্পাইল করার জন্য Babel সবচেয়ে বহুল ব্যবহৃত টুল, যা বিভিন্ন ব্রাউজার এবং এনভায়রনমেন্ট (যেমন Node) বুঝতে পারে। এই নির্দেশিকাটি ধরে নিচ্ছে যে আপনি Babel ব্যবহার করছেন, তাই যদি আগে থেকে না করে থাকেন, তবে আপনার অ্যাপ্লিকেশনে এটি অন্তর্ভুক্ত করার জন্য সেটআপ নির্দেশাবলী অনুসরণ করতে হবে। যদি আপনি আপনার অ্যাপে মডিউল বান্ডলার হিসেবে webpack ব্যবহার করেন, তাহলে Build Systems এ webpack নির্বাচন করুন।
আপনার ব্যবহারকারীদের জন্য শুধু প্রয়োজনীয় অংশটুকু ট্রান্সপাইল করতে Babel ব্যবহার করার জন্য, আপনাকে যা করতে হবে তা হলো:
- আপনি কোন ব্রাউজারগুলোকে লক্ষ্য করতে চান তা চিহ্নিত করুন।
- উপযুক্ত ব্রাউজার টার্গেটের সাথে
@babel/preset-envব্যবহার করুন। - যেসব ব্রাউজারের প্রয়োজন নেই, সেগুলোতে ট্রান্সপাইল করা কোড পাঠানো বন্ধ করতে
<script type="module">ব্যবহার করুন।
আপনি কোন ব্রাউজারগুলোকে লক্ষ্য করতে চান তা শনাক্ত করুন।
আপনার অ্যাপ্লিকেশনের কোড ট্রান্সপাইল করার পদ্ধতি পরিবর্তন করা শুরু করার আগে, আপনাকে শনাক্ত করতে হবে কোন কোন ব্রাউজার আপনার অ্যাপ্লিকেশনটি অ্যাক্সেস করে। একটি সুচিন্তিত সিদ্ধান্ত নেওয়ার জন্য, আপনার ব্যবহারকারীরা কোন ব্রাউজার ব্যবহার করছেন এবং আপনি কোন ব্রাউজারগুলোকে লক্ষ্য করতে চান, তা বিশ্লেষণ করুন।
@babel/preset-env ব্যবহার করুন
কোড ট্রান্সপাইলিং করার ফলে সাধারণত মূল ফাইলের চেয়ে বড় আকারের একটি ফাইল তৈরি হয়। কম্পাইলেশনের পরিমাণ কমিয়ে আপনি আপনার বান্ডেলের আকার কমাতে পারেন, যা একটি ওয়েব পেজের পারফরম্যান্স উন্নত করতে সাহায্য করে।
আপনার ব্যবহৃত নির্দিষ্ট ল্যাঙ্গুয়েজ ফিচারগুলো বেছে বেছে কম্পাইল করার জন্য আলাদা প্লাগইন অন্তর্ভুক্ত করার পরিবর্তে, Babel বেশ কিছু প্রিসেট প্রদান করে যা প্লাগইনগুলোকে একসাথে বান্ডল করে। আপনি যে ব্রাউজারগুলোকে টার্গেট করতে চান, শুধু সেগুলোর জন্য প্রয়োজনীয় ট্রান্সফর্ম এবং পলিফিলগুলো অন্তর্ভুক্ত করতে @babel/preset-env ব্যবহার করুন।
আপনার Babel কনফিগারেশন ফাইল, .babelrc এর presets অ্যারের মধ্যে @babel/preset-env অন্তর্ভুক্ত করুন:
{
"presets": [
[
"@babel/preset-env",
{
"targets": ">0.25%"
}
]
]
}
আপনি কোন ব্রাউজার সংস্করণগুলি অন্তর্ভুক্ত করতে চান তা নির্দিষ্ট করতে, browsers ফিল্ডে একটি উপযুক্ত কোয়েরি যোগ করে targets ' ফিল্ডটি ব্যবহার করুন। @babel/preset-env , 'browserslist'-এর সাথে একীভূত হয়, যা ব্রাউজার টার্গেট করার জন্য বিভিন্ন টুলের মধ্যে ব্যবহৃত একটি ওপেন-সোর্স কনফিগারেশন। সামঞ্জস্যপূর্ণ কোয়েরিগুলির একটি সম্পূর্ণ তালিকা ' browserslist' ডকুমেন্টেশনে রয়েছে। আরেকটি বিকল্প হলো, আপনি যে এনভায়রনমেন্টগুলি টার্গেট করতে চান তার তালিকা করার জন্য একটি .browserslistrc ফাইল ব্যবহার করা।
">0.25%" মানটি Babel-কে নির্দেশ দেয় যেন শুধুমাত্র সেইসব ব্রাউজারকে সমর্থন করার জন্য প্রয়োজনীয় ট্রান্সফর্মগুলো অন্তর্ভুক্ত করা হয়, যেগুলো বিশ্বব্যাপী ব্যবহারের ০.২৫%-এর বেশি। এটি নিশ্চিত করে যে আপনার বান্ডেলে এমন ব্রাউজারগুলোর জন্য অপ্রয়োজনীয় ট্রান্সপাইল করা কোড থাকবে না, যেগুলো খুব অল্প সংখ্যক ব্যবহারকারী ব্যবহার করেন।
বেশিরভাগ ক্ষেত্রে, নিম্নলিখিত কনফিগারেশন ব্যবহার করার চেয়ে এটি একটি ভালো পদ্ধতি:
"targets": "last 2 versions"
"last 2 versions" ভ্যালুটি প্রতিটি ব্রাউজারের সর্বশেষ দুটি সংস্করণের জন্য আপনার কোড ট্রান্সপাইল করে, যার অর্থ হলো ইন্টারনেট এক্সপ্লোরারের মতো বন্ধ হয়ে যাওয়া ব্রাউজারগুলোর জন্যও সাপোর্ট দেওয়া হয়। যদি আপনি আশা না করেন যে এই ব্রাউজারগুলো আপনার অ্যাপ্লিকেশন অ্যাক্সেস করার জন্য ব্যবহৃত হবে, তাহলে এটি আপনার বান্ডেলের আকার অপ্রয়োজনীয়ভাবে বাড়িয়ে দিতে পারে।
পরিশেষে, আপনার প্রয়োজন অনুযায়ী শুধুমাত্র উপযুক্ত ব্রাউজারগুলোকে লক্ষ্য করার জন্য কোয়েরিগুলোর যথাযথ সমন্বয় নির্বাচন করা উচিত।
আধুনিক বাগফিক্স সক্রিয় করুন
@babel/preset-env একাধিক জাভাস্ক্রিপ্ট সিনট্যাক্স বৈশিষ্ট্যকে সংগ্রহে একত্রিত করে এবং নির্দিষ্ট টার্গেট ব্রাউজারের উপর ভিত্তি করে সেগুলোকে সক্রিয় বা নিষ্ক্রিয় করে। যদিও এটি ভালোভাবে কাজ করে, কিন্তু যখন কোনো টার্গেট ব্রাউজারে শুধুমাত্র একটি বৈশিষ্ট্যে বাগ থাকে, তখন সিনট্যাক্স বৈশিষ্ট্যের সম্পূর্ণ সংগ্রহটি রূপান্তরিত হয়ে যায়। এর ফলে প্রায়শই প্রয়োজনের চেয়ে বেশি কোড রূপান্তরিত হয়।
মূলত একটি পৃথক প্রিসেট হিসাবে তৈরি করা হলেও, @babel/preset-env এর bugfixes অপশনটি কিছু ব্রাউজারে ত্রুটিপূর্ণ আধুনিক সিনট্যাক্সকে এমন নিকটতম সমতুল্য সিনট্যাক্সে রূপান্তর করে এই সমস্যার সমাধান করে, যা সেই ব্রাউজারগুলিতে ত্রুটিপূর্ণ নয়। এর ফলে প্রায় অভিন্ন আধুনিক কোড পাওয়া যায়, যাতে সামান্য কিছু সিনট্যাক্স পরিবর্তন করা থাকে, যা সমস্ত টার্গেট ব্রাউজারে সামঞ্জস্যতা নিশ্চিত করে। এই অপটিমাইজেশনটি ব্যবহার করতে, নিশ্চিত করুন যে আপনার কাছে @babel/preset-env 7.10 বা তার পরবর্তী সংস্করণ ইনস্টল করা আছে, তারপর bugfixes প্রপার্টিটি true তে সেট করুন।
{
"presets": [
[
"@babel/preset-env",
{
"bugfixes": true
}
]
]
}
Babel 8-এ, bugfixes অপশনটি ডিফল্টরূপে সক্রিয় থাকবে।
<script type="module"> ব্যবহার করুন
জাভাস্ক্রিপ্ট মডিউল বা ইএস মডিউল হলো একটি তুলনামূলকভাবে নতুন ফিচার যা সব প্রধান ব্রাউজারে সমর্থিত। আপনি মডিউল ব্যবহার করে এমন স্ক্রিপ্ট তৈরি করতে পারেন যা অন্য মডিউল থেকে ডেটা ইম্পোর্ট ও এক্সপোর্ট করতে পারে। তবে, আপনি @babel/preset-env সাথে মডিউল ব্যবহার করে শুধুমাত্র সেইসব ব্রাউজারকে টার্গেট করতে পারেন যেগুলো এটি সমর্থন করে।
নির্দিষ্ট ব্রাউজার সংস্করণ বা মার্কেট শেয়ারের জন্য কোয়েরি করার পরিবর্তে, আপনার .babelrc ফাইলের targets ফিল্ডে "esmodules" : true উল্লেখ করার কথা বিবেচনা করুন।
{
"presets":[
[
"@babel/preset-env",
{
"targets":{
"esmodules": true
}
}
]
]
}
Babel দিয়ে কম্পাইল করা অনেক নতুন ECMAScript ফিচার ইতিমধ্যেই সেইসব পরিবেশে সমর্থিত যেখানে জাভাস্ক্রিপ্ট মডিউল সাপোর্ট করে। সুতরাং, এটি করার মাধ্যমে, আপনি এটা নিশ্চিত করার প্রক্রিয়াটিকে সহজ করে তোলেন যে শুধুমাত্র ট্রান্সপাইল করা কোডই সেইসব ব্রাউজারের জন্য ব্যবহৃত হবে যাদের আসলেই এটির প্রয়োজন।
যেসব ব্রাউজার মডিউল সমর্থন করে, তারা ` nomodule অ্যাট্রিবিউটযুক্ত স্ক্রিপ্ট উপেক্ষা করে। বিপরীতভাবে, যেসব ব্রাউজার মডিউল সমর্থন করে না, তারা type="module" যুক্ত স্ক্রিপ্ট এলিমেন্ট উপেক্ষা করে। এর মানে হলো, আপনি একটি মডিউল এবং একটি কম্পাইল করা ফলব্যাক উভয়ই অন্তর্ভুক্ত করতে পারেন।
আদর্শগতভাবে, একটি অ্যাপ্লিকেশনের দুটি ভার্সন স্ক্রিপ্ট এইভাবে অন্তর্ভুক্ত করা হয়:
<script type="module" src="main.mjs"></script>
<script nomodule src="compiled.js" defer></script>
যেসব ব্রাউজার মডিউল সমর্থন করে, তারা main.mjs ফেচ করে ও এক্সিকিউট করে এবং compiled.js উপেক্ষা করে। যেসব ব্রাউজারে মডিউল সমর্থন নেই, তারা এর বিপরীত কাজ করে।
আপনি যদি ওয়েবপ্যাক ব্যবহার করেন, তাহলে আপনার অ্যাপ্লিকেশনের দুটি আলাদা সংস্করণের জন্য কনফিগারেশনে ভিন্ন ভিন্ন টার্গেট সেট করতে পারেন:
- একটি সংস্করণ যা শুধুমাত্র মডিউল সমর্থনকারী ব্রাউজারগুলির জন্য।
- এমন একটি সংস্করণ যাতে একটি কম্পাইল করা স্ক্রিপ্ট অন্তর্ভুক্ত রয়েছে, যা যেকোনো পুরোনো ব্রাউজারে কাজ করে। এর ফাইলের আকার বড়, কারণ ট্রান্সপিলেশনকে আরও বিস্তৃত পরিসরের ব্রাউজার সমর্থন করতে হয়।
পর্যালোচনার জন্য কনর ক্লার্ক এবং জেসন মিলারকে ধন্যবাদ।