Frontend Academy · Ders

ES Modülleri: import export ve dinamik import

Adlandırılmış dışa aktarımları, varsayılan dışa aktarımları ve ad alanı içe aktarımlarını kullanın; performans için kodu dynamic import() ile tembel yükleyin.

ES Modülleri: import export ve dinamik import, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

İnceleme: ES Modüllerinin Temelleri

ES Modülleri, her dosyaya kendi kapsamını verir. Adlandırılmış dışa aktarmalar belirli değerleri, varsayılan dışa aktarmalar ise ana değeri paylaşır. Paketleyici veya tarayıcı, içe aktarmaları yükleme sırasında çözümler.

// Named exports
export const API_BASE = '/api/v1';
export function formatDate(d) { return d.toISOString().slice(0, 10); }

// Default export
export default class ApiClient {
  constructor(base = API_BASE) { this.base = base; }
}

Ağaç Sarsma — Adlandırılmış Dışa Aktarmalar Neden Önemlidir

Paketleyiciler (Rollup, esbuild, Vite) kullanılmayan dışa aktarmaları kaldırır. Yalnızca { formatDate } içe aktarırsanız paketleyici geri kalan her şeyi paketten kaldırır. Adlandırılmış dışa aktarmalar ağaç sarsmayı mümkün kılar; import * as utils bunu engelleyebilir.

// consumers/report.js — only needs formatDate
import { formatDate } from './utils.js';
// Bundler omits API_BASE and ApiClient from this chunk

Dinamik import() — Tembel Yükleme

Dinamik import() bir Promise döndürür. Modül yalnızca kod çalıştığında alınır. Paketleyiciler bunları otomatik olarak ayrı parçalara böler.

// Only load the heavy charting library when needed:
const showChart = async () => {
  const { Chart } = await import('./Chart.js');
  new Chart(canvas, config);
};

btn.addEventListener('click', showChart);

Hata Yönetimiyle Dinamik import

Ağ hatalarını veya eksik modülleri düzgün şekilde yönetmek için dinamik içe aktarmaları try/catch içine alın.

try {
  const module = await import('./optional-feature.js');
  module.activate();
} catch (err) {
  console.warn('Optional feature unavailable:', err.message);
}

import.meta

import.meta, geçerli modül hakkındaki meta verileri içerir. Önemli özellikler: import.meta.url (mutlak URL), import.meta.env (Vite ortam değişkenleri), import.meta.resolve().

// Get the directory of this module:
const dir = new URL('.', import.meta.url).pathname;

// Vite env vars:
const API_URL = import.meta.env.VITE_API_URL;
const isProd = import.meta.env.PROD;

Modül Çalıştırma — Bir Kez

ES Modülleri, kaç kez içe aktarıldıklarından bağımsız olarak bir kez değerlendirilir. Aynı modülün tüm içe aktarmaları aynı örneği paylaşır. Bu, modülleri tekil örnekler (mağazalar, olay veri yolları) için ideal kılar.

// store.js — evaluated once
const state = { count: 0 };
export const increment = () => state.count++;
export const getCount = () => state.count;

// Any file that imports from store.js gets the same state instance

Döngüsel Bağımlılıklar

İki modül birbirini içe aktarabilir. JavaScript bunu yönetir, ancak değerlendirme sırası nedeniyle değerler ilk kullanıldıklarında tanımsız olabilir. Çoğu durumda döngülerden kaçınmak için yapıyı yeniden düzenleyin.

TypeScript'te Yalnızca Tür İçe Aktarmaları

Yalnızca türleri içe aktarmak için import type { ... } kullanın. Bunlar derleme zamanında silinir ve çıktı paketinde hiçbir zaman yer almaz. Yalnızca türlere yapılan başvuruların neden olduğu döngüsel bağımlılıklardan kaçınmak için bunları kullanın.

import type { User } from './types.js';

function greet(user: User): string {
  return `Hello, ${user.name}`;
}

Yeniden Dışa Aktarma ve Fıçı Dosyaları

Bir fıçı dosyası birden fazla modülden yeniden dışa aktarma yaparak kullanışlı bir tekil içe aktarma noktası oluşturur. Büyük uygulamalarda fıçı dosyalarını dikkatli kullanın; ağaç sarsmayı engelleyebilirler.

// components/index.ts
export { Button } from './Button';
export { Input } from './Input';
export type { ButtonProps } from './Button';

// Consumer:
import { Button, Input } from '@/components';

Tarayıcıda type=module Betiği

Paketleyici olmadan ES modül söz dizimini doğrudan tarayıcıda etkinleştirmek için bir betik etiketine type="module" ekleyin. Modüller varsayılan olarak ertelenir ve kendi kapsamlarına sahiptir.

<script type="module">
  import { greet } from './utils.js';
  greet('World');
</script>

CommonJS ve ESM Birlikte Çalışabilirliği

Node.js her ikisini de destekler. ESM dosyaları .mjs kullanır veya package.json içinde "type": "module" ayarlanır. ESM'den CommonJS paketlerini kullanırken varsayılan dışa aktarma, module.exports değeridir. Paketleyiciler bunu şeffaf biçimde yönetir.

Hızlı Kontrol

Tek bir varsayılan dışa aktarma nesnesi yerine adlandırılmış dışa aktarmaları kullanmanın temel performans yararı nedir?

Özet: ES Modüllerine Derinlemesine Bakış

Modüller bir kez çalışır; tüm içe aktaranlar aynı örneği paylaşır. Ağaç sarsma, kullanılmayan adlandırılmış dışa aktarmaları kaldırır. Dinamik import(), tembel yüklemeyi ve kod bölmeyi mümkün kılar. import.meta, modül bağlamını sağlar. Fıçı dosyaları kullanışlıdır ancak ağaç sarsmaya zarar verebilir. TypeScript'teki yalnızca tür içe aktarmaları çıktı oluşturmaz.

Sıkça Sorulan Sorular

“ES Modülleri: import export ve dinamik import” dersi ücretsiz mi?

Evet — “ES Modülleri: import export ve dinamik import” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“ES Modülleri: import export ve dinamik import” dersinde ne öğreneceğim?

Adlandırılmış dışa aktarımları, varsayılan dışa aktarımları ve ad alanı içe aktarımlarını kullanın; performans için kodu dynamic import() ile tembel yükleyin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“ES Modülleri: import export ve dinamik import” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

ES Modülleri: import export ve dinamik import
npm ve package.json: bağımlılıklar betikler
Vite: geliştirme sunucusu ve derleme
Paketleme Kavramları: ağaç sarsma kod bölme

← Frontend Academy Sayfasına Dön