Non-AMD লাইব্রেরি যেমন jQuery, Bootstrap ইন্টিগ্রেশন

RequireJS সাধারণত AMD (Asynchronous Module Definition) মডিউল লোডিং সিস্টেমে কাজ করে, তবে অনেক পুরনো বা Non-AMD লাইব্রেরি, যেমন jQuery, Bootstrap, ইত্যাদি, AMD এর মতো মডিউল সিস্টেম অনুসরণ করে না। এমন পরিস্থিতিতে, RequireJS-এ এই ধরনের লাইব্রেরি ইন্টিগ্রেট করতে কিছু অতিরিক্ত কৌশল ব্যবহার করতে হয়।

নিচে Non-AMD লাইব্রেরি যেমন jQuery, Bootstrap ইত্যাদির RequireJS-এ ইন্টিগ্রেশন এর জন্য কৌশল এবং উদাহরণ দেওয়া হলো।

1. jQuery এবং Bootstrap এর RequireJS-এ ইন্টিগ্রেশন

jQuery ইন্টিগ্রেশন:

যেহেতু jQuery একটি Non-AMD লাইব্রেরি, এটি সাধারণত RequireJS এর মধ্যে direct script tag দিয়ে লোড করা হয়। কিন্তু, আপনি RequireJS এর shim কনফিগারেশন ব্যবহার করে jQuery মডিউলকে AMD মডিউল হিসেবে লোড করতে পারবেন।

jQuery এর জন্য shim কনফিগারেশন ব্যবহার:

require.config({
  paths: {
    'jquery': 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min'  // jQuery এর পাথ
  },
  shim: {
    'jquery': {
      exports: '$'  // jQuery global export করে $ নামে
    }
  }
});

require(['jquery'], function($) {
  // jQuery এখনো লোড হয়ে গেছে
  $(document).ready(function() {
    console.log("jQuery is loaded!");
  });
});

• shim কনফিগারেশন: এটি Non-AMD লাইব্রেরি (যেমন jQuery) কে AMD-এ রূপান্তর করতে সাহায্য করে।
• exports: '$': এটি নির্দেশ করে যে jQuery $ নামে একটি গ্লোবাল এক্সপোর্ট করবে, যা অন্য মডিউলগুলির জন্য অ্যাক্সেসযোগ্য হবে।

Bootstrap ইন্টিগ্রেশন:

Bootstrap নিজে Non-AMD লাইব্রেরি হলেও, আপনি jQuery এর সাথে এটি একত্রে ব্যবহার করতে পারেন। Bootstrap সাধারণত jQuery-এর উপর নির্ভরশীল, তাই RequireJS-এ Bootstrap কে ইন্টিগ্রেট করতে jQuery আগে লোড করতে হবে।

Bootstrap এর জন্য shim কনফিগারেশন ব্যবহার:

require.config({
  paths: {
    'jquery': 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min',
    'bootstrap': 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min'
  },
  shim: {
    'bootstrap': {
      deps: ['jquery'],  // Bootstrap এর জন্য jQuery ডিপেনডেন্সি
      exports: 'bootstrap'  // Bootstrap গ্লোবালি এক্সপোর্ট হবে
    },
    'jquery': {
      exports: '$'  // jQuery গ্লোবালি $ হিসেবে এক্সপোর্ট হবে
    }
  }
});

require(['jquery', 'bootstrap'], function($, bootstrap) {
  // jQuery এবং Bootstrap এখনো লোড হয়ে গেছে
  console.log("jQuery and Bootstrap are loaded!");
});

• deps: ['jquery']: এটি নিশ্চিত করে যে Bootstrap মডিউলটি লোড হওয়ার আগে jQuery প্রথমে লোড হবে।
• exports: 'bootstrap': এটি নির্দেশ করে যে Bootstrap গ্লোবাল এক্সপোর্ট হিসেবে কাজ করবে।

2. Non-AMD লাইব্রেরি ইন্টিগ্রেশন (General Approach)

এমন লাইব্রেরি যা Non-AMD ফর্ম্যাটে আসে, সেগুলো shim কনফিগারেশন ব্যবহার করে AMD মডিউলে রূপান্তর করা যায়। shim কনফিগারেশন দিয়ে আপনি নির্দিষ্ট লাইব্রেরির ডিপেনডেন্সি, এক্সপোর্টস এবং অন্যান্য বৈশিষ্ট্য কনফিগার করতে পারেন।

General shim Configuration Example:

require.config({
  paths: {
    'someNonAMDLibrary': 'path/to/someNonAMDLibrary'
  },
  shim: {
    'someNonAMDLibrary': {
      deps: ['dependency1', 'dependency2'],  // Dependencies
      exports: 'SomeGlobalObject'  // Global object exported by the library
    }
  }
});

require(['someNonAMDLibrary'], function(SomeGlobalObject) {
  console.log('Library is now available:', SomeGlobalObject);
});

• deps: আপনি এখানে লাইব্রেরির জন্য যেসব ডিপেনডেন্সি প্রয়োজন তা উল্লেখ করতে পারেন।
• exports: লাইব্রেরি যদি একটি গ্লোবাল অবজেক্ট এক্সপোর্ট করে, তবে আপনি এটি উল্লেখ করতে পারেন, যাতে তা RequireJS এর মধ্যে অ্যাক্সেসযোগ্য হয়।

3. shim কনফিগারেশন এর সাধারণ প্রয়োগ

যখন আপনি কোনো Non-AMD লাইব্রেরি (যেমন jQuery, Bootstrap, অথবা অন্য যেকোনো থার্ড-পার্টি স্ক্রিপ্ট) লোড করতে চান, তখন আপনি নিচের মতো কনফিগারেশন ব্যবহার করতে পারেন:

require.config({
  paths: {
    'jquery': 'https://code.jquery.com/jquery-3.6.0.min',
    'underscore': 'https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min',
    'bootstrap': 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min'
  },
  shim: {
    'underscore': {
      exports: '_' // Exports the underscore library to the global `_` object
    },
    'bootstrap': {
      deps: ['jquery'], // Ensure jQuery is loaded before Bootstrap
      exports: 'Bootstrap' // Bootstrap global export
    }
  }
});

require(['jquery', 'underscore', 'bootstrap'], function($, _, Bootstrap) {
  console.log('All libraries are loaded!');
});

4. Non-AMD স্ক্রিপ্ট লোড করার পদ্ধতি

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

সারসংক্ষেপ:

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