RequireJS হল একটি JavaScript module loader যা অ্যাসিঙ্ক্রোনাসভাবে স্ক্রিপ্ট লোড করতে সক্ষম, যাতে অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত হয় এবং কোডকে মডুলারভাবে সংগঠিত করা যায়। RequireJS মডিউল ডিপেনডেন্সি ম্যানেজমেন্ট সরবরাহ করে এবং কোডের পুনঃব্যবহারযোগ্যতা বৃদ্ধি করতে সাহায্য করে।
প্রথম RequireJS প্রজেক্ট তৈরি করার জন্য নিচে ধাপে ধাপে গাইড দেওয়া হল:
ধাপ ১: RequireJS ইনস্টল করা
RequireJS ব্যবহার করতে, প্রথমে RequireJS লাইব্রেরি অন্তর্ভুক্ত করতে হবে। এটি দুটি উপায়ে করা যেতে পারে:
১.১. CDN ব্যবহার করে ইনস্টল করা
আপনি CDN (Content Delivery Network) ব্যবহার করে সরাসরি RequireJS আপনার HTML ফাইলে অন্তর্ভুক্ত করতে পারেন। এটা খুবই সহজ এবং কোনো ইনস্টলেশন বা কনফিগারেশন দরকার নেই।
<!-- Include RequireJS from CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
১.২. NPM (Node Package Manager) ব্যবহার করে ইনস্টল করা
যদি আপনি Node.js ব্যবহার করেন, তবে requirejs লাইব্রেরি npm থেকে ইনস্টল করতে পারেন।
npm install requirejs
ধাপ ২: RequireJS এর মাধ্যমে মডিউল তৈরি করা
RequireJS মডিউল তৈরি করতে define ফাংশন ব্যবহার করা হয়। এটি এমন একটি ফাংশন যা মডিউল এবং এর ডিপেনডেন্সি একসাথে ডিফাইন করে।
উদাহরণ: একটি সাধারণ RequireJS প্রজেক্ট
ধরা যাক, আপনি একটি math মডিউল তৈরি করছেন যা দুটি সংখ্যা যোগ করার কাজ করবে এবং app মডিউল তৈরি করবেন যা math মডিউল ব্যবহার করবে।
২.১. math.js (মডিউল)
// math.js (Module)
define(function() {
return {
add: function(a, b) {
return a + b;
}
};
});
এখানে, math.js মডিউলটি একটি add ফাংশন রিটার্ন করছে যা দুটি সংখ্যা যোগ করে।
২.২. app.js (অ্যাপ্লিকেশন মডিউল)
// app.js (Main Application)
define(['math'], function(math) {
var result = math.add(5, 7);
console.log('Result: ' + result); // Output: Result: 12
});
এখানে, app.js মডিউলটি math মডিউলটি আমদানি করছে (যা ['math'] দিয়ে প্রকাশ করা হয়েছে) এবং math.add(5, 7) ফাংশনটি কল করছে।
ধাপ ৩: RequireJS লোডার কনফিগার করা
একটি HTML ফাইলে RequireJS কনফিগার করা হয়। আপনি require.config() ফাংশন ব্যবহার করে RequireJS এর কনফিগারেশন সেট করতে পারেন, যেমন মডিউল লোডের পথ এবং শিরোনাম।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First RequireJS Project</title>
</head>
<body>
<h1>Welcome to RequireJS</h1>
<!-- Include RequireJS from CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
<script>
require.config({
paths: {
math: 'math' // Set path for the math module
}
});
// Load the app module after RequireJS configuration
require(['app'], function(app) {
// App is loaded and ready to use
});
</script>
</body>
</html>
এখানে:
require.configফাংশনটি RequireJS এর কনফিগারেশন সেট করছে এবংmathমডিউলের জন্য পাথ সুনির্দিষ্ট করা হয়েছে।- পরে
require(['app'], function(app) {...})ফাংশন দিয়ে অ্যাপ্লিকেশন মডিউলটি লোড করা হচ্ছে।
ধাপ ৪: ফাইল স্ট্রাকচার
এখন, আপনাকে ফাইল স্ট্রাকচারটি এমনভাবে সাজাতে হবে যাতে সবকিছু ঠিকমতো কাজ করে:
my-requirejs-project/
│
├── index.html # HTML ফাইল
├── app.js # অ্যাপ্লিকেশন মডিউল
├── math.js # ম্যাথ মডিউল
└── js/ # অন্যান্য স্ক্রিপ্ট এবং মডিউল
└── require.js # RequireJS লোডার (যদি আপনি CDN ব্যবহার না করেন)
ধাপ ৫: অ্যাপ্লিকেশন রান করা
এখন আপনি index.html ফাইলটি ব্রাউজারে খুললেই আপনার প্রজেক্টটি রান করবে। যদি আপনি সঠিকভাবে কনফিগার করেন, তবে কনসোল এ "Result: 12" দেখানো হবে।
সারাংশ
RequireJS ব্যবহারের জন্য প্রধান পদক্ষেপগুলি:
- RequireJS লোডার ইনস্টল করুন (CDN বা NPM দিয়ে)।
- মডিউলগুলো
defineফাংশন দিয়ে তৈরি করুন এবং ডিপেনডেন্সি ঠিকভাবে সেট করুন। require.config()দিয়ে কনফিগারেশন করুন।requireফাংশন দিয়ে মডিউল লোড করুন।
এভাবে, আপনি RequireJS ব্যবহার করে একটি মডুলার ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারেন যেখানে কোড পুনঃব্যবহারযোগ্য এবং অ্যাসিঙ্ক্রোনাসভাবে লোড হয়, যা অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করে।
Read more
