সমস্ত প্রধান ব্রাউজারে ভালভাবে কাজ করে এমন ওয়েবসাইট তৈরি করা একটি ওপেন ওয়েব ইকোসিস্টেমের মূল নীতি। যাইহোক, এর অর্থ হল আপনি যে সমস্ত কোড লিখছেন তা নিশ্চিত করার অতিরিক্ত কাজ প্রতিটি ব্রাউজারে সমর্থিত যা আপনি লক্ষ্য করার পরিকল্পনা করছেন। আপনি যদি নতুন জাভাস্ক্রিপ্ট ভাষার বৈশিষ্ট্যগুলি ব্যবহার করতে চান তবে আপনাকে এই বৈশিষ্ট্যগুলিকে পিছনের দিকে-সামঞ্জস্যপূর্ণ ফর্ম্যাটে স্থানান্তর করতে হবে যেগুলি এখনও সমর্থন করে না।
বাবেল হল কোড কম্পাইল করার জন্য সবচেয়ে বেশি ব্যবহৃত টুল যা কোডে নতুন সিনট্যাক্স ধারণ করে যা বিভিন্ন ব্রাউজার এবং পরিবেশ (যেমন নোড) বুঝতে পারে। এই নির্দেশিকাটি অনুমান করে যে আপনি ব্যাবেল ব্যবহার করছেন, তাই যদি আপনি ইতিমধ্যে না করে থাকেন তবে এটিকে আপনার অ্যাপ্লিকেশনে অন্তর্ভুক্ত করতে আপনাকে সেটআপ নির্দেশাবলী অনুসরণ করতে হবে। আপনি যদি আপনার অ্যাপে মডিউল বান্ডলার হিসাবে ওয়েবপ্যাক ব্যবহার করেন তবে Build Systems webpack নির্বাচন করুন।
আপনার ব্যবহারকারীদের জন্য যা প্রয়োজন তা শুধুমাত্র ট্রান্সপিল করার জন্য ব্যাবেল ব্যবহার করতে, আপনাকে করতে হবে:
- আপনি লক্ষ্য করতে চান কোন ব্রাউজার সনাক্ত করুন.
- উপযুক্ত ব্রাউজার টার্গেটের সাথে
@babel/preset-envব্যবহার করুন। - প্রয়োজন নেই এমন ব্রাউজারগুলিতে ট্রান্সপিল কোড পাঠানো বন্ধ করতে
<script type="module">ব্যবহার করুন।
আপনি লক্ষ্য করতে চান কোন ব্রাউজার সনাক্ত করুন
আপনার অ্যাপ্লিকেশানের কোডটি কীভাবে পরিবর্তিত হয় তা আপনি সংশোধন করা শুরু করার আগে, আপনাকে সনাক্ত করতে হবে কোন ব্রাউজারগুলি আপনার অ্যাপ্লিকেশনটি অ্যাক্সেস করে৷ আপনার ব্যবহারকারীরা বর্তমানে কোন ব্রাউজারগুলি ব্যবহার করছেন সেইসাথে আপনি যেগুলিকে লক্ষ্য করার পরিকল্পনা করছেন তা একটি অবগত সিদ্ধান্ত নেওয়ার জন্য বিশ্লেষণ করুন৷
@babel/preset-env ব্যবহার করুন
ট্রান্সপিলিং কোড সাধারণত একটি ফাইলে পরিণত হয় যা ফাইলের আকারে তাদের আসল ফর্মের চেয়ে বড়। আপনি যে পরিমাণ সংকলন করেন তা কমিয়ে আপনি একটি ওয়েব পৃষ্ঠার কর্মক্ষমতা উন্নত করতে আপনার বান্ডেলের আকার কমাতে পারেন।
আপনি ব্যবহার করছেন এমন কিছু ভাষা বৈশিষ্ট্য নির্বাচনীভাবে কম্পাইল করার জন্য নির্দিষ্ট প্লাগইনগুলি অন্তর্ভুক্ত করার পরিবর্তে, ব্যাবেল অনেকগুলি প্রিসেট সরবরাহ করে যা প্লাগইনগুলিকে একত্রিত করে। আপনি লক্ষ্য করার পরিকল্পনা করছেন এমন ব্রাউজারগুলির জন্য প্রয়োজনীয় রূপান্তর এবং পলিফিলগুলি অন্তর্ভুক্ত করতে @babel/preset-env ব্যবহার করুন।
আপনার Babel কনফিগারেশন ফাইলে presets অ্যারের মধ্যে @babel/preset-env অন্তর্ভুক্ত করুন, .babelrc :
{
"presets": [
[
"@babel/preset-env",
{
"targets": ">0.25%"
}
]
]
}
browsers ফিল্ডে একটি উপযুক্ত ক্যোয়ারী যোগ করে আপনি কোন ব্রাউজার সংস্করণগুলি অন্তর্ভুক্ত করতে চান তা নির্দিষ্ট করতে targets ক্ষেত্রটি ব্যবহার করুন৷ @babel/preset-env ব্রাউজারলিস্টের সাথে একীভূত হয়, একটি ওপেন-সোর্স কনফিগারেশন ব্রাউজারকে টার্গেট করার জন্য বিভিন্ন টুলের মধ্যে ভাগ করা হয়েছে। সামঞ্জস্যপূর্ণ প্রশ্নের একটি সম্পূর্ণ তালিকা ব্রাউজারলিস্ট ডকুমেন্টেশনে রয়েছে। আরেকটি বিকল্প হল একটি .browserslistrc ফাইল ব্যবহার করে আপনি যে পরিবেশগুলিকে লক্ষ্য করতে চান তা তালিকাভুক্ত করতে।
">0.25%" মানটি Babel কে শুধুমাত্র 0.25% এর বেশি বিশ্বব্যাপী ব্যবহার করে এমন ব্রাউজারগুলিকে সমর্থন করার জন্য প্রয়োজনীয় রূপান্তরগুলি অন্তর্ভুক্ত করতে বলে৷ এটি নিশ্চিত করে যে আপনার বান্ডিলে এমন ব্রাউজারগুলির জন্য অপ্রয়োজনীয় ট্রান্সপিলড কোড নেই যা ব্যবহারকারীদের একটি খুব কম শতাংশ দ্বারা ব্যবহৃত হয়।
বেশিরভাগ ক্ষেত্রে, নিম্নলিখিত কনফিগারেশন ব্যবহার করার চেয়ে এটি একটি ভাল পদ্ধতি:
"targets": "last 2 versions"
"last 2 versions" মান প্রতিটি ব্রাউজারের শেষ দুটি সংস্করণের জন্য আপনার কোডকে স্থানান্তরিত করে, যার অর্থ ইন্টারনেট এক্সপ্লোরারের মতো বন্ধ ব্রাউজারগুলির জন্য সমর্থন প্রদান করা হয়। এটি অপ্রয়োজনীয়ভাবে আপনার বান্ডেলের আকার বৃদ্ধি করতে পারে যদি আপনি এই ব্রাউজারগুলিকে আপনার অ্যাপ্লিকেশন অ্যাক্সেস করতে ব্যবহার করার আশা না করেন৷
শেষ পর্যন্ত, আপনার প্রয়োজনের সাথে মানানসই শুধুমাত্র ব্রাউজারগুলিকে লক্ষ্য করার জন্য আপনার প্রশ্নের উপযুক্ত সমন্বয় নির্বাচন করা উচিত।
আধুনিক বাগ ফিক্স সক্রিয় করুন
@babel/preset-env একাধিক জাভাস্ক্রিপ্ট সিনট্যাক্স বৈশিষ্ট্যকে সংগ্রহে গোষ্ঠীভুক্ত করে এবং নির্দিষ্ট করা টার্গেট ব্রাউজারগুলির উপর ভিত্তি করে সেগুলিকে সক্রিয়/অক্ষম করে। যদিও এটি ভাল কাজ করে, সিনট্যাক্স বৈশিষ্ট্যগুলির একটি সম্পূর্ণ সংগ্রহ রূপান্তরিত হয় যখন একটি লক্ষ্যযুক্ত ব্রাউজারে শুধুমাত্র একটি বৈশিষ্ট্য সহ একটি বাগ থাকে। এটি প্রায়শই প্রয়োজনীয়তার চেয়ে বেশি রূপান্তরিত কোডের ফলাফল করে।
মূলত একটি পৃথক প্রিসেট হিসাবে বিকশিত, @babel/preset-env এর বাগফিক্সেস বিকল্পটি কিছু ব্রাউজারে ভাঙা আধুনিক সিনট্যাক্সকে সবচেয়ে কাছের সমতুল্য সিনট্যাক্সে রূপান্তর করে এই সমস্যার সমাধান করে যা সেই ব্রাউজারগুলিতে ভাঙা হয়নি। ফলাফলটি কয়েকটি ছোট সিনট্যাক্স টুইক সহ প্রায় অভিন্ন আধুনিক কোড যা সমস্ত লক্ষ্য ব্রাউজারে সামঞ্জস্যের গ্যারান্টি দেয়। এই অপ্টিমাইজেশানটি ব্যবহার করতে, নিশ্চিত করুন যে আপনার কাছে @babel/preset-env 7.10 বা তার পরে ইন্সটল করা আছে, তারপর bugfixes প্রপার্টি true সেট করুন:
{
"presets": [
[
"@babel/preset-env",
{
"bugfixes": true
}
]
]
}
Babel 8 এ, bugfixes বিকল্পটি ডিফল্টরূপে সক্রিয় করা হবে।
<script type="module"> ব্যবহার করুন
জাভাস্ক্রিপ্ট মডিউল, বা ES মডিউল, সমস্ত প্রধান ব্রাউজারে সমর্থিত একটি অপেক্ষাকৃত নতুন বৈশিষ্ট্য। আপনি স্ক্রিপ্ট তৈরি করতে মডিউল ব্যবহার করতে পারেন যা অন্যান্য মডিউল থেকে আমদানি এবং রপ্তানি করতে পারে, তবে আপনি শুধুমাত্র তাদের সমর্থন করে এমন ব্রাউজারগুলিকে টার্গেট করতে @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 উপেক্ষা করে। যে ব্রাউজারগুলি মডিউল সমর্থন করে না তারা বিপরীত কাজ করে।
আপনি যদি ওয়েবপ্যাক ব্যবহার করেন, আপনি আপনার অ্যাপ্লিকেশনের দুটি পৃথক সংস্করণের জন্য আপনার কনফিগারেশনে বিভিন্ন লক্ষ্য নির্ধারণ করতে পারেন:
- মডিউল সমর্থন করে এমন ব্রাউজারগুলির জন্য একটি সংস্করণ।
- একটি সংস্করণ যা একটি সংকলিত স্ক্রিপ্ট অন্তর্ভুক্ত করে যা যেকোনো লিগ্যাসি ব্রাউজারে কাজ করে। এটির একটি বড় ফাইলের আকার রয়েছে, যেহেতু ট্রান্সপিলেশনের জন্য ব্রাউজারগুলির একটি বিস্তৃত পরিসরকে সমর্থন করতে হবে।
কনর ক্লার্ক এবং জেসন মিলারকে তাদের পর্যালোচনার জন্য ধন্যবাদ।