Shimming: özü, yaklaşımlar ve çalışma prensibi

Shimming nedir?

Shimming, modülün kaynak kodunu değiştirmeden kod ile ortam arasına bir uyumluluk katmanı yerleştiren bir yazılım tekniğidir. JavaScript build bağlamında shimming, bir modülün modüler ortamda bulunmayan global değişkenlere (window.$, global.process) erişmesi sorununu çözer.

Shim ve polyfill: temel farklar

Polyfill, eksik işlevselliği sıfırdan uygular ve ortama yeni yetenekler ekler. Örneğin, core-js eski tarayıcılar için Array.prototype.flatMap ekler. Shim ise mevcut çağrıları mevcut uygulamalara yönlendirir veya beklenen global nesneleri değiştirir. Webpack'te ProvidePlugin, kodda global değişken $'ye yapılan başvurunun bulunduğu her yere import $ from 'jquery' ekler ve kod değişikliği gerektirmez.

Temel fark amaçtadır. Polyfill var olmayanı ekler, shim ise mevcut kodu çalıştığı ortamla uyumlu hale getirir. Aralarındaki seçim, hangi sorunun çözüleceğine bağlıdır: API eksikliği mi yoksa arayüz uyumsuzluğu mu.

Webpack'te Shimming nasıl çalışır

Webpack, her modülü kendi kapsamına sahip izole bir birim olarak işler. Bir kütüphane global değişken jQuery'ye window.$ olarak erişirse, modüler bağlamda bu değişken bulunmadığından build hata ile sonlanır. ProvidePlugin sorunu derleme aşamasında çözer: kodda $ tanımlayıcısı algılandığında eklenti, dosyanın başına otomatik olarak import $ from 'jquery' ekler.

// Kaynak kod (legacy modül global jQuery'ye erişir)
$('.element').hide();

// ProvidePlugin işlemesinden sonra (Webpack import ekler)
import $ from 'jquery';
$('.element').hide();

Ayrıca imports-loader, bir modülün hangi bağımlılıkları alması gerektiğini açıkça belirtmenizi sağlar. Bu, bir kütüphane en üst seviyede this kullandığında ve this'in module.exports yerine window'a işaret etmesini beklediğinde kullanışlıdır.

ProvidePlugin: modüller için global değişkenler

ProvidePlugin, belirtilen tanımlayıcılara yapılan başvuruları algıladığında modülleri otomatik olarak yükleyen Webpack'in yerleşik eklentisidir. Yapılandırma, anahtarın değişken adı, değerin modüle giden yol ve dışa aktarılan alan olduğu bir nesnedir.

Eklentinin yapılandırması

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

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

ProvidePlugin, dizi sözdizimi aracılığıyla kısmi içe aktarmayı destekler. Örneğin, [lodash, debounce] lodash'tan yalnızca debounce fonksiyonunu içe aktarır ve bu da nihai bundle boyutunu küçültür. Bu, her kilobaytın yükleme süresini etkilediği mobil projeler için özellikle önemlidir.

imports-loader ve exports-loader

imports-loader gerekli içe aktarımları bir modülün başına eklerken, exports-loader module.exports'i açıkça kullanmayan modüller için dışa aktarılan değerleri tanımlar. Bu loader'lar ProvidePlugin gibi global olarak değil, tek tek dosyalar düzeyinde çalışır.

imports-loader ile bağımlılıkları düzeltme

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

exports-loader, bir kütüphane bir global değişkene değer atadığında ancak bunu modüler sistem aracılığıyla dışa aktarmadığında kullanılır. Loader değeri çıkarır ve modül dışa aktarımına dönüştürür; böylece diğer modüller bunu import aracılığıyla içe aktarabilir.

Webpack yapılandırmasında shimming ayarı

Shimming, webpack.config.js içinde eklenti ve loader kombinasyonu aracılığıyla yapılandırılır. Tipik bir senaryo, global değişkenler için ProvidePlugin'i ve kapsam değişikliği gerektiren belirli modüller için imports-loader'ı içerir.

shimming için Webpack temel yapılandırması

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 içindeki globalObject alanı, en üst seviyedeki this başvuruları için bağlamı belirler. Tarayıcı ortamı için 'this' değeri window'a, React Native veya Node.js için ise global'e işaret eder. Doğru değeri seçmek hedef ortamda çalışma zamanı hatalarını önler.

shimming sırasında tipik hatalar

Shimming güçlü ama tehlikeli bir araçtır. Yanlış yapılandırma, bundle içinde kod tekrarına, ad çakışmalarına ve beklenmedik çalışma zamanı hatalarına yol açar. Geliştiriciler genellikle ProvidePlugin'in derleme aşamasında çalıştığını ve değişkenlere yapılan dinamik başvuruları işleyemediğini unutur.

Global değişken çakışmaları

İki eklenti jQuery'nin farklı sürümlerini kullanıyorsa, ProvidePlugin yalnızca yapılandırmada ilk belirtilen sürümü değiştirir. İkinci kütüphane uyumsuz bir sürüm alır ve bu da hata ayıklaması zor hatalara yol açar. Çözüm — her kütüphane için açık sürüm belirterek exports-loader kullanmak veya yinelenen modülleri hariç tutmak için webpack.IgnorePlugin uygulamaktır.

Bir diğer yaygın hata, dinamik bağlamda CommonJS senkron require çağrılarını kullanan modülleri shim'lemeye çalışmaktır. ProvidePlugin yalnızca statik tanımlayıcıları işler, bu nedenle dinamik başvurular manuel olarak veya NormalModuleReplacementPlugin ile değiştirilmelidir.

Yanlış shimming ile performans sorunları

Yanlış shimming yapılandırması bundle boyutunun önemli ölçüde artmasına yol açabilir. ProvidePlugin onlarca global değişken için yapılandırılmışsa, Webpack ilgili içe aktarımları, bu değişkenlerin her belirli dosyada kullanılıp kullanılmadığına bakılmaksızın projedeki tüm dosyalara ekler. Bu, özellikle binlerce modüllü büyük projelerde gereksiz kod oluşturur.

shimming sorunlarını teşhis etmek için webpack-bundle-analyzer kullanın — bundle bileşimini görselleştiren bir araç. jQuery veya başka bir kütüphane bundle içinde birden fazla kez görünüyorsa, muhtemelen farklı sürümler çakışıyor veya ProvidePlugin paketin farklı sürümlerine giden birden çok tanımlayıcı için yapılandırılmıştır. Çözüm — resolve.alias ile bağımlılık sürümlerini birleştirmek ve tüm shim'lenmiş tanımlayıcıların aynı modülü işaret ettiğini doğrulamaktır.

shimming alternatifleri: yeniden düzenleme ve bağımlılık güncellemesi

shimming uygulamadan önce kütüphanenin modüler sistemi destekleyen bir sürüme güncellenme olasılığını değerlendirin. Birçok legacy paketin shimming gerektirmeyen modern alternatifleri vardır. Örneğin, jQuery eklentileri tarayıcının yerel API'leriyle değiştirilebilir: $.ajax → fetch, $.each → Array.forEach. Yeniden düzenleme bakımda uzun vadeli kazanç sağlar, shimming ise yapılandırmayı karmaşıklaştıran geçici bir çözümdür.

Güncelleme mümkün değilse, kaynak kodu değiştirmeden bir modülü çözümleme düzeyinde başka bir modülle değiştirmeyi sağlayan NormalModuleReplacementPlugin'i değerlendirin. Bu eklenti loader'lar uygulanmadan önce, bağımlılık grafiği oluşturma aşamasında çalışır ve bağlamdan bağımsız olarak modüle yapılan tüm başvuruları işler. Tüm kütüphaneleri değiştirmek için noktasal loader'lardan daha temiz bir çözümdür.

Modern JavaScript'te shimming: ESM ve import maps

Tarayıcılarda yerel ES modüllerinin gelişimi ve import maps'in ortaya çıkışıyla bazı shimming senaryoları Webpack olmadan çözülebilir. Import maps, build aşaması olmadan modül adlarını tarayıcı düzeyinde anında yeniden eşlemenizi sağlar. Ancak bu yaklaşım React Native ve tarayıcı ESM'si olmayan diğer ortamlarda desteklenmez, bu nedenle Webpack aracılığıyla shimming, bağımlılıklar ve sürümleri üzerinde tam kontrol gerektiren üretim build'leri için geçerli olmaya devam eder. Import maps ile Webpack shim'leri arasındaki seçim, hedef platforma ve eski tarayıcılarla uyumluluk gereksinimlerine bağlıdır.