RequireJS একটি module loader যা AMD (Asynchronous Module Definition) স্ট্যান্ডার্ডে মডিউল লোড এবং ডিপেনডেন্সি ম্যানেজ করতে সাহায্য করে। তবে, অনেক সেকেন্ড বা পুরোনো লাইব্রেরি এবং স্ক্রিপ্ট AMD-compliant নয়। এই ধরনের Non-AMD scripts লোড করার জন্য, RequireJS এর Shim Configuration ব্যবহার করা হয়।
Shim Configurations কি?
Shim Configuration হল একটি কনফিগারেশন সেটিংস যা RequireJS-এ Non-AMD scripts লোড করতে সাহায্য করে। এই কনফিগারেশন ব্যবহার করে আপনি এমন স্ক্রিপ্টগুলোকে RequireJS-এর মাধ্যমে লোড করতে পারবেন যেগুলি AMD স্ট্যান্ডার্ডের সাথে সামঞ্জস্যপূর্ণ নয়।
Shim Configuration আপনি dependencies, exports, এবং init কনফিগারেশন প্যারামিটার ব্যবহার করে অ্যাড করে থাকেন।
Shim Configuration এর প্যারামিটারস:
exports: স্ক্রিপ্টটি যখন লোড হবে, তখন তার যে গ্লোবাল ভ্যারিয়েবল বা অবজেক্টটি তৈরি হবে তা RequireJS এ এক্সপোর্ট হবে। এই প্যারামিটারটি দিয়ে আপনি গ্লোবাল ভ্যারিয়েবল বা অবজেক্টটি সংজ্ঞায়িত করতে পারেন।dependencies: আপনার স্ক্রিপ্টটির যেসব ডিপেনডেন্সি আছে (যেগুলো আগে লোড করতে হবে), সেগুলি এই প্যারামিটারে তালিকাভুক্ত করা হয়। এইভাবে আপনি নিশ্চিত করতে পারেন যে আপনার স্ক্রিপ্টটি প্রয়োজনীয় ডিপেনডেন্সি লোড হওয়ার পরেই চালু হবে।init: এটি একটি ফাংশন যা স্ক্রিপ্টটি লোড হওয়ার পর কাজ করবে। আপনি এখানে আপনার স্ক্রিপ্টের শুরুতেই কোনো ইন্টিগ্রেশন বা কনফিগারেশন সেটআপ করতে পারেন।
Shim Configuration ব্যবহার করে Non-AMD Scripts লোড করার উদাহরণ:
ধরা যাক, আপনি jQuery এবং Bootstrap এর মতো স্ক্রিপ্টগুলো ব্যবহার করতে চান, যা AMD মডিউল হিসেবে সংজ্ঞায়িত হয়নি। এই পরিস্থিতিতে, আপনি Shim Configuration ব্যবহার করে এই স্ক্রিপ্টগুলো লোড করতে পারেন।
1. require.config() এর মাধ্যমে Shim Configuration সেট করা:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RequireJS with Shim Example</title>
<!-- Load RequireJS -->
<script data-main="js/main" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
</head>
<body>
<h1>RequireJS Example with Shim</h1>
<!-- Define scripts to be loaded -->
<script>
require.config({
paths: {
'jquery': 'https://code.jquery.com/jquery-3.6.0.min',
'bootstrap': 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min'
},
shim: {
'bootstrap': {
deps: ['jquery'], // bootstrap depends on jQuery
exports: '$.fn.popover' // bootstrap attaches methods to jQuery
}
}
});
require(['jquery', 'bootstrap'], function($, bootstrap) {
console.log("jQuery and Bootstrap loaded!");
// Now you can use jQuery and Bootstrap methods
});
</script>
</body>
</html>
ব্যাখ্যা:
paths: এখানে, আমরা jQuery এবং Bootstrap এর জন্য CDN URLs দিয়েছি, যাতে RequireJS জানে এই স্ক্রিপ্টগুলোর অবস্থান কোথায়।shim: এই কনফিগারেশনটি দিয়ে আমরা জানাচ্ছি যে Bootstrap মডিউলটি jQuery-এর উপর নির্ভরশীল। অর্থাৎ, Bootstrap লোড হওয়ার আগে প্রথমে jQuery লোড হতে হবে। এছাড়াও,exportsদিয়ে আমরা$.fn.popoverএটিকে এক্সপোর্ট হিসেবে সংজ্ঞায়িত করেছি, যেহেতু Bootstrap মূলত jQuery-তে কিছু ফাংশন যুক্ত করে।deps: ডিপেনডেন্সি গুলি উল্লেখ করে (এক্ষেত্রে['jquery']) যা নিশ্চিত করে যে Bootstrap প্রথমে jQuery ডিপেনডেন্সি লোড হবে।exports: গ্লোবালভাবে যে ভ্যারিয়েবল বা ফাংশন এক্সপোর্ট হবে তা সুনির্দিষ্ট করে।
অন্য একটি উদাহরণ (Non-AMD Script লোড করা):
ধরা যাক, আপনি একটি legacy JavaScript স্ক্রিপ্ট ব্যবহার করছেন, যা AMD মডিউল নয়। এখানে একটি কনফিগারেশন উদাহরণ দেওয়া হলো।
<script>
require.config({
paths: {
'legacyLibrary': 'path/to/legacyLibrary.js'
},
shim: {
'legacyLibrary': {
exports: 'LegacyLib' // Define global object as export
}
}
});
require(['legacyLibrary'], function(LegacyLib) {
console.log(LegacyLib);
// Call functions from the legacy library
});
</script>
ব্যাখ্যা:
exports: 'LegacyLib': যেহেতুlegacyLibrary.jsএকটি non-AMD স্ক্রিপ্ট, এটি একটি গ্লোবাল অবজেক্টLegacyLibতৈরি করবে।exportsপ্যারামিটার দিয়ে আমরা এটিকে RequireJS এর মাধ্যমে এক্সপোর্ট করে নিচ্ছি।require()ফাংশনটি যখন এই স্ক্রিপ্ট লোড করবে, তখনLegacyLibগ্লোবাল ভ্যারিয়েবলটিLegacyLibনামক অবজেক্ট হিসেবে এক্সপোর্ট হবে এবং আপনি সেখান থেকে এর ফাংশনগুলো ব্যবহার করতে পারবেন।
Shim Configuration এর সুবিধা:
- Non-AMD Scripts লোডিং: Shim Configuration আপনাকে Non-AMD স্ক্রিপ্টগুলির সাথে কাজ করার সুযোগ দেয়, যেগুলি AMD মডিউল হিসেবে ডিজাইন করা হয়নি।
- ডিপেনডেন্সি ম্যানেজমেন্ট: এটি ডিপেনডেন্সি ম্যানেজমেন্ট সহজ করে দেয়, বিশেষ করে যখন আপনার কাছে পুরনো স্ক্রিপ্ট থাকে যা নির্দিষ্ট অর্ডারে লোড হওয়া উচিত।
- গ্লোবাল ভ্যারিয়েবল এক্সপোর্ট:
exportsপ্যারামিটারটি ব্যবহার করে আপনি গ্লোবাল স্কোপে যে ভ্যারিয়েবল তৈরি হবে সেটিকে RequireJS এর মাধ্যমে ব্যবহারযোগ্য করে তুলতে পারেন। - এবং আরও: Shim ব্যবহার করলে, আপনি সহজে প্রাচীন লাইব্রেরি বা স্ক্রিপ্টগুলোকে আধুনিক অ্যাসিঙ্ক্রোনাস লোডিং পদ্ধতিতে ব্যবহার করতে পারবেন।
সারসংক্ষেপ:
Shim Configuration হল একটি গুরুত্বপূর্ণ কৌশল যা RequireJS ব্যবহার করে Non-AMD স্ক্রিপ্টগুলির সাথে কাজ করার জন্য ব্যবহৃত হয়। এটি dependencies, exports, এবং init প্যারামিটার ব্যবহার করে মডিউল লোড এবং তাদের নির্ভরতা ম্যানেজ করতে সাহায্য করে। Shim ব্যবহারের মাধ্যমে আপনি পুরনো স্ক্রিপ্ট এবং আধুনিক মডিউল লোডিং সিস্টেমের মধ্যে সামঞ্জস্য সৃষ্টি করতে পারেন।
Read more
