M

MLOG

Türkçe

JavaScript'teki iki baskın modül sistemi olan CommonJS ve ES Modüllerinin farklarını, pratik örnekler ve modern web geliştirme içgörüleriyle keşfedin.

Modül Sistemleri: CommonJS vs. ES Modülleri - Kapsamlı Bir Rehber

JavaScript geliştirmenin sürekli gelişen dünyasında modülerlik, ölçeklenebilir ve sürdürülebilir uygulamalar oluşturmanın temel taşıdır. Tarihsel olarak iki modül sistemi bu alanı domine etmiştir: CommonJS ve ES Modülleri (ESM). Farklılıklarını, avantajlarını ve dezavantajlarını anlamak, ister React, Vue veya Angular gibi ön yüz çerçeveleriyle ister Node.js ile arka yüzle çalışıyor olun, herhangi bir JavaScript geliştiricisi için çok önemlidir. Modülleri yapı taşları gibi düşünün; her bir bloğun belirli bir amacı vardır ve daha büyük, daha karmaşık yapılar oluşturmak için onları birleştirebilirsiniz.

Modül Sistemleri Nedir?

Bir modül sistemi, kodu modül adı verilen yeniden kullanılabilir birimler halinde organize etmenin bir yolunu sağlar. Her modül belirli bir işlevselliği kapsüller ve yalnızca diğer modüllerin kullanması gereken kısımları açığa çıkarır. Bu yaklaşım kodun yeniden kullanılmasını teşvik eder, karmaşıklığı azaltır ve sürdürülebilirliği artırır. Düşünün ki modüller yapı taşları gibidir; her bloğun belirli bir amacı vardır ve daha büyük, daha karmaşık yapılar oluşturmak için onları birleştirebilirsiniz.

Modül Sistemleri Kullanmanın Faydaları:

CommonJS: Node.js Standardı

CommonJS, sunucu tarafı geliştirme için popüler JavaScript çalışma ortamı olan Node.js için standart modül sistemi olarak ortaya çıktı. JavaScript'te yerleşik bir modül sisteminin eksikliğini gidermek için tasarlandı. Node.js, kodunu organize etme şekli olarak CommonJS'yi benimsedi. Bu seçim, sunucu tarafında JavaScript uygulamalarının nasıl oluşturulduğu üzerinde derin bir etki yarattı.

CommonJS'nin Temel Özellikleri:

CommonJS Sözdizimi:

CommonJS'nin nasıl kullanıldığına dair bir örnek:

Modül (math.js):

// math.js
function add(a, b) {
 return a + b;
}

function subtract(a, b) {
 return a - b;
}

module.exports = {
 add: add,
 subtract: subtract
};

Kullanım (app.js):

// app.js
const math = require('./math');

console.log(math.add(5, 3)); // Çıktı: 8
console.log(math.subtract(10, 4)); // Çıktı: 6

CommonJS'nin Avantajları:

CommonJS'nin Dezavantajları:

ES Modülleri (ESM): Standartlaştırılmış JavaScript Modül Sistemi

ES Modülleri (ESM), ECMAScript 2015 (ES6) ile tanıtılan resmi standartlaştırılmış JavaScript modül sistemidir. Hem Node.js hem de tarayıcıda kodu organize etmek için tutarlı ve verimli bir yol sağlamayı amaçlarlar. ESM, JavaScript dilinin kendisine yerleşik modül desteği getirir ve modülerlik için harici kütüphanelere veya derleme araçlarına olan ihtiyacı ortadan kaldırır.

ES Modüllerinin Temel Özellikleri:

ES Modülleri Sözdizimi:

ES Modüllerinin nasıl kullanıldığına dair bir örnek:

Modül (math.js):

// math.js
export function add(a, b) {
 return a + b;
}

export function subtract(a, b) {
 return a - b;
}

// Veya alternatif olarak:
// function add(a, b) {
//  return a + b;
// }
// function subtract(a, b) {
//  return a - b;
// }
// export { add, subtract };

Kullanım (app.js):

// app.js
import { add, subtract } from './math.js';

console.log(add(5, 3)); // Çıktı: 8
console.log(subtract(10, 4)); // Çıktı: 6

Adlandırılmış Dışa Aktarımlar ve Varsayılan Dışa Aktarımlar:

ES Modülleri hem adlandırılmış hem de varsayılan dışa aktarımları destekler. Adlandırılmış dışa aktarımlar, birden çok değeri belirli adlarla bir modülden dışa aktarmanıza olanak tanır. Varsayılan dışa aktarımlar, tek bir değeri bir modülün varsayılan dışa aktarımı olarak dışa aktarmanıza olanak tanır.

Adlandırılmış Dışa Aktarım Örneği (utils.js):

// utils.js
export function formatCurrency(amount, currencyCode) {
 // Miktarı para birimi koduna göre biçimlendirin
 // Örnek: formatCurrency(1234.56, 'USD') '$1,234.56' döndürebilir
 // Uygulama istenen biçimlendirmeye ve mevcut kütüphanelere bağlıdır
 return new Intl.NumberFormat('en-US', { style: 'currency', currency: currencyCode }).format(amount);
}

export function formatDate(date, locale) {
 // Tarihi yerel ayarlara göre biçimlendirin
 // Örnek: formatDate(new Date(), 'fr-CA') '2024-01-01' döndürebilir
 return new Intl.DateTimeFormat(locale).format(date);
}

// app.js
import { formatCurrency, formatDate } from './utils.js';

const price = formatCurrency(19.99, 'EUR'); // Avrupa
const today = formatDate(new Date(), 'ja-JP'); // Japonya

console.log(price); // Çıktı: €19.99
console.log(today); // Çıktı: (tarihe göre değişir)

Varsayılan Dışa Aktarım Örneği (api.js):

// api.js
const api = {
 fetchData: async (url) => {
 const response = await fetch(url);
 return response.json();
 }
};

export default api;

// app.js
import api from './api.js';

api.fetchData('https://example.com/data')
 .then(data => console.log(data));

ES Modüllerinin Avantajları:

ES Modüllerinin Dezavantajları:

CommonJS vs. ES Modülleri: Detaylı Bir Karşılaştırma

İşte CommonJS ve ES Modülleri arasındaki temel farkları özetleyen bir tablo:

Özellik CommonJS ES Modülleri
İçe Aktarma Sözdizimi require() import
Dışa Aktarma Sözdizimi module.exports export
Yükleme Senkron Asenkron (tarayıcılarda), Node.js'de Senkron/Asenkron
Statik Analiz Hayır Evet
Yerel Tarayıcı Desteği Hayır Evet
Birincil Kullanım Durumu Node.js (tarihsel) Tarayıcılar ve Node.js (modern)

Pratik Örnekler ve Kullanım Senaryoları

Örnek 1: Yeniden Kullanılabilir Bir Yardımcı Modül Oluşturma (Uluslararasılaşma)

Diyelim ki birden çok dili desteklemesi gereken bir web uygulaması oluşturuyorsunuz. Uluslararasılaştırmayı (i18n) işlemek için yeniden kullanılabilir bir yardımcı modül oluşturabilirsiniz.

ES Modülleri (i18n.js):

// i18n.js
const translations = {
 'en': {
 'greeting': 'Hello, world!'
 },
 'fr': {
 'greeting': 'Bonjour, le monde !'
 },
 'es': {
 'greeting': '¡Hola, mundo!'
 }
};

export function getTranslation(key, language) {
 return translations[language][key] || key;
}

// app.js
import { getTranslation } from './i18n.js';

const language = 'fr'; // Örnek: Kullanıcı Fransızca'yı seçti
const greeting = getTranslation('greeting', language);
console.log(greeting); // Çıktı: Bonjour, le monde !

Örnek 2: Modüler Bir API İstemcisi Oluşturma (REST API)

Bir REST API ile etkileşimde bulunurken, API mantığını kapsüllemek için modüler bir API istemcisi oluşturabilirsiniz.

ES Modülleri (apiClient.js):

// apiClient.js
const API_BASE_URL = 'https://api.example.com';

async function get(endpoint) {
 const response = await fetch(`${API_BASE_URL}${endpoint}`);
 if (!response.ok) {
 throw new Error(`HTTP error! status: ${response.status}`);
 }
 return response.json();
}

async function post(endpoint, data) {
 const response = await fetch(`${API_BASE_URL}${endpoint}`, {
 method: 'POST',
 headers: {
 'Content-Type': 'application/json'
 },
 body: JSON.stringify(data)
 });
 if (!response.ok) {
 throw new Error(`HTTP error! status: ${response.status}`);
 }
 return response.json();
}

export { get, post };

// app.js
import { get, post } from './apiClient.js';

get('/users')
 .then(users => console.log(users))
 .catch(error => console.error('Kullanıcıları alma hatası:', error));

post('/users', { name: 'John Doe', email: 'john.doe@example.com' })
 .then(newUser => console.log('Yeni kullanıcı oluşturuldu:', newUser))
 .catch(error => console.error('Kullanıcı oluşturma hatası:', error));

CommonJS'den ES Modüllerine Geçiş

CommonJS'den ES Modüllerine geçiş, özellikle büyük kod tabanlarında karmaşık bir süreç olabilir. İşte dikkate alınması gereken bazı stratejiler:

Node.js ve ES Modülleri:

Node.js, ES Modüllerini tam olarak destekleyecek şekilde evrimleşmiştir. ES Modüllerini Node.js'de şu yollarla kullanabilirsiniz:

Doğru Modül Sistemini Seçme

CommonJS ve ES Modülleri arasındaki seçim, özel ihtiyaçlarınıza ve geliştirdiğiniz ortama bağlıdır:

Sonuç

CommonJS ve ES Modülleri arasındaki farkları anlamak, herhangi bir JavaScript geliştiricisi için gereklidir. CommonJS tarihsel olarak Node.js için standart olsa da, standartlaştırılmış doğaları, performans avantajları ve statik analiz desteği nedeniyle ES Modülleri hem tarayıcılar hem de Node.js için hızla tercih edilen seçenek haline gelmektedir. Projenizin ihtiyaçlarını ve geliştirdiğiniz ortamı dikkatlice değerlendirerek, gereksinimlerinize en uygun modül sistemini seçebilir ve ölçeklenebilir, sürdürülebilir ve verimli JavaScript uygulamaları oluşturabilirsiniz.

JavaScript ekosistemi gelişmeye devam ettikçe, en son modül sistemi trendleri ve en iyi uygulamalar hakkında bilgi sahibi olmak başarı için çok önemlidir. Hem CommonJS hem de ES Modülleri ile denemeye devam edin ve modüler ve sürdürülebilir JavaScript kodu oluşturmanıza yardımcı olacak çeşitli araçları ve teknikleri keşfedin.