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 یا ناسازگاری رابط‌ها.

Shimming در Webpack چگونه کار می‌کند

Webpack هر ماژول را به‌عنوان واحدی ایزوله با محدوده دید مخصوص خود پردازش می‌کند. اگر کتابخانه به متغیر سراسری jQuery به‌عنوان window.$ دسترسی داشته باشد، باندل‌سازی با خطا پایان می‌یابد، زیرا در بافت ماژولی این متغیر وجود ندارد. ProvidePlugin این مشکل را در مرحله کامپایل حل می‌کند: هنگام شناسایی شناسه $ در کد، افزونه به‌طور خودکار import $ from 'jquery' را در ابتدای فایل اضافه می‌کند.

// کد منبع (ماژول قدیمی به jQuery سراسری دسترسی دارد)
$('.element').hide();

// پس از پردازش توسط ProvidePlugin (Webpack import را اضافه می‌کند)
import $ from 'jquery';
$('.element').hide();

علاوه بر این، imports-loader امکان تعیین صریح وابستگی‌هایی را که ماژول باید دریافت کند فراهم می‌کند. این زمانی مفید است که کتابخانه از this در سطح بالایی استفاده می‌کند و انتظار دارد this به window اشاره کند، نه به module.exports.

ProvidePlugin: متغیرهای سراسری برای ماژول‌ها

ProvidePlugin افزونه داخلی Webpack است که هنگام شناسایی دسترسی به شناسه‌های مشخص، ماژول‌ها را به‌طور خودکار بارگذاری می‌کند. پیکربندی یک شیء است که در آن کلید نام متغیر و مقدار آن مسیر ماژول و فیلد صادرشده است.

پیکربندی افزونه

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

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

ProvidePlugin از ایمپورت نقطه‌ای از طریق سینتکس آرایه پشتیبانی می‌کند. برای مثال، [lodash, debounce] فقط تابع debounce را از lodash وارد می‌کند که اندازه باندل نهایی را کاهش می‌دهد. این امر به‌ویژه برای پروژه‌های موبایل اهمیت دارد، جایی که هر کیلوبایت بر زمان بارگذاری تأثیر می‌گذارد.

imports-loader و exports-loader

imports-loader ایمپورت‌های لازم را به ابتدای ماژول اضافه می‌کند و exports-loader مقادیر صادرشده را برای ماژول‌هایی که به‌طور صریح از module.exports استفاده نمی‌کنند تعیین می‌کند. این loaderها در سطح فایل‌های جداگانه کار می‌کنند، نه در سطح جهانی مانند 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 زمانی استفاده می‌شود که کتابخانه مقداری را به متغیر سراسری اختصاص می‌دهد اما آن را از طریق سیستم ماژول صادر نمی‌کند. loader مقدار را استخراج می‌کند و آن را به خروجی ماژولی تبدیل می‌کند تا سایر ماژول‌ها بتوانند آن را از طریق import وارد کنند.

پیکربندی shimming در تنظیمات Webpack

Shimming در webpack.config.js از طریق ترکیب افزونه‌ها و loaderها پیکربندی می‌شود. سناریوی معمول شامل ProvidePlugin برای متغیرهای سراسری و imports-loader برای ماژول‌های خاصی است که به تغییر محدوده دید نیاز دارند.

پیکربندی پایه Webpack برای shimming

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',
    }),
  ],
};

فیلد globalObject در output، بافت دسترسی به this در سطح بالایی را تعیین می‌کند. برای محیط مرورگر، مقدار 'this' به window اشاره می‌کند و برای React Native یا Node.js به global. انتخاب مقدار صحیح از خطاهای اجرا در محیط هدف جلوگیری می‌کند.

خطاهای رایج در shimming

Shimming ابزاری قدرتمند اما خطرناک است. پیکربندی نادرست منجر به تکرار کد در باندل، تداخل نام‌ها و خطاهای اجرای غیرمنتظره می‌شود. توسعه‌دهندگان اغلب فراموش می‌کنند که ProvidePlugin در مرحله کامپایل کار می‌کند و نمی‌تواند دسترسی‌های پویا به متغیرها را پردازش کند.

تداخل متغیرهای سراسری

اگر دو افزونه از نسخه‌های مختلف jQuery استفاده کنند، ProvidePlugin فقط یکی از آن‌ها را که در پیکربندی اول آمده اضافه می‌کند. کتابخانه دوم نسخه ناسازگار دریافت می‌کند که خطاهایی سخت‌برای‌اشکال‌زدایی ایجاد می‌کند. راه‌حل استفاده از exports-loader برای هر کتابخانه با ذکر صریح نسخه یا اعمال webpack.IgnorePlugin برای حذف ماژول‌های تکراری است.

خطای رایج دیگر تلاش برای shimming ماژول‌هایی است که از فراخوانی‌های همگام CommonJS require در بافت پویا استفاده می‌کنند. ProvidePlugin فقط شناسه‌های ایستا را پردازش می‌کند، بنابراین دسترسی‌های پویا باید به‌صورت دستی جایگزین شوند یا از NormalModuleReplacementPlugin استفاده شود.

مشکلات عملکرد در shimming نادرست

پیکربندی نادرست shimming می‌تواند به افزایش چشمگیر اندازه باندل منجر شود. اگر ProvidePlugin برای ده‌ها متغیر سراسری پیکربندی شود، Webpack ایمپورت‌های مربوطه را به همه فایل‌های پروژه اضافه می‌کند، صرف‌نظر از اینکه این متغیرها در هر فایل خاص استفاده می‌شوند یا نه. این امر کد اضافی ایجاد می‌کند، به‌ویژه در پروژه‌های بزرگ با هزاران ماژول.

برای تشخیص مشکلات shimming از webpack-bundle-analyzer — ابزار تجسم ساختار باندل استفاده کنید. اگر jQuery یا کتابخانه دیگری چند بار در باندل ظاهر شود، احتمالاً نسخه‌های مختلف تداخل دارند یا ProvidePlugin برای چند شناسه که به نسخه‌های مختلف بسته منتهی می‌شوند پیکربندی شده است. راه‌حل یکپارچه‌سازی نسخه‌های وابستگی از طریق resolve.alias و بررسی اینکه همه شناسه‌های shim شده به یک ماژول اشاره می‌کنند است.

جایگزین‌های shimming: بازسازی کد و به‌روزرسانی وابستگی‌ها

پیش از اعمال shimming، امکان به‌روزرسانی کتابخانه به نسخه‌ای که از سیستم ماژول پشتیبانی می‌کند را ارزیابی کنید. بسیاری از بسته‌های قدیمی جایگزین‌های مدرنی دارند که به shimming نیاز ندارند. برای مثال، افزونه‌های jQuery را می‌توان با APIهای بومی مرورگر جایگزین کرد: $.ajax → fetch، $.each → Array.forEach. بازسازی کد مزیت بلندمدت در نگهداری می‌دهد، در حالی که shimming راه‌حلی موقت است که پیکربندی را پیچیده می‌کند.

اگر به‌روزرسانی ممکن نیست، NormalModuleReplacementPlugin را در نظر بگیرید که امکان جایگزینی یک ماژول با ماژول دیگر را در سطح resolution بدون تغییر کد منبع فراهم می‌کند. این افزونه در مرحله ساخت گراف وابستگی‌ها، قبل از اعمال loaderها کار می‌کند و همه دسترسی‌ها به ماژول را بدون توجه به بافت پردازش می‌کند. این راه‌حلی تمیزتر برای جایگزینی کل کتابخانه‌ها نسبت به loaderهای نقطه‌ای است.

Shimming در JavaScript مدرن: ESM و import maps

با توسعه ماژول‌های ES بومی در مرورگرها و ظهور import maps، برخی سناریوهای shimming را می‌توان بدون Webpack حل کرد. import maps به شما امکان می‌دهد نام ماژول‌ها را در سطح مرورگر، بدون مرحله باندل‌سازی، تغییر دهید. اما این رویکرد در React Native و سایر محیط‌های بدون ESM مرورگر پشتیبانی نمی‌شود، بنابراین shimming از طریق Webpack برای باندل‌های production که نیاز به کنترل کامل وابستگی‌ها و نسخه‌های آن‌ها دارند، همچنان مرتبط است. انتخاب بین import maps و shimهای Webpack به پلتفرم هدف و الزامات سازگاری با مرورگرهای قدیمی بستگی دارد.