Shimming: جوہر، طریقے اور کام کا اصول

Shimming کیا ہے؟

Shimming ایک سافٹ ویئر تکنیک ہے جو ماڈیول کے سورس کوڈ کو تبدیل کیے بغیر کوڈ اور ماحول کے درمیان مطابقت کی ایک تہہ شامل کرتی ہے۔ JavaScript بلڈ کے سیاق و سباق میں، shimming اس مسئلے کو حل کرتا ہے جب کوئی ماڈیول گلوبل متغیرات (window.$, global.process) تک رسائی حاصل کرتا ہے جو ماڈیولر ماحول میں موجود نہیں ہوتے۔

Shim اور polyfill: اہم فرق

Polyfill گمشدہ فعالیت کو شروع سے نافذ کرتا ہے، ماحول میں نئی صلاحیتیں شامل کرتا ہے۔ مثال کے طور پر، core-js پرانے براؤزرز کے لیے Array.prototype.flatMap شامل کرتا ہے۔ Shim موجودہ کالز کو دستیاب نفاذات کی طرف ری ڈائریکٹ کرتا ہے یا متوقع گلوبل اشیاء کو تبدیل کرتا ہے۔ Webpack میں، ProvidePlugin خود بخود import $ from 'jquery' ہر اس جگہ داخل کرتا ہے جہاں گلوبل متغیر $ کا حوالہ ملتا ہے، بغیر کوڈ میں تبدیلی کی ضرورت کے۔

بنیادی فرق مقصد میں ہے۔ Polyfill وہ شامل کرتا ہے جو موجود نہیں، جبکہ shim موجودہ کوڈ کو اس ماحول کے مطابق بناتا ہے جس میں وہ چلتا ہے۔ ان کے درمیان انتخاب اس بات پر منحصر ہے کہ کون سا مسئلہ حل کیا جا رہا ہے: API کی عدم موجودگی یا انٹرفیس کی عدم مطابقت۔

Webpack میں Shimming کیسے کام کرتا ہے

Webpack ہر ماڈیول کو اپنے دائرہ کار کے ساتھ ایک الگ تھلگ اکائی کے طور پر پروسیس کرتا ہے۔ اگر کوئی لائبریری گلوبل متغیر jQuery کو window.$ کے طور پر استعمال کرتی ہے، تو بلڈ غلطی کے ساتھ ختم ہو جائے گا، کیونکہ ماڈیولر سیاق و سباق میں یہ متغیر موجود نہیں ہوتا۔ ProvidePlugin کمپائیلیشن مرحلے میں مسئلہ حل کرتا ہے: کوڈ میں شناخت کنندہ $ کا پتہ چلنے پر پلگ ان خود بخود فائل کے شروع میں import $ from 'jquery' داخل کر دیتا ہے۔

// سورس کوڈ (لیگیسی ماڈیول گلوبل jQuery تک رسائی حاصل کرتا ہے)
$('.element').hide();

// ProvidePlugin پروسیسنگ کے بعد (Webpack import داخل کرتا ہے)
import $ from 'jquery';
$('.element').hide();

مزید برآں، imports-loader واضح طور پر یہ بتانے کی اجازت دیتا ہے کہ ماڈیول کو کون سی انحصارات ملنی چاہئیں۔ یہ اس وقت مفید ہے جب لائبریری اعلیٰ سطح پر this استعمال کرتی ہے، یہ توقع کرتے ہوئے کہ this module.exports کے بجائے window کی طرف اشارہ کرتا ہے۔

ProvidePlugin: ماڈیولز کے لیے گلوبل متغیرات

ProvidePlugin Webpack کا بلٹ ان پلگ ان ہے جو مخصوص شناخت کنندگان کے حوالوں کا پتہ چلنے پر خود بخود ماڈیولز لوڈ کرتا ہے۔ کنفیگریشن ایک آبجیکٹ ہے جہاں کلید متغیر کا نام ہے، اور قدر ماڈیول کا راستہ اور برآمد شدہ فیلڈ ہے۔

پلگ ان کی کنفیگریشن

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      _: 'lodash',
      'window.$': 'jquery',
    }),
  ],
};

ProvidePlugin صف (array) نحو کے ذریعے جزوی درآمد کو سپورٹ کرتا ہے۔ مثال کے طور پر، [lodash, debounce] lodash سے صرف debounce فنکشن درآمد کرتا ہے، جس سے حتمی بنڈل کا حجم کم ہوتا ہے۔ یہ موبائل پروجیکٹس کے لیے خاص طور پر اہم ہے، جہاں ہر کلو بائٹ لوڈنگ کے وقت کو متاثر کرتا ہے۔

imports-loader اور exports-loader

imports-loader ضروری درآمدات کو ماڈیول کے شروع میں شامل کرتا ہے، جبکہ exports-loader ان ماڈیولز کے لیے برآمد شدہ قدریں طے کرتا ہے جو واضح طور پر module.exports استعمال نہیں کرتے۔ یہ لوڈرز ProvidePlugin کی طرح عالمی سطح پر نہیں، بلکہ انفرادی فائلوں کی سطح پر کام کرتے ہیں۔

imports-loader کے ذریعے انحصارات کو درست کرنا

// webpack.config.js — imports-loader کی ترتیب
module.exports = {
  module: {
    rules: [
      {
        test: /legacy-module\.js$/,
        use: [
          {
            loader: 'imports-loader',
            options: {
              imports: [
                'jquery',
                '$',
              ],
            },
          },
        ],
      },
    ],
  },
};

exports-loader اس وقت استعمال ہوتا ہے جب کوئی لائبریری گلوبل متغیر کو قدر تفویض کرتی ہے لیکن اسے ماڈیولر نظام کے ذریعے برآمد نہیں کرتی۔ لوڈر قدر نکالتا ہے اور اسے ماڈیول برآمد میں تبدیل کرتا ہے، جس سے دوسرے ماڈیولز اسے import کے ذریعے درآمد کر سکتے ہیں۔

Webpack کنفیگریشن میں shimming کی ترتیب

Shimming کو webpack.config.js میں پلگ انز اور لوڈرز کے امتزاج کے ذریعے ترتیب دیا جاتا ہے۔ عام منظر نامے میں گلوبل متغیرات کے لیے ProvidePlugin اور ان مخصوص ماڈیولز کے لیے imports-loader شامل ہوتا ہے جن میں دائرہ کار کی تبدیلی درکار ہوتی ہے۔

shimming کے لیے Webpack کی بنیادی کنفیگریشن

const webpack = require('webpack');
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    globalObject: 'this',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules\/(?!legacy-lib)/,
        use: [
          {
            loader: 'imports-loader',
            options: {
              type: 'commonjs',
              imports: ['jquery', '$'],
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    }),
  ],
};

output میں globalObject فیلڈ اعلیٰ سطح پر this کے حوالوں کے لیے سیاق و سباق طے کرتا ہے۔ براؤزر ماحول کے لیے، 'this' قدر window کی طرف اشارہ کرتی ہے، جبکہ React Native یا Node.js کے لیے — global کی طرف۔ صحیح قدر کا انتخاب ہدف ماحول میں رن ٹائم غلطیوں کو روکتا ہے۔

shimming کے دوران عام غلطیاں

Shimming ایک طاقتور لیکن خطرناک ذریعہ ہے۔ غلط ترتیب بنڈل میں کوڈ کے دہرانے، ناموں کے تصادم اور غیر متوقع رن ٹائم غلطیوں کا باعث بنتی ہے۔ ڈویلپرز اکثر بھول جاتے ہیں کہ ProvidePlugin کمپائیلیشن مرحلے پر کام کرتا ہے اور متغیرات کے متحرک حوالوں کو پروسیس نہیں کر سکتا۔

گلوبل متغیرات کے تصادم

اگر دو پلگ ان jQuery کے مختلف ورژن استعمال کرتے ہیں، تو ProvidePlugin ان میں سے صرف ایک کو تبدیل کرے گا — وہ جو کنفیگریشن میں پہلے درج ہو۔ دوسری لائبریری کو ایک غیر مطابقت پذیر ورژن ملے گا، جو ڈی بگ کرنا مشکل غلطیاں پیدا کرے گا۔ حل — ہر لائبریری کے لیے واضح ورژن کے ساتھ exports-loader استعمال کرنا یا ڈپلیکیٹ ماڈیولز کو خارج کرنے کے لیے webpack.IgnorePlugin لاگو کرنا ہے۔

ایک اور عام غلطی — ایسے ماڈیولز کو shim کرنے کی کوشش ہے جو متحرک سیاق و سباق میں CommonJS کے ہم آہنگ require کالز استعمال کرتے ہیں۔ ProvidePlugin صرف جامد شناخت کنندگان کو پروسیس کرتا ہے، اس لیے متحرک حوالوں کو دستی طور پر یا NormalModuleReplacementPlugin کے ذریعے تبدیل کرنا ضروری ہے۔

غلط shimming کے ساتھ کارکردگی کے مسائل

shimming کی غلط ترتیب بنڈل کے حجم میں نمایاں اضافے کا باعث بن سکتی ہے۔ اگر ProvidePlugin درجنوں گلوبل متغیرات کے لیے ترتیب دیا گیا ہو، تو Webpack متعلقہ درآمدات کو پروجیکٹ کی تمام فائلوں میں داخل کرے گا، چاہے وہ متغیرات ہر مخصوص فائل میں استعمال ہوں یا نہ ہوں۔ یہ اضافی کوڈ پیدا کرتا ہے، خاص طور پر ہزاروں ماڈیولز والے بڑے پروجیکٹس میں۔

shimming کے مسائل کی تشخیص کے لیے webpack-bundle-analyzer استعمال کریں — بنڈل کی ساخت کو تصور کرنے والا ایک ذریعہ۔ اگر jQuery یا کوئی اور لائبریری بنڈل میں کئی بار ظاہر ہوتی ہے، تو ممکنہ طور پر مختلف ورژن تصادم کر رہے ہیں یا ProvidePlugin پیکیج کے مختلف ورژنز کی طرف لے جانے والے متعدد شناخت کنندگان کے لیے ترتیب دیا گیا ہے۔ حل — resolve.alias کے ذریعے انحصار کے ورژنز کو یکجا کرنا اور اس بات کو یقینی بنانا کہ تمام shim شدہ شناخت کنندگان ایک ہی ماڈیول کی طرف اشارہ کریں۔

shimming کے متبادل: ری فیکٹرنگ اور انحصارات کو اپ ڈیٹ کرنا

shimming لاگو کرنے سے پہلے، لائبریری کو ماڈیولر نظام کو سپورٹ کرنے والے ورژن میں اپ ڈیٹ کرنے کے امکان کا جائزہ لیں۔ بہت سے لیگیسی پیکجز کے جدید متبادل ہیں جنہیں shimming کی ضرورت نہیں ہوتی۔ مثال کے طور پر، jQuery پلگ انز کو براؤزر کی مقامی APIs سے تبدیل کیا جا سکتا ہے: $.ajax → fetch, $.each → Array.forEach۔ ری فیکٹرنگ دیکھ بھال میں طویل مدتی فائدہ دیتی ہے، جبکہ shimming ایک عارضی حل ہے جو کنفیگریشن کو پیچیدہ بناتا ہے۔

اگر اپ ڈیٹ ممکن نہ ہو، تو NormalModuleReplacementPlugin پر غور کریں، جو سورس کوڈ کو تبدیل کیے بغیر حل کی سطح پر ایک ماڈیول کو دوسرے سے بدلنے کی اجازت دیتا ہے۔ یہ پلگ ان لوڈرز کے لاگو ہونے سے پہلے، انحصار گراف کی تعمیر کے مرحلے پر کام کرتا ہے، اور سیاق و سباق سے قطع نظر ماڈیول کے تمام حوالوں کو پروسیس کرتا ہے۔ یہ پوری لائبریریوں کو تبدیل کرنے کے لیے نقطہ نما لوڈرز کے مقابلے میں ایک صاف ستھرا حل ہے۔

جدید JavaScript میں shimming: ESM اور import maps

براؤزرز میں مقامی ES ماڈیولز کی ترقی اور import maps کے ظہور کے ساتھ، کچھ shimming منظرنامے Webpack کے بغیر حل کیے جا سکتے ہیں۔ Import maps بلڈ مرحلے کے بغیر براؤزر کی سطح پر ماڈیول کے ناموں کو متحرک طور پر دوبارہ تفویض کرنے کی اجازت دیتے ہیں۔ تاہم، یہ طریقہ React Native اور براؤزر ESM کے بغیر دیگر ماحول میں تعاون یافتہ نہیں ہے، اس لیے Webpack کے ذریعے shimming ان پروڈکشن بلڈز کے لیے متعلقہ رہتا ہے جن میں انحصار اور ان کے ورژنز پر مکمل کنٹرول درکار ہوتا ہے۔ Import maps اور Webpack shims کے درمیان انتخاب ہدف پلیٹ فارم اور پرانے براؤزرز کے ساتھ مطابقت کی ضروریات پر منحصر ہے۔