Web Geliştirmede `import` ve `export` ile Modüler JavaScript'e Geçiş Rehberi 
Selam dostlar! Uzun süredir forumda takılıyorum ve birçok yeni geliştiricinin, özellikle de jQuery veya eski script yığınlarından gelenlerin, modern JavaScript'in bu temel taşına geçişte zorlandığını görüyorum. Bugün, karmaşayı bir kenara bırakıp, ES6 modüllerini (`import`/`export`) sade ve pratik bir şekilde anlatacağım. Artık tüm kodunuzu tek bir dosyaya sığdırmak zorunda değilsiniz!
Neden Modüler Kod?
Eskiden, proje büyüdükçe tek bir `main.js` dosyası içinde kaybolurduk. Bir fonksiyonu değiştirirken, projenin başka bir yerini bozma korkusuyla çalışırdık. Modüler yaklaşım tam da bu sorunu çözer:
Temel Adım: HTML'yi Hazırlamak
Modülleri kullanabilmek için, script etiketinize `type="module"` eklemelisiniz. Bu küçük ama kritik bir adım!
Bu, tarayıcıya "Bu dosya modül kurallarıyla çalışır" der ve `import`/`export` kullanımına izin verir.
`export`: Kodunu Dışarı Açmak
Bir değişkeni, fonksiyonu veya sınıfı başka bir dosyada kullanılabilir hale getirmek için `export` kullanırız. İki ana yolu var:
1. Named Export (İsimli Dışa Aktarım): Bir modülden birden fazla şey dışa aktarabilirsiniz.
2. Default Export (Varsayılan Dışa Aktarım): Bir modül başına sadece BİR TANE olur. Genellikle modülün ana ihracatı olduğunda kullanılır.
`import`: Başka Modülleri Kullanmak
Dışa aktarılanları kendi dosyamıza dahil etmek için `import` kullanırız. Yolu doğru yazdığınızdan emin olun (`./` ile başlamak aynı klasör, `../` üst klasör demektir).
1. Named Import: Süslü parantez `{}` içinde, dışa aktarılanın TAM ADINI yazmalısınız.
2. Default Import: Süslü parantez GEREKMEZ. İstediğiniz bir isim verebilirsiniz.
3. Hepsini Bir Arada İthal Etmek: Bir modülden her şeyi tek bir nesne altında toplamak için `* as` kullanın.
Pratik Örnek: Küçük Bir Proje Yapısı
Şöyle bir klasör yapısı düşünelim:
Karşılaşabileceğiniz Sorunlar ve Çözümleri
Umarım bu rehber, modüler JavaScript dünyasına geçişinizde size ışık tutar. Başlangıçta biraz karmaşık gelebilir, ancak bir kez alıştığınızda, eski yöntemlere asla dönmek istemeyeceksiniz. Sorularınızı yorumlara yazmaktan çekinmeyin, elimden geldiğince yardımcı olurum. Kodla kalın!
Selam dostlar! Uzun süredir forumda takılıyorum ve birçok yeni geliştiricinin, özellikle de jQuery veya eski script yığınlarından gelenlerin, modern JavaScript'in bu temel taşına geçişte zorlandığını görüyorum. Bugün, karmaşayı bir kenara bırakıp, ES6 modüllerini (`import`/`export`) sade ve pratik bir şekilde anlatacağım. Artık tüm kodunuzu tek bir dosyaya sığdırmak zorunda değilsiniz!
Neden Modüler Kod?
Eskiden, proje büyüdükçe tek bir `main.js` dosyası içinde kaybolurduk. Bir fonksiyonu değiştirirken, projenin başka bir yerini bozma korkusuyla çalışırdık. Modüler yaklaşım tam da bu sorunu çözer:
- Sorumluluk Ayrımı: Her dosya/dizin, belirli bir işlevden (API istekleri, form doğrulama, UI bileşenleri) sorumlu olur.
- Bakım Kolaylığı: Bir özelliği güncellemek veya düzeltmek için tüm projeyi taramak yerine, ilgili modüle gidersiniz.
- Yeniden Kullanılabilirlik: Bir modülü (örneğin, tarih formatlayıcı), farklı projelerde rahatça kullanabilirsiniz.
- İsim Çakışmalarını Önleme: Modül kapsamı (scope) sayesinde, farklı dosyalardaki aynı değişken isimleri birbirine karışmaz.
Temel Adım: HTML'yi Hazırlamak
Modülleri kullanabilmek için, script etiketinize `type="module"` eklemelisiniz. Bu küçük ama kritik bir adım!
Kod:
<!-- Yanlış (Klasik Yöntem) -->
<script src="main.js"></script>
<!-- Doğru (Modül Yöntemi) -->
<script type="module" src="main.js"></script>Bu, tarayıcıya "Bu dosya modül kurallarıyla çalışır" der ve `import`/`export` kullanımına izin verir.
`export`: Kodunu Dışarı Açmak
Bir değişkeni, fonksiyonu veya sınıfı başka bir dosyada kullanılabilir hale getirmek için `export` kullanırız. İki ana yolu var:
1. Named Export (İsimli Dışa Aktarım): Bir modülden birden fazla şey dışa aktarabilirsiniz.
Kod:
// utils.js dosyası
export const siteName = "Bingünlük";
export const apiKey = "XYZ123"; // Varsayalım :)
export function toUpperCase(text) {
return text.toUpperCase();
}
export function calculateTax(price) {
return price * 0.18;
}
// İsterseniz hepsini en sonda da toplayıp export edebilirsiniz.
// export { siteName, apiKey, toUpperCase, calculateTax };2. Default Export (Varsayılan Dışa Aktarım): Bir modül başına sadece BİR TANE olur. Genellikle modülün ana ihracatı olduğunda kullanılır.
Kod:
// UserService.js dosyası
class UserService {
constructor() { /* ... */ }
login() { /* ... */ }
logout() { /* ... */ }
}
// Sadece bir tane 'default export' olabilir.
export default UserService;
// Veya bir fonksiyon/fonksiyon dışa aktarabilirsiniz.
// const secretKey = "hidden";
// export default secretKey;`import`: Başka Modülleri Kullanmak
Dışa aktarılanları kendi dosyamıza dahil etmek için `import` kullanırız. Yolu doğru yazdığınızdan emin olun (`./` ile başlamak aynı klasör, `../` üst klasör demektir).
1. Named Import: Süslü parantez `{}` içinde, dışa aktarılanın TAM ADINI yazmalısınız.
Kod:
// main.js dosyası
import { siteName, toUpperCase } from './utils.js';
import { calculateTax as vergiHesapla } from './utils.js'; // Takma ad (alias) kullanma
console.log(siteName); // "Bingünlük"
console.log(toUpperCase("merhaba")); // "MERHABA"
console.log(vergiHesapla(100)); // 182. Default Import: Süslü parantez GEREKMEZ. İstediğiniz bir isim verebilirsiniz.
Kod:
// main.js dosyası
import KullaniciServisi from './UserService.js'; // İsim değiştirebilirsiniz.
// import MyService from './UserService.js'; // Bu da çalışır.
const userService = new KullaniciServisi();
userService.login();3. Hepsini Bir Arada İthal Etmek: Bir modülden her şeyi tek bir nesne altında toplamak için `* as` kullanın.
Kod:
// main.js dosyası
import * as Utils from './utils.js';
console.log(Utils.siteName);
console.log(Utils.calculateTax(200));
// Utils.default diye bir şey YOK, çünkü bu modülde default export yapmadık.Pratik Örnek: Küçük Bir Proje Yapısı
Şöyle bir klasör yapısı düşünelim:
Kod:
proje/
├── index.html
└── js/
├── main.js
├── api.js
├── domHelpers.js
└── utils/
└── formatter.js
Kod:
// js/utils/formatter.js
export function formatDate(date) {
return new Date(date).toLocaleDateString('tr-TR');
}
export function formatCurrency(amount) {
return new Intl.NumberFormat('tr-TR', { style: 'currency', currency: 'TRY' }).format(amount);
}
Kod:
// js/api.js
export async function fetchPosts() {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
return await response.json();
}
// Varsayılan olarak bir config objesi dışa aktaralım.
const apiConfig = { baseUrl: 'https://api.orneksite.com' };
export default apiConfig;
Kod:
// js/main.js
// Farklı modüllerden ihtiyacımız olanları içe aktarıyoruz.
import { fetchPosts } from './api.js';
import apiConfig from './api.js'; // Default import
import { formatDate, formatCurrency } from './utils/formatter.js';
async function initApp() {
console.log('API sunucusu:', apiConfig.baseUrl);
const posts = await fetchPosts();
const firstPost = posts[0];
console.log('İlk gönderi tarihi:', formatDate(firstPost.date));
console.log('Örnek fiyat:', formatCurrency(99.99));
}
initApp();Karşılaşabileceğiniz Sorunlar ve Çözümleri
- "Cannot use import statement outside a module" Hatası: Script etiketinize `type="module"` eklemeyi unutmuşsunuzdur.
- Dosya Yolu Hatası (404): `import` ifadesindeki dosya yolunu (`./`, `../`) kontrol edin. Tarayıcı, modülleri sunucudan ayrı ayrı indirir.
- Live Server Kullanın: Modülleri `file://` protokolüyle (dosyayı doğrudan tarayıcıda açarak) çalıştıramazsınız. VS Code'daki Live Server eklentisi gibi bir lokal sunucu kullanın.
- Named Import'ta İsim Hatası: `import { sitename } from './utils.js';` yazarsanız hata alırsınız, çünkü dışa aktarılan isim `siteName` (büyük N ile). Büyük/küçük harfe dikkat!
Umarım bu rehber, modüler JavaScript dünyasına geçişinizde size ışık tutar. Başlangıçta biraz karmaşık gelebilir, ancak bir kez alıştığınızda, eski yöntemlere asla dönmek istemeyeceksiniz. Sorularınızı yorumlara yazmaktan çekinmeyin, elimden geldiğince yardımcı olurum. Kodla kalın!