ওয়েবপ্যাকের একটি ভূমিকা: এটি কী এবং কীভাবে এটি ব্যবহার করবেন

ভূমিকা

ঠিক আছে, আমি ধরে নিলাম আপনি ওয়েবপ্যাকটি শুনেছেন - এই কারণেই আপনি এখানে আছেন, তাই না? আসল প্রশ্নটি, আপনি এ সম্পর্কে কী জানেন? এটি কীভাবে কাজ করে সে সম্পর্কে আপনি কয়েকটি জিনিস জানেন বা আপনার কোনও ধারণা নেই। যাই হোক না কেন, আমি আপনাকে নিশ্চয়তা দিতে পারি যে এই নিবন্ধটি পড়ার পরে আপনি সম্ভবত সামগ্রিক ওয়েবপ্যাক পরিস্থিতি নিয়ে যথেষ্ট স্বাচ্ছন্দ্য বোধ করবেন।

সর্বোপরি, প্রয়োজনীয়তা আবিষ্কারের জননী ...

ওয়েবপ্যাক কেন রয়েছে তা বলার একটি সঠিক উপায় হ'ল উপরের উদ্ধৃতি। তবে এটি আরও ভালভাবে বুঝতে, আমাদের এমন সময়ে ফিরে যেতে হবে যখন জাভাস্ক্রিপ্ট নতুন সেক্সি জিনিস ছিল না, যখন পুরানো কালের কোনও ওয়েবসাইট ভাল পুরাতন .html, CSS এবং সম্ভবত একটি বা একটি ছিল কিছু ক্ষেত্রে কেবল কয়েকটি জাভাস্ক্রিপ্ট ফাইল। তবে খুব শীঘ্রই সবকিছু বদলে যাবে।

কী সমস্যা ছিল?

জাভাস্ক্রিপ্ট / ওয়েব অ্যাপ্লিকেশনগুলি ব্যবহার করে এবং বিল্ডিংয়ের সামগ্রিক ব্যবহারকারী এবং বিকাশকারীর অভিজ্ঞতা উন্নত করার জন্য পুরো বিকাশকারী সম্প্রদায় ক্রমাগত প্রচেষ্টা করে চলেছে। আমরা তাই অনেকগুলি নতুন গ্রন্থাগার এবং ফ্রেমওয়ার্ক চালু করেছি।

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

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

এই সমস্যাগুলি সমাধান করার জন্য একটি ওয়েবপ্যাক তৈরি করা হয়েছিল। ওয়েবপ্যাক একটি স্ট্যাটিক মডিউল বান্ডলার nd

ওয়েবপ্যাকটি কেমন ছিল উত্তর?

সংক্ষেপে, ওয়েবপ্যাক আপনার প্যাকেজটি অনুসন্ধান করে এবং নির্ভরতা ডায়াগ্রাম হিসাবে পরিচিত যা তৈরি করে তা বিভিন্ন মডিউল নিয়ে গঠিত যা আপনার ওয়েব অ্যাপ্লিকেশনটিকে প্রত্যাশা অনুযায়ী কাজ করতে হবে। এই চিত্রের উপর নির্ভর করে একটি নতুন প্যাকেজ তৈরি করা হয়েছে যা ন্যূনতম সংখ্যক ফাইলের সমন্বয়ে তৈরি হয়, প্রায়শই কেবল একটি একক বান্ডেল.জেএস ফাইল যা সহজেই এইচটিএমএল ফাইলের মধ্যে inোকানো যায় এবং অ্যাপ্লিকেশনের জন্য ব্যবহার করা যায়।

এই নিবন্ধের পরবর্তী অংশে, আমি আপনাকে ওয়েবপ্যাকটি সেটআপের মাধ্যমে ধাপে ধাপে গাইড করব। শেষ পর্যন্ত, আমি আশা করি আপনি ওয়েবপ্যাকের বেসিকগুলি বুঝতে পেরেছেন। তো আসুন এই ঘূর্ণায়মান ...

আমরা কী বিল্ডিং করছি?

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

আজ আমরা একটি সহজ প্রতিক্রিয়া অ্যাপ্লিকেশন তৈরি করতে যাচ্ছি, তবে তৈরি-প্রতিক্রিয়া-অ্যাপ্লিকেশন CLI ছাড়াই। আমি আশা করি যে এটি আপনার জন্য যথেষ্ট মজার শোনায়। :)

ইনস্টলেশন পর্ব

এনপিএম ইন

এটি ঠিক, প্রায় সমস্ত ভাল জিনিস শুরু হয়: সাধারণ পুরানো এনপিএম init। আমি ভিএস কোড ব্যবহার করতে যাচ্ছি, তবে শুরু করতে আমি কোনও কোড সম্পাদক ব্যবহার করতে পারি।

আপনি এটি করতে পারার আগে, আপনার কম্পিউটারে স্থানীয়ভাবে সর্বশেষ নোডজেএস এবং সর্বশেষতম এনপিএম সংস্করণ ইনস্টল করা আছে তা নিশ্চিত করুন। প্রক্রিয়া সম্পর্কে আরও জানতে এই লিঙ্কগুলির প্রতিটিটিতে ক্লিক করুন।

। npm ইনিশ

এটি স্টার্টার প্যাকেজ তৈরি করে এবং আমাদের জন্য একটি প্যাকেজ.জসোন ফাইল যুক্ত করে। এই অ্যাপ্লিকেশনটি তৈরি করতে প্রয়োজনীয় সমস্ত নির্ভরতা এখানে উল্লেখ করা হয়েছে।

একটি সহজ প্রতিক্রিয়া অ্যাপ্লিকেশন তৈরি করতে, আমাদের দুটি প্রধান গ্রন্থাগার প্রয়োজন: প্রতিক্রিয়া এবং রিঅ্যাক্টডোম। আসুন তাদের এনপিএম সহ আমাদের আবেদনের উপর নির্ভরতা হিসাবে যুক্ত করুন।

ave n pm আমি প্রতিক্রিয়া-ডোম - সংরক্ষণ করুন

এর পরে আমাদের ওয়েব প্যাকটি যুক্ত করতে হবে যাতে আমরা আমাদের অ্যাপগুলিকে একসাথে বান্ডিল করতে পারি। আমাদের কেবল একটি বান্ডিলের প্রয়োজন হবে না, তবে হট রিলোডও দরকার যা ওয়েবপ্যাক ডেভ সার্ভারের মাধ্যমে সম্ভব।

। npm আমি ওয়েবপ্যাক ওয়েবপ্যাক-ডেভ-সার্ভার ওয়েবপ্যাক-ক্লিপ - সেভ - দেব

- সংরক্ষণ - দেব নির্দেশ করে যে এই মডিউলগুলি কেবল ডেভ নির্ভরতা। এখন আমরা প্রতিক্রিয়ার সাথে কাজ করছি, আমাদের বিবেচনা করা উচিত যে প্রতিক্রিয়াটি ES6 শ্রেণি ব্যবহার করে এবং আমদানি বিবৃতিগুলি ব্যবহার করে যা সমস্ত ব্রাউজারগুলি বুঝতে পারে না। কোডটি সমস্ত ব্রাউজার দ্বারা পড়তে পারে তা নিশ্চিত করার জন্য, আমাদের কোডটিকে ব্রাউজারগুলির জন্য সাধারণ পঠনযোগ্য কোডে রূপান্তর করতে বাবেলের মতো একটি সরঞ্জাম প্রয়োজন।

pm এনপিএম আমি ব্যাবেল-কোর ব্যাবেল-লোডার @ বাবেল / ডিফল্ট-প্রতিক্রিয়া @ বাবেল / ডিফল্ট-এনভিটি এইচটিএমএল-ওয়েবপ্যাক-প্লাগইন - সেভ-ডেভ

আচ্ছা আমি কী বলতে পারি, এটি ছিল আমি প্রতিশ্রুতিবদ্ধ সর্বাধিক সংখ্যক ইনস্টলেশন। বাবেলের ক্ষেত্রে, আমরা প্রথমে বাবেল কোর লাইব্রেরিটি লোড করেছি, তারপরে লোডার এবং শেষ পর্যন্ত 2 টি প্লাগইন বা প্রিসেটগুলি বিশেষত প্রতিক্রিয়া এবং সমস্ত নতুন ES2015 এবং ES6 কোড সহ কাজ করতে।

এখন কোড যুক্ত করুন এবং ওয়েবপ্যাকটি কনফিগার করতে শুরু করুন।

এইভাবে প্যাকেজ.জেসন ফাইলটি সমস্ত পূর্ববর্তী ইনস্টলেশনগুলির দেখাশোনা করা উচিত। আপনি কখন এই নিবন্ধটি অনুসরণ করবেন তার উপর নির্ভর করে আপনার আলাদা সংস্করণ নম্বর থাকতে পারে।

কোড

আমাদের অ্যাপ্লিকেশন কাঠামোর মূলটিতে একটি ওয়েবপ্যাক.কনফিগ.জেএস ফাইল যুক্ত করে শুরু করা যাক। আপনার ওয়েবপ্যাক.কনফিগ ফাইলটিতে নিম্নলিখিত কোডটি আটকান।

কনস্ট পাথ = প্রয়োজনীয় ('পাথ'); কনস্ট এইচটিএমএল ওয়েবেপ্যাকপ্লাগিন = প্রয়োজন ('এইচটিএমএল-ওয়েবপ্যাক-প্লাগইন');
মডিউল.এক্সপোর্টস = {// এই সম্পত্তিটি নির্ধারণ করে যেখানে অ্যাপ্লিকেশন এন্ট্রি শুরু হয়: './ src / index.js',
// এই সম্পত্তিটি ফাইল পাথ এবং ফাইলের নাম সংজ্ঞায়িত করে যা বান্ডিলযুক্ত ফাইল সরবরাহ করতে ব্যবহৃত হয় Out
// লোডিং প্রোগ্রাম সেটআপ করুন মডিউল: {বিধি: [{পরীক্ষা: /\.js$/, বাদ: / নোড_মডিউল /, ব্যবহার: {লোডার: 'বাবেল-লোডার'}}]},
// জেএস ফাইল সরবরাহ করতে এইচটিএমএল ফাইল ব্যবহার করার জন্য প্লাগইন সেট আপ করুন Pl প্লাগইনগুলি: [নতুন এইচটিএমএল ওয়েবপ্যাকপ্লাগিন ({টেমপ্লেট: './src/index.html'})]}

ঠিক আছে, আসুন উপরের লাইনগুলি বুঝতে পারি।

প্রথমত, ফাইলের অবস্থান অ্যাক্সেস করতে এবং ফাইলের অবস্থান পরিবর্তন করতে আমাদের ডিফল্ট পাথ মডিউল প্রয়োজন।

এরপরে আমাদের একটি HTML ফাইল তৈরি করতে HTMLWebpackPlugin দরকার যা বান্ডিলযুক্ত জাভাস্ক্রিপ্ট ফাইল সরবরাহ করতে ব্যবহৃত হবে। লিঙ্কটি ক্লিক করে HTMLWebpackPlugin সম্পর্কে আরও পড়ুন।

তারপরে আমাদের কিছু রফতানি সহ এক্সপোর্ট.মডিউল অবজেক্ট রয়েছে। প্রথমটি হ'ল এন্ট্রি সম্পত্তি, যা অভ্যন্তরীণ নির্ভরতা চিত্রটি তৈরি করতে কোন ফাইলটি ওয়েবপ্যাকটি দিয়ে শুরু করা উচিত তা নির্দিষ্ট করে।

মডিউল.এক্সপোর্ট = {
প্রবেশ: './ src / index.js'
}

এরপরে, আউটপুট বৈশিষ্ট্যটি উল্লেখ করে যে কোথায় বান্ডিল করা ফাইলটি উত্পন্ন করা যায় এবং বান্ডিলযুক্ত ফাইলের নামটি কী হওয়া উচিত। এটি আউটপুট.পথ এবং আউটপুট.ফাইলনামের মাধ্যমে করা হয়।

মডিউল.এক্সপোর্ট = {
// এই সম্পত্তিটি ফাইল পাথ এবং ফাইলের নাম সংজ্ঞায়িত করে যা বান্ডিলযুক্ত ফাইল সরবরাহ করতে ব্যবহৃত হয় Out
}

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

মডিউল.এক্সপোর্ট = {
// লোডিং প্রোগ্রাম সেটআপ করুন মডিউল: {বিধি: [{পরীক্ষা: /\.js$/, বাদ: / নোড_মডিউল /, ব্যবহার: {লোডার: 'বাবেল-লোডার'}}]}
}

তথ্য প্রতিটি মডিউল সম্পত্তি জন্য একটি বস্তু সরবরাহ করা উচিত, এছাড়াও নিয়ম একটি সেট রয়েছে। প্রতিটি ক্ষেত্রে একটি অবজেক্ট থাকবে। আমি এও ইঙ্গিত দিয়েছি যে আমার নোড_মডিউলগুলি ফোল্ডারে থাকা সমস্ত কিছু বাদ দেওয়া উচিত।

এরপরে প্লাগইন সম্পত্তি। এটি ওয়েবপ্যাকের কার্যকারিতা বাড়ানোর জন্য ব্যবহৃত হয়। মডিউলটির রফতানি অবজেক্টের মধ্যে প্লাগইন অ্যারেটিতে প্লাগইন ব্যবহার করার আগে, আপনার একই প্রয়োজন।

মডিউল.এক্সপোর্ট = {
// জেএস ফাইল সরবরাহ করতে এইচটিএমএল ফাইল ব্যবহার করার জন্য প্লাগইন সেট আপ করুন Pl প্লাগইনগুলি: [নতুন এইচটিএমএল ওয়েবপ্যাকপ্লাগিন ({টেমপ্লেট: './src/index.html'})]
}

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

অবশেষে, আমরা ইনস্টল করা বাবেল প্রিসেটটি ব্যবহার করতে এবং আমাদের কোডে ES6 ক্লাস এবং আমদানি নির্দেশাবলী আমলে নিতে আমাদের একটি .babelrc ফাইল তৈরি করতে হবে। .Babelrc ফাইলটিতে নিম্নলিখিত কোডের লাইন যুক্ত করুন।

{"পছন্দসমূহ": ["env", "প্রতিক্রিয়া"]}

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

কোড প্রতিক্রিয়া

যেহেতু অ্যাপ্লিকেশনটির প্রারম্ভিক বিন্দুটি এসআরসি ফোল্ডারে ইনডেক্স.জেএস ফাইল, তাই এটি দিয়ে শুরু করা যাক। এই ক্ষেত্রে, আমাদের প্রথমে প্রতিক্রিয়া এবং রিঅ্যাক্টডম উভয়ই প্রয়োজন। আপনার index.js ফাইলে নিম্নলিখিত কোডটি আটকান।

'প্রতিক্রিয়া' থেকে আমদানি প্রতিক্রিয়া; 'রিঅ্যাক্ট-ডোম' থেকে রি্যাক্টডোম আমদানি করুন; '। / কম্পোনেন্টস / অ্যাপ' থেকে অ্যাপ্লিকেশন আমদানি করুন;
ReactDOM.render ( , document.getElementById ('অ্যাপ'));

সুতরাং আমরা কেবলমাত্র আপনার তৈরি ফোল্ডার থেকে অন্য ফাইলটি আমদানি করি যা আপনি তৈরি করে অ্যাপ.জেএস নামে ফোল্ডারে অন্য একটি ফাইল যুক্ত করেন সুতরাং আসুন একবার দেখে নেওয়া যাক অ্যাপ.জেএস ফাইলটিতে কী রয়েছে:

আমদানি প্রতিক্রিয়া, 'প্রতিক্রিয়া' থেকে {উপাদান}
শ্রেণি অ্যাপ্লিকেশনটি উপাদান সরবরাহ করে (রেন্ডার () {রিটার্ন ( ওয়েবপ্যাক + প্রতিক্রিয়া সেটআপ )}}
রপ্তানি স্ট্যান্ডার্ড অ্যাপ্লিকেশন;

আমরা প্রায় সম্পন্ন। এখন আপনাকে যা করতে হবে তা হ'ল অপারেশন চলাকালীন পুনরায় লোডিং সক্রিয় করা। এর অর্থ হ'ল ব্রাউজারটি যখনই পরিবর্তনটি সনাক্ত হয় ততবার পৃষ্ঠাটি পুনরায় লোড করে এবং যদি তা করে তবে পুরো অ্যাপ্লিকেশনটি তৈরি এবং বান্ডিল করার ক্ষমতা রয়েছে।

এটি করার জন্য, আমরা প্যাকেজ.জসন ফাইলটিতে স্ক্রিপ্টের মান যুক্ত করি। আপনার প্যাকেজ.জসন ফাইলের স্ক্রিপ্টগুলিতে পরীক্ষার সম্পত্তিটি সরান এবং এই দুটি স্ক্রিপ্ট যুক্ত করুন:

"শুরু": "ওয়েবপ্যাক-ডেভ-সার্ভার - মোড বিকাশ - ওপেন - হট",
"বিল্ড": "ওয়েবপ্যাক - মডেল উত্পাদন"

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

একবার আপনি ভাবছেন আপনি অ্যাপটি বান্ডিল করতে প্রস্তুত হয়ে গেলে আপনাকে যা করতে হবে তা হল এনপিএম বিল্ড কমান্ডকে আঘাত করা এবং ওয়েবপ্যাক আপনার প্রকল্প ফোল্ডারে একটি অনুকূলিত বান্ডেল তৈরি করবে যা কোনও ওয়েব সার্ভারে স্থাপন করা যেতে পারে।

উপসংহার

এটি কেবলমাত্র একটি ছোট অ্যাপ্লিকেশন বা ওয়েবপ্যাক এবং ব্যাবেলের ব্যবহারের ক্ষেত্রে, তবে অ্যাপ্লিকেশনগুলি সীমাহীন। আমি আশা করি আপনি ওয়েবপ্যাক এবং ব্যাবেলের সাথে কাজ করার আরও উপায় এবং উপায় অন্বেষণ করতে যথেষ্ট উত্তেজিত are আরও জানতে এবং বিস্তারিত পড়তে দয়া করে অফিসিয়াল ওয়েবসাইটগুলি দেখুন visit

আমি এতে থাকা সমস্ত কোড সহ একটি গিথুব সংগ্রহশালা তৈরি করেছি। আপনার যদি কোনও প্রশ্ন থাকে তবে দয়া করে সংগ্রহস্থলের সাথে যোগাযোগ করুন।

ওয়েবপ্যাকের মাধ্যমে আমার দুটি সেন্ট? কখনও কখনও আপনি ভাবতে পারেন যে এটি কেবল একটি সরঞ্জাম, এবং কেন আপনি কোনও সরঞ্জাম সম্পর্কে খুব বেশি বিরক্ত করবেন? তবে আমাকে বিশ্বাস করুন যখন আমি এটি বলি: ওয়েবপ্যাকটি শিখার প্রাথমিক লড়াই আপনাকে প্রচুর পরিমাণে ঘন্টা বাঁচায় যা আপনি অন্যথায় ওয়েবপ্যাক ছাড়াই বিকাশে বিনিয়োগ করতে পারেন।

আমরা শীঘ্রই আবার একটি আকর্ষণীয় নিবন্ধ প্রকাশ করতে সক্ষম হবে আশা করি। আমি আশা করি আপনি এই বইটি পড়ে উপভোগ করেছেন!

উপরের পদক্ষেপগুলি / প্রক্রিয়াগুলি সম্পাদন করার সময় যদি আপনার কোনও অসুবিধা বা সমস্যার মুখোমুখি হয় তবে দয়া করে আমাদের সাথে যোগাযোগ করুন এবং মন্তব্যগুলি নির্দ্বিধায় করুন।

লিঙ্কডইন: https://www.linkedin.com/in/ashish-nandan-singh-490987130/

টুইটার: https://twitter.com/ashishnandansin