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' на почетак датотеке.

// Изворни код (legacy модул приступа глобалном 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. Ови лоадери раде на нивоу појединачних датотека, а не глобално попут 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.

Подешавање shimming-а у конфигурацији Webpack-а

Shimming се конфигурише у webpack.config.js кроз комбинацију додатака и лоадера. Типичан сценарио укључује 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 и провера да ли сви shimm-овани идентификатори указују на исти модул.

Алтернативе shimming-у: рефакторизација и ажурирање зависности

Пре него што примените shimming, процените могућност ажурирања библиотеке на верзију која подржава модуларни систем. Многи legacy пакети имају савремене алтернативе које не захтевају шимовање. На пример, jQuery додатке можете заменити изворним прегледачким API-јима: $.ajax → fetch, $.each → Array.forEach. Рефакторизација доноси дугорочну добит у одржавању, док је shimming привремено решење које компликује конфигурацију.

Ако ажурирање није могуће, размотрите NormalModuleReplacementPlugin, који омогућава замену једног модула другим на нивоу резолвинга, без измене изворног кода. Овај додатак ради у фази изградње графа зависности, пре примене лоадера, и обрађује све приступе модулу без обзира на контекст. Ово је чистије решење за замену целих библиотека него циљани лоадери.

Shimming у савременом JavaScript-у: ESM и import maps

Са развојем изворних ES модула у прегледачима и појавом import maps-а, неки сценарији shimming-а могу се решити без Webpack-а. Import maps омогућавају преименовање имена модула у ходу, на нивоу прегледача, без фазе билда. Међутим, овај приступ није подржан у React Native-у и другим окружењима без прегледачког ESM-а, па shimming кроз Webpack остаје актуелан за production билдове где је потребна потпуна контрола над зависностима и њиховим верзијама. Избор између import maps-а и Webpack шимова зависи од циљне платформе и захтева за компатибилношћу са старијим прегледачима.