Non-AMD স্ক্রিপ্ট ব্যবস্থাপনা এবং লোড করা

RequireJS মূলত AMD (Asynchronous Module Definition) মডিউল সিস্টেমের উপর ভিত্তি করে কাজ করে, তবে এটি Non-AMD স্ক্রিপ্ট বা সিস্টেমের সাথে কাজ করার জন্যও কিছু ফিচার প্রদান করে। অনেক সময় আপনার প্রকল্পে এমন স্ক্রিপ্ট থাকতে পারে যা AMD কম্প্যাটিবল নয়, অর্থাৎ তা define() বা require() ফাংশন ব্যবহার না করে কাজ করে। RequireJS এই ধরনের স্ক্রিপ্ট লোড করার জন্য shim কনফিগারেশন ব্যবহার করে, যা Non-AMD স্ক্রিপ্টের জন্য এক ধরনের ব্রিজ হিসেবে কাজ করে।

Non-AMD স্ক্রিপ্ট ব্যবস্থাপনা এবং লোড করার জন্য RequireJS এর shim কনফিগারেশন

Non-AMD স্ক্রিপ্ট সাধারণত জাভাস্ক্রিপ্ট ফাইল যা কোনও মডিউল সিস্টেম ব্যবহার করে না, যেমন jQuery, Backbone.js, Underscore.js ইত্যাদি। এই ধরনের স্ক্রিপ্টগুলি সাধারণত global অবজেক্টে ডিফাইন করা থাকে এবং তাদের মধ্যে ডিপেনডেন্সি ম্যানেজমেন্ট করতে আপনাকে অতিরিক্ত কনফিগারেশন করতে হয়।

RequireJS এর shim কনফিগারেশন ব্যবহার করে আপনি এই ধরনের স্ক্রিপ্টগুলির ডিপেনডেন্সি এবং এক্সপোর্ট সঠিকভাবে ম্যানেজ করতে পারেন।

1. Shim কনফিগারেশন কী?

shim কনফিগারেশন ব্যবহার করে আপনি Non-AMD স্ক্রিপ্টগুলির জন্য:

• তাদের ডিপেনডেন্সি নির্ধারণ করতে পারেন
• তাদের exports প্রদান করতে পারেন (যেটি তাদের global object এ কি এক্সপোর্ট করা হবে তা নির্দেশ করে)

2. Non-AMD স্ক্রিপ্টের জন্য shim কনফিগারেশন সেটআপ

উদাহরণ ১: jQuery এবং Backbone.js লোড করা

ধরা যাক, আপনার প্রজেক্টে jQuery এবং Backbone.js লাইব্রেরি রয়েছে, কিন্তু এই স্ক্রিপ্টগুলো AMD মডিউল নয়। আপনি RequireJS এর মাধ্যমে এগুলো লোড করতে চাইলে, shim কনফিগারেশন ব্যবহার করতে হবে।

require.config({
  paths: {
    'jquery': 'https://code.jquery.com/jquery-3.6.0.min',
    'backbone': 'libs/backbone.min'
  },
  shim: {
    'backbone': {
      deps: ['jquery'],   // Backbone.js jQuery এর উপর নির্ভরশীল
      exports: 'Backbone' // Backbone এর global এক্সপোর্ট নাম
    }
  }
});

require(['backbone'], function(Backbone) {
  console.log('Backbone Loaded');
});

ব্যাখ্যা:

• paths: এখানে আপনি jquery এবং backbone এর পাথ কনফিগার করেছেন। Backbone.js এবং jQuery CDN এর মাধ্যমে লোড হচ্ছে।
• shim: Backbone.js এর জন্য shim কনফিগারেশন ব্যবহার করা হয়েছে।
  • deps: Backbone মডিউলটি jQuery এর উপর নির্ভরশীল, তাই jQuery প্রথমে লোড হবে।
  • exports: Backbone.js এর গ্লোবাল এক্সপোর্ট Backbone নামক হবে। এইভাবে RequireJS জানবে যে Backbone মডিউলটি কী রিটার্ন করবে।

উদাহরণ ২: jQuery UI লোড করা

ধরা যাক, আপনি jQuery UI লোড করতে চান, যা jQuery এর উপর নির্ভরশীল।

require.config({
  paths: {
    'jquery': 'https://code.jquery.com/jquery-3.6.0.min',
    'jquery-ui': 'https://code.jquery.com/ui/1.12.1/jquery-ui.min'
  },
  shim: {
    'jquery-ui': {
      deps: ['jquery'],  // jQuery UI jQuery এর উপর নির্ভরশীল
      exports: '$.ui'     // jQuery UI এর global এক্সপোর্ট নাম
    }
  }
});

require(['jquery-ui'], function($) {
  console.log('jQuery UI Loaded');
});

এখানে:

• deps: jquery-ui মডিউলটি jquery মডিউলের উপর নির্ভরশীল।
• exports: $.ui গ্লোবাল এক্সপোর্ট যা jQuery UI লাইব্রেরি সরবরাহ করবে।

3. shim কনফিগারেশন এর প্রয়োজনীয়তা

যখন আপনি Non-AMD স্ক্রিপ্ট ব্যবহার করেন, তাদের মধ্যে সাধারণত global এক্সপোর্ট থাকে এবং তারা ডিপেনডেন্সি ম্যানেজমেন্টের জন্য define() বা require() ফাংশন ব্যবহার করে না। এর ফলে, আপনি যদি এই স্ক্রিপ্টগুলিকে AMD ফরম্যাটে লোড করতে চান, তবে shim কনফিগারেশন ব্যবহার করে তাদের ডিপেনডেন্সি এবং এক্সপোর্ট ম্যানেজ করতে হয়।

4. shim এর মাধ্যমে বিভিন্ন ধরনের স্ক্রিপ্ট লোড করা

আপনি shim ব্যবহার করে যেকোনো Non-AMD স্ক্রিপ্ট মডিউল লোড করতে পারেন, যেমন:

• External libraries: যেমন jQuery, Bootstrap, AngularJS, React (যদিও React এখন AMD সমর্থন করে) ইত্যাদি।
• Custom libraries: যদি আপনি নিজে কোনো স্ক্রিপ্ট তৈরি করে থাকেন এবং সেটি AMD ফরম্যাটে না থাকে, তবে আপনি সেটি shim এর মাধ্যমে লোড করতে পারেন।

5. shim কনফিগারেশন এর পূর্ণ উদাহরণ

require.config({
  paths: {
    'jquery': 'https://code.jquery.com/jquery-3.6.0.min',
    'underscore': 'libs/underscore.min',
    'backbone': 'libs/backbone.min'
  },
  shim: {
    'underscore': {
      exports: '_'  // Underscore.js এর global এক্সপোর্ট
    },
    'backbone': {
      deps: ['jquery', 'underscore'], // Backbone এর জন্য jQuery এবং Underscore নির্ভরশীল
      exports: 'Backbone'  // Backbone.js এর global এক্সপোর্ট
    }
  }
});

require(['backbone'], function(Backbone) {
  console.log('Backbone Loaded');
});

এখানে:

• underscore এবং backbone মডিউলগুলির জন্য shim কনফিগারেশন দেওয়া হয়েছে।
• exports এর মাধ্যমে আমরা জানাচ্ছি যে এই মডিউলগুলির গ্লোবাল এক্সপোর্ট কী হবে (_ এবং Backbone)।

সারসংক্ষেপ:

RequireJS Non-AMD স্ক্রিপ্ট লোড এবং ম্যানেজ করতে shim কনফিগারেশন ব্যবহার করে। এটি স্ক্রিপ্টগুলির ডিপেনডেন্সি এবং এক্সপোর্ট সঠিকভাবে ম্যানেজ করে, যাতে আপনি সেগুলোকে AMD স্টাইলে লোড এবং ব্যবহার করতে পারেন। shim কনফিগারেশন নিশ্চিত করে যে প্রতিটি মডিউল তার নির্ভরশীলতা ঠিকমতো লোড হয়ে পরে সঠিকভাবে কাজ করবে।