Babel Transpilation Error Handle করা

BabelJS এর Performance এবং Debugging - বেবেলজেএস (BabelJS) - Web Development

257

BabelJS কোড ট্রান্সপাইল করার সময় কখনও কখনও ত্রুটি (error) প্রদর্শন করতে পারে, যা সাধারণত কোডের সিনট্যাক্স বা কনফিগারেশন সংক্রান্ত সমস্যা থেকে উদ্ভূত হয়। একটি ট্রান্সপাইলেশন প্রক্রিয়া সঠিকভাবে শেষ না হলে, আপনি যে অ্যাপ্লিকেশন বা কোডটিতে কাজ করছেন সেটি চলতে পারে না। তাই, Babel Transpilation Error Handle করার জন্য প্রয়োজনীয় কৌশল এবং টিপস জানা গুরুত্বপূর্ণ।

এই গাইডে আমরা Babel transpilation error গুলি কীভাবে সনাক্ত করা, সেগুলির কারণ বিশ্লেষণ করা এবং সঠিক সমাধান খুঁজে বের করার কৌশল নিয়ে আলোচনা করব।

Babel Transpilation Error: কীভাবে সনাক্ত করবেন?

বাবেল যখন কোড ট্রান্সপাইল করে, তখন এটি কমান্ড লাইনে বা কনসোল এ ত্রুটি (error) বার্তা প্রদর্শন করবে। সাধারণত, ত্রুটির বার্তাগুলিতে সুনির্দিষ্ট সমস্যা এবং কোথায় সমস্যা ঘটছে, তা উল্লেখ করা থাকে। এর মাধ্যমে আপনি ত্রুটির কারণ এবং তার সমাধান খুঁজে পেতে পারেন।

উদাহরণ:

SyntaxError: Unexpected token (4:2)
  2 | const greet = () => {
  3 |   console.log('Hello');
> 4 |   }

এই ত্রুটি দেখাচ্ছে যে কোডের ৪ নাম্বার লাইনে কোনো সমস্যা রয়েছে। এখানে সম্ভবত কোডের সঠিক সঠিক বন্ধনী বা সেমিকোলন মিসিং থাকতে পারে।

সাধারণ Babel Transpilation Errors এবং সমাধান

Syntax Error (সিনট্যাক্স ত্রুটি)

Babel সিনট্যাক্স ত্রুটি প্রদর্শন করলে তা সাধারণত ভুল সিনট্যাক্স বা অপূর্ণ বা ভুল ফিচার ব্যবহারের কারণে ঘটে। যেমন, যদি ES6 এর ক্লাসের ভুল সিনট্যাক্স ব্যবহার করা হয় বা অশুদ্ধ ফাংশন ডিক্লেয়ারেশন ব্যবহার করা হয়।

সমাধান:

কোডের ভুল সিনট্যাক্স সঠিক করুন।
যদি কোনো নতুন ফিচার ব্যবহার করেন তবে সেই ফিচারটি সঠিকভাবে ট্রান্সপাইল করার জন্য প্রয়োজনীয় Babel Preset বা Plugin ইনস্টল করুন।

উদাহরণ:

SyntaxError: Unexpected token (5:2)

এটি সাধারণত কোডে একটি সেমিকোলন বা ব্র্যাকেটের অভাবের কারণে ঘটে।

Plugin Missing (প্লাগিন অনুপস্থিত)

যদি আপনি কিছু নতুন JavaScript ফিচার ব্যবহার করতে চান, যেমন ES7 decorators বা class properties, এবং সেই ফিচারটি Babel স্বাভাবিকভাবেই সাপোর্ট না করে, তবে আপনাকে সংশ্লিষ্ট প্লাগিন ইনস্টল করতে হবে।

সমাধান:

প্রয়োজনীয় Babel প্লাগিন ইনস্টল করুন।

উদাহরণ:

Error: [BABEL] "decorators" plugin is not enabled.

এ ক্ষেত্রে, আপনি @babel/plugin-proposal-decorators প্লাগিনটি ইনস্টল করতে পারেন:

npm install --save-dev @babel/plugin-proposal-decorators

Preset Missing (প্রিসেট অনুপস্থিত)

Babel একটি নির্দিষ্ট preset ব্যবহারের জন্য নির্ধারিত থাকে। যদি আপনার কোড ES6 বা ES7 ফিচার ব্যবহার করে থাকে এবং আপনার @babel/preset-env বা @babel/preset-react ইনস্টল না থাকে, তবে Babel সেই কোড ট্রান্সপাইল করতে পারবে না।

সমাধান:

প্রয়োজনীয় preset ইনস্টল করুন।

উদাহরণ:

Error: [BABEL] preset "react" is missing.

এ ক্ষেত্রে আপনাকে @babel/preset-react ইনস্টল করতে হবে:

npm install --save-dev @babel/preset-react

Configuration Errors (কনফিগারেশন ত্রুটি)

বাবেল কনফিগারেশন ফাইল (যেমন .babelrc বা babel.config.js) সঠিকভাবে কনফিগার না করলে ত্রুটি হতে পারে। কনফিগারেশন ভুল থাকলে আপনি Error: Plugin/Preset files are not allowed to export objects বা অন্যান্য ত্রুটি বার্তা দেখতে পাবেন।

সমাধান:

.babelrc বা babel.config.js ফাইল সঠিকভাবে কনফিগার করুন এবং নিশ্চিত করুন যে কোন প্লাগিন বা preset সঠিকভাবে ডিফাইন করা হয়েছে।

উদাহরণ:

Error: Plugin/Preset files are not allowed to export objects.

এটি তখন ঘটে যখন আপনি .babelrc ফাইলের মধ্যে অবৈধ কনফিগারেশন যুক্ত করেন। যেমন, object অথবা array format সঠিকভাবে না হওয়া।