Frontend Academy · Ders

Modüller: import ve export

Modüller: import ve export, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 4. 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.

Modüller Neden Kullanılır?

Modüllerden önce tüm JavaScript genel kapsamda çalışıyordu. Değişkenler çakışıyordu. Kod sırası önemliydi. Dosyaların sırayla yüklenmesi gerekiyordu. ES Modülleri her dosyaya kendi kapsamını, açıkça belirtilmiş içe aktarmaları ve ağaç sallamayla ayıklanabilen dışa aktarımları sağlar.

Adlandırılmış Dışa Aktarımlar

export anahtar sözcüğüyle belirli değerleri dışa aktarın. Bir dosyada birçok adlandırılmış dışa aktarım bulunabilir. Kullanan kod yalnızca ihtiyaç duyduğu değerleri içe aktarır.

// utils.js
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export class Vector {
  constructor(x, y) { this.x = x; this.y = y; }
}

Adlandırılmış İçe Aktarımlar

Adlandırılmış dışa aktarımları süslü ayraçlarla içe aktarın. Tek bir ifadede bir modülden birden çok dışa aktarımı içe aktarabilirsiniz.

import { PI, add, Vector } from './utils.js';

console.log(PI);        // 3.14159
console.log(add(2, 3)); // 5

Varsayılan Dışa Aktarımlar

Her modülde bir varsayılan dışa aktarım bulunabilir; bu genellikle modülün sağladığı ana unsurdur. Bunu süslü ayraçlar olmadan içe aktarabilir ve istediğiniz adı verebilirsiniz.

// Button.js
export default function Button({ label }) {
  return `<button>${label}</button>`;
}

// Importing:
import Button from './Button.js';
import MyButton from './Button.js'; // any name works

Yeniden Dışa Aktarma

Bir modül, bir toplayıcı dosya oluşturmak için diğer modüllerden yeniden dışa aktarım yapabilir; bu dosya, birden çok unsuru yeniden dışa aktaran tek bir giriş noktasıdır.

// components/index.js
export { default as Button } from './Button.js';
export { default as Input } from './Input.js';
export { default as Modal } from './Modal.js';

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

Ad Alanı İçe Aktarımları

import * as name ile bir modüldeki her şeyi bir ad alanı nesnesine içe aktarın. Çok sayıda dışa aktarıma ihtiyaç duyduğunuzda veya kaynağı açıkça belirtmek istediğinizde kullanışlıdır.

import * as utils from './utils.js';

console.log(utils.PI);        // 3.14159
console.log(utils.add(1, 2)); // 3

Yalnızca Yan Etki İçin İçe Aktarımlar

Bazı modüller yalnızca yan etkileri için içe aktarılır (uyumluluk doldurucuları, olay işleyicilerini kaydetme). Bunları bir bağlama adı vermeden içe aktarın.

import './polyfills.js'; // runs the code, imports nothing

Dinamik import() — Kod Bölme

Dinamik import() işlevi bir vaat döndürür. Bir modülü yalnızca gerektiğinde, gecikmeli olarak yüklemek için kullanın. Paketleyiciler, dinamik olarak içe aktarılan modüller için otomatik olarak ayrı bir parça oluşturur.

// Load a heavy module only when the button is clicked:
button.addEventListener('click', async () => {
  const { processFile } = await import('./fileProcessor.js');
  processFile(data);
});

import.meta

import.meta, modüllerin içinde kullanılabilen özel bir nesnedir. import.meta.url, modülün URL'sidir. Vite, ortam değişkenleri için import.meta.env kullanır.

// Vite environment variables:
console.log(import.meta.env.VITE_API_URL);
console.log(import.meta.env.MODE); // 'development' or 'production'

Modül Çözümleme

Vite gibi paketleyiciler modülleri dosya sisteminden ('./utils' gibi göreli yollar), node_modules içinden ('lodash') veya vite.config.js içinde yapılandırılmış yol takma adlarından ('@/components') çözümler.

CommonJS ve ES Modülleri

Node.js başlangıçta CommonJS (require / module.exports) kullanıyordu. Tarayıcı ES Modüllerini (import / export) kullanır. Modern Node.js de package.json içindeki type: "module" ile ES Modüllerini destekler.

// CommonJS (Node.js, older tooling):
const fs = require('fs');
module.exports = { myFunc };

// ES Modules (modern):
import fs from 'fs';
export { myFunc };

Hızlı Kontrol

Statik bir içe aktarma yerine dynamic import() kullanmanın başlıca avantajı nedir?

Özet: ES Modülleri

Birden çok değer için adlandırılmış dışa aktarımlar ve içe aktarımlar kullanılır. Ana unsur için varsayılan dışa aktarım ve içe aktarım kullanılır. Yeniden dışa aktarımlar toplayıcı dosyalar oluşturur. Dinamik import(), gecikmeli yüklemeyi ve kod bölmeyi mümkün kılar. import.meta modül meta verilerini sağlar. Paketleyiciler takma adları, node_modules ve göreli yolları çözümler.

Sıkça Sorulan Sorular

“Modüller: import ve export” dersi ücretsiz mi?

Evet — “Modüller: import ve export” 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.

“Modüller: import ve export” dersinde ne öğreneceğim?

Adlandırılmış ve varsayılan dışa aktarımlarla kodu ES modüllerine ayırın, yalnızca gerekenleri içe aktarın ve modül paketleyicilerinin bağımlılık grafiğini nasıl çözdüğünü öğrenin. 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 4. dersidir.

“Modüller: import ve export” 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

Dizi Metotları: map filter reduce find
Nesne Destructuring ve Spread
Şablon Dizeleri ve İsteğe Bağlı Zincirleme
Modüller: import ve export

← Frontend Academy Sayfasına Dön