কিভাবে বাবেলের সাথে ES6 কে ES5 তে রূপান্তর করবেন

আপনার ES6 কোডটি ব্রাউজার দ্বারা 100% সমর্থিত তা নিশ্চিত করুন

আপনি কি ES6 ব্যবহার করতে চান তবে আপনার অ্যাপ্লিকেশনের জন্য ব্রাউজার সমর্থন এবং পশ্চাদপটে সামঞ্জস্যতা সম্পর্কে উদ্বিগ্ন? চিন্তা করবেন না, বাবেল সেখানে আমাদের সহায়তা করতে পারে।

বাবেল হ'ল একটি ট্রান্সপ্লেলার (একই স্তরে বিমূর্তকরণের একটি ভাষাতে অন্য ভাষায় কোড অনুবাদ করে) যা আমাদের ES6 কোডটি ES5 তে রূপান্তর করতে পারে। আমি ধরে নিচ্ছি যে আপনি কীভাবে নোড এবং এনপিএম ব্যবহার করতে জানেন এবং উভয়ই আপনার কম্পিউটারে ইনস্টল করা আছে। যদি আপনি না করেন তবে এখানেই শুরু করুন।

1. দেব নির্ভরতা হিসাবে বাবেল ইনস্টল করুন

প্রথমটি হ'ল বাবেল কমান্ড লাইন ইন্টারফেসটি ডাউনলোড করা যা আপনি আপনার টার্মিনালে বাবেল ব্যবহার করতে পারেন। আপনার কমান্ড লাইনে আপনার প্রকল্প ফোল্ডারে নেভিগেট করুন এবং নিম্নলিখিত কমান্ডটি প্রবেশ করুন:

। npm ইনস্টল করুন -D ব্যাবেল-ক্লিপ

2. ES6 কোড লিখুন

আপনি যদি ইতিমধ্যে ES6 কোড লিখে থাকেন তবে আপনি গেমের চেয়ে এগিয়ে। যদি না করেন তবে এখনই করুন। আমার পরামর্শটি হ'ল আপনার জাভাস্ক্রিপ্ট ফাইলগুলি এসআরসি বা জাভাস্ক্রিপ্টের মতো ফোল্ডারে রেখে দেওয়া। আমি একটি নমুনা ফাইল তৈরি করব:

// src / উদাহরণ.js
দুর্দান্ত হ্যালো {স্ট্যাটিক ওয়ার্ল্ড () so কনসোল.লগ ('হ্যালো, ওয়ার্ল্ড!'); }}
হ্যালো ওয়ার্ল্ড ();

৩. এনভির পূর্বনির্ধারিত ইনস্টল করুন এবং একটি .babelrc ফাইল তৈরি করুন

এখন আমাদের জাভাস্ক্রিপ্ট কোডটি রয়েছে, আমাদের জন্য ট্রান্সপ্লাই করার জন্য আমাদের বাবেল সেট আপ করতে হবে। দুর্ভাগ্যক্রমে, বাবেল তাক থেকে খুব বেশি কিছু করতে পারে না। কাজটি করার জন্য এটি যথাযথ প্লাগইন এবং প্রিসেটগুলি দরকার - প্লাগইনের সংযুক্ত গ্রুপ।

আমাদের ক্ষেত্রে, আমরা এনইভি প্রিসেটটি ব্যবহার করি এবং এটি আপনার প্রকল্পের বিকাশ নির্ভরতা হিসাবে ইনস্টল করি।

pm npm ইনস্টল করুন -ড ব্যাবেল-প্রিসেট-এনভ

এখন আমাদের আমাদের .belrc ফাইল দরকার। Npm কীভাবে প্যাকেজ.জসনের উপর নির্ভর করে তার অনুরূপ, ব্যাবেল আমরা ব্যবহার করব এমন প্লাগইন এবং প্রিসেটের উপর নজর রাখতে .babelrc ব্যবহার করে।

আপনার .babelrc ফাইলটি তৈরি করুন:

$ স্পর্শ করুন

এবং নিম্নলিখিত লিখুন:

// .babelrc
{"প্রিসেটস": ["এনভিনিউ"]}

4. একটি এনপিএম বিল্ড কমান্ড তৈরি করুন

আপনাকে এটি করতে হবে না, তবে আপনাকে যদি আপনার ঘন ঘন আপনার কোডটি স্থানান্তর করতে হয় তবে এটি দ্রুত এবং সহজ হয়ে যায়।

আপনার প্যাকেজ.জসন ফাইলটিতে ব্রাউজ করুন, যেখানে আমরা এনপিএম বিল্ড স্ক্রিপ্ট তৈরি করতে বাবেল কমান্ডটি ব্যবহার করি। বাবেল কমান্ডটি দুটি আর্গুমেন্ট গ্রহণ করে: আপনার ES6 কোডের পথ এবং আপনি যেখানে আপনার ES5 কোডটি চান সেখানে যাওয়ার পথ।

আপনি যদি সমস্ত জাভাস্ক্রিপ্ট কোড একটি ডিরেক্টরিতে সংরক্ষণ করে থাকেন তবে আপনি বাডকে ফাইলের পরিবর্তে ডিরেক্টরি অনুসন্ধান করতে বলার জন্য আদেশটিতে -d পতাকাটি যুক্ত করতে পারেন। আমার উদাহরণে, আমার এসসিআর ডিরেক্টরিতে আমার জাভাস্ক্রিপ্ট কোড রয়েছে তবে আমি চাই যে আমার ইএস 5 কোডটি একটি বিল্ড ডিরেক্টরিতে রেখে দেওয়া হোক।

// package.json
... "স্ক্রিপ্টস": build "বিল্ড": "ব্যাবেল এসআরসি-ডি বিল্ড",}, ...

5. বাবেল আদেশটি কার্যকর করুন

আপনার .babelrc ফাইলটি তৈরি করার পরে এবং আপনার বিল্ড কমান্ডটি সম্পন্ন করার পরে এটিকে কেবল আপনার কমান্ড লাইনে চালান।

। npm রান বিল্ড

আপনার বিল্ড ডিরেক্টরিতে আপনার রূপান্তরিত জাভাস্ক্রিপ্ট ফাইলগুলি দেখতে হবে। এখন আপনাকে যা করতে হবে তা হ'ল এগুলিকে আপনার অ্যাপ্লিকেশনটিতে যুক্ত করুন এবং শুরু করুন!