Shimming: mahiyyəti, yanaşmaları və iş prinsipi

Shimming nədir?

Shimming — modulun mənbə kodunu dəyişmədən kodla mühit arasında uyğunluq qatı yerləşdirən proqram texnikasıdır. JavaScript yığımı kontekstində shimming modul mühitində olmayan qlobal dəyişənlərə (window.$, global.process) müraciət edən modul problemi həll edir.

Shim və polyfill: əsas fərqlər

Polyfill çatışmayan funksionallığı sıfırdan reallaşdırır və mühitə yeni imkanlar əlavə edir. Məsələn, core-js köhnə brauzerlər üçün Array.prototype.flatMap əlavə edir. Shim isə mövcud çağırışları mövcud reallaşdırmalara istiqamətləndirir və ya gözlənilən qlobal obyektləri əvəz edir. Webpack-də ProvidePlugin qlobal $ dəyişəninə müraciət olan hər yerdə avtomatik import $ from 'jquery' əlavə edir və kodda dəyişiklik tələb etmir.

Əsas fərq məqsəddədir. Polyfill olmayanı əlavə edir, shim isə mövcud kodu işlədiyi mühitlə uyğunlaşdırır. Onların arasında seçim hansı problemin həll olunduğundan asılıdır: API-nin olmaması və ya interfeyslərin uyğunsuzluğu.

Shimming Webpack-də necə işləyir

Webpack hər modulu öz görünmə sahəsi olan izolyasiya edilmiş vahid kimi emal edir. Kitabxana qlobal jQuery dəyişəninə window.$ kimi müraciət edərsə, modul kontekstində bu dəyişən olmadığı üçün yığım xəta ilə başa çatacaq. ProvidePlugin problemi kompilyasiya mərhələsində həll edir: kodda $ identifikatoru aşkar edildikdə plagin faylın əvvəlinə avtomatik import $ from 'jquery' əlavə edir.

// Mənbə kodu (legacy modul qlobal jQuery-yə müraciət edir)
$('.element').hide();

// ProvidePlugin tərəfindən işləndikdən sonra (Webpack import əlavə edir)
import $ from 'jquery';
$('.element').hide();

Əlavə olaraq imports-loader modulun hansı asılılıqları almalı olduğunu açıq şəkildə göstərməyə imkan verir. Bu, kitabxana this-in module.exports-ə deyil, window-a aid olduğunu gözləyərək this-i ən yuxarı səviyyədə istifadə etdikdə faydalıdır.

ProvidePlugin: modullar üçün qlobal dəyişənlər

ProvidePlugin — müəyyən identifikatorlara müraciət aşkar edildikdə modulları avtomatik yükləyən Webpack-in daxili plaginidir. Konfiqurasiya obyektdir: açar dəyişənin adı, qiymət isə modula yol və ixrac olunan sahədir.

Plaginin konfiqurasiyası

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

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

ProvidePlugin massiv sintaksisi vasitəsilə nöqtəli idxalı dəstəkləyir. Məsələn, [lodash, debounce] lodash-dan yalnız debounce funksiyasını idxal edir və bu, son paketin ölçüsünü azaldır. Bu, hər kilobaytın yüklənmə vaxtına təsir etdiyi mobil layihələr üçün xüsusilə vacibdir.

imports-loader və exports-loader

imports-loader modulun əvvəlinə lazımi importları əlavə edir, exports-loader isə module.exports-i açıq istifadə etməyən modullar üçün ixrac edilən qiymətləri müəyyən edir. Bu loader-lər ProvidePlugin kimi qlobal deyil, ayrı-ayrı fayllar səviyyəsində işləyir.

imports-loader vasitəsilə asılılıqların düzəldilməsi

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

exports-loader kitabxana qiyməti qlobal dəyişənə təyin etdikdə, lakin onu modul sistemi vasitəsilə ixrac etmədikdə istifadə olunur. Loader qiyməti çıxarır və onu modul ixracına çevirir ki, digər modullar onu import vasitəsilə idxal edə bilsin.

Webpack konfiqurasiyasında shimming-in qurulması

Shimming webpack.config.js-də plaginlər və loader-lərin kombinasiyası ilə konfiqurasiya olunur. Tipik ssenari qlobal dəyişənlər üçün ProvidePlugin və görünmə sahəsinin dəyişdirilməsini tələb edən konkret modullar üçün imports-loader-i əhatə edir.

Shimming üçün Webpack-in əsas konfiqurasiyası

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 sahəsi output-da ən yuxarı səviyyədə this-ə müraciətlər üçün kontekst müəyyən edir. Brauzer mühiti üçün 'this' qiyməti window-a, React Native və ya Node.js üçün isə global-a istinad edir. Düzgün qiymətin seçilməsi hədəf mühitdə icra xətalarının qarşısını alır.

Shimming zamanı tipik səhvlər

Shimming güclü, lakin təhlükəli alətdir. Səhv konfiqurasiya paketdə kodun təkrarlanmasına, ad konfliktlərinə və gözlənilməz icra xətalarına gətirib çıxarır. Tərtibatçılar çox vaxt unudurlar ki, ProvidePlugin kompilyasiya mərhələsində işləyir və dəyişənlərə dinamik müraciətləri emal edə bilmir.

Qlobal dəyişən konfliktləri

İki plagin müxtəlif versiyalı jQuery istifadə edirsə, ProvidePlugin yalnız konfiqurasiyada birinci göstərilənini əlavə edəcək. İkinci kitabxana uyğunsuz versiya alacaq və bu, çətin tapılan xətalara səbəb olacaq. Həll yolu — hər kitabxana üçün exports-loader-i versiyanı açıq göstərməklə istifadə etmək və ya təkrarlanan modulları istisna etmək üçün webpack.IgnorePlugin tətbiq etməkdir.

Digər geniş yayılmış səhv — dinamik kontekstdə CommonJS sinxron require çağırışlarından istifadə edən modulları shimming etmək cəhdidir. ProvidePlugin yalnız statik identifikatorları emal edir, buna görə də dinamik müraciətlər əl ilə əvəz edilməli və ya NormalModuleReplacementPlugin istifadə olunmalıdır.

Səhv shimming zamanı performans problemləri

Shimming-in səhv konfiqurasiyası paketin ölçüsünün əhəmiyyətli dərəcədə artmasına səbəb ola bilər. ProvidePlugin onlarla qlobal dəyişənə konfiqurasiya olunarsa, Webpack bu dəyişənlərin konkret faylda istifadə olunub-olmamasından asılı olmayaraq bütün layihə fayllarına müvafiq importları əlavə edəcək. Bu, xüsusilə minlərlə modulu olan böyük layihələrdə lazımsız kod yaradır.

Shimming problemlərini diaqnoz etmək üçün webpack-bundle-analyzer — paketin tərkibini vizuallaşdıran alətdən istifadə edin. jQuery və ya digər kitabxana paketdə bir neçə dəfə görünürsə, çox güman ki, müxtəlif versiyalar konflikt edir və ya ProvidePlugin paketin müxtəlif versiyalarına aparan bir neçə identifikatora konfiqurasiya olunub. Həll yolu — resolve.alias vasitəsilə asılılıq versiyalarını birləşdirmək və bütün shimm edilmiş identifikatorların eyni modulu göstərdiyini yoxlamaqdır.

Shimming-in alternativləri: refaktoring və asılılıqların yenilənməsi

Shimming tətbiq etməzdən əvvəl kitabxananı modul sistemini dəstəkləyən versiyaya yeniləmək imkanını qiymətləndirin. Bir çox legacy paketlərin shimming tələb etməyən müasir alternativləri var. Məsələn, jQuery plaginlərini brauzerin yerli API-ləri ilə əvəz etmək olar: $.ajax → fetch, $.each → Array.forEach. Refaktoring uzunmüddətli saxlanma qazancı verir, shimming isə konfiqurasiyanı çətinləşdirən müvəqqəti həll yolu sayılır.

Yeniləmə mümkün deyilsə, mənbə kodunu dəyişmədən bir modulu digəri ilə rezolyusiya səviyyəsində əvəz etməyə imkan verən NormalModuleReplacementPlugin-i nəzərdən keçirin. Bu plagin loader-lər tətbiq olunmazdan əvvəl asılılıq qrafikinin qurulması mərhələsində işləyir və modula bütün müraciətləri kontekstdən asılı olmayaraq emal edir. Bu, bütöv kitabxanaları əvəz etmək üçün nöqtəli loader-lərdən daha təmiz həll yoludur.

Müasir JavaScript-də Shimming: ESM və import maps

Brauzerlərdə yerli ES modullarının inkişafı və import maps-in yaranması ilə bəzi shimming ssenariləri Webpack olmadan həll oluna bilər. Import maps modul adlarını yığım mərhələsi olmadan brauzer səviyyəsində dərhal yenidən təyin etməyə imkan verir. Lakin bu yanaşma React Native və brauzer ESM-i olmayan digər mühitlərdə dəstəklənmir, buna görə də Webpack vasitəsilə shimming asılılıqlara və onların versiyalarına tam nəzarət tələb olunan production yığımları üçün aktual qalır. Import maps ilə Webpack shim-ləri arasında seçim hədəf platformadan və köhnə brauzerlərlə uyğunluq tələblərindən asılıdır.