ES modülleri nedir?

ES modülleri, JavaScript'te kodu düzenlemenin standart yoludur ve import ve export sözdizimine dayanır.

Ana özellikler:

• Standart: ECMAScript spesifikasyonunun bir parçasıdır, modern tarayıcılar ve Node.js gibi çalışma ortamları tarafından desteklenir.
• Açık bağımlılık yönetimi: Modüller, hangi değerleri dışa aktardıklarını ve diğer modüllerden hangi değerleri içe aktardıklarını açıkça belirtir.
• Statik yapı: Modüllerin bağımlılıkları, derleme aşamasında (veya ayrıştırma sırasında) belirlenir, çalışma zamanında değil. Bu, Webpack, Rollup gibi araçların kodu optimize etmesine olanak tanır.
• İzolasyon: Bir modül içinde tanımlanan her değişken, fonksiyon veya sınıf varsayılan olarak bu modüle özeldir. Dışarıdan erişilebilir olmaları için açıkça dışa aktarılmaları gerekir.
• Asenkron desteği: Modüller, tarayıcılarda asenkron olarak yüklenebilir, sayfa yüklemesini engellemeden.

Sözdizimi:

• Dışa aktarım:

  // app.js
  export const myVariable = 123; // İsimlendirilmiş dışa aktarım
  export function myFunction() { // İsimlendirilmiş dışa aktarım
    console.log('Modülden merhaba!');
  }
  export default class MyClass { // Varsayılan dışa aktarım
    constructor() {
      console.log('MyClass örneği oluşturuldu');
    }
  }
  

• İçe aktarma:

  // main.js
  import { myVariable, myFunction } from './app.js'; // İsimlendirilmiş içe aktarma
  import MyDefaultClass from './app.js'; // Varsayılan içe aktarma
  
  console.log(myVariable); // 123
  myFunction(); // Modülden merhaba!
  const instance = new MyDefaultClass(); // MyClass örneği oluşturuldu
  

CommonJS (Node.js) ile karşılaştırma:

Özellik	ES modülleri	CommonJS
Sözdizimi	import, export	require, module.exports, exports
Bağımlılıklar	Statik (çalışmadan önce belirlenir)	Dinamik (çalışma sırasında belirlenir)
Yükleme	Asenkron (tarayıcıda)	Senkron
this kökünde	undefined	module.exports
Destek	Tarayıcılar, Node.js (varsayılan olarak 13.2 ve sonrası)	Çoğunlukla Node.js

ES modüllerinin kullanımı, standartlaştırmaları, araçlar tarafından daha iyi desteklenmeleri ve statik analiz imkanları nedeniyle modern frontend geliştirme için önerilen yaklaşımdır.