ESM temelleri — import/export, varsayılan ve adlandırılmış
ESM import/export temellerini öğrenin: modülün ne olduğunu, adlandırılmış ve varsayılan dışa aktarmaları, ad alanı içe aktarmalarını ve CommonJS ile hafif bir karşılaştırmayı keşfedin.
ESM temelleri — import/export, varsayılan ve adlandırılmış, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 3 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, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 3 dersten oluşur.
Modül nedir?
Amaç: Modül söz dizimini güvenle okuyabilmek.
- modül nedir?
- adlandırılmış ve varsayılan dışa aktarımlar
- Ad alanı olarak import *
- Kısa CJS karşılaştırması
Modül = dosya + yerel kapsam
Bir modül bir dosyadır. Değişkenleri, onları export etmediğiniz sürece yereldir.
// A module is just a file with its own scope
// Here we simulate "module scope" by keeping variables local.
(function () {
const secret = 42; // local to this file/scope
function reveal() { return "value:" + secret; }
console.log("module-like scope:", typeof secret === "number", reveal());
})();
Adlandırılmış dışa aktarımlar — fikir
Adlandırılmış dışa aktarımlar, içe aktarmada süslü parantez kullanır: import { name }. Tek bir dosyadan birden çok öğeyi dışa aktarabilirsiniz.
// Named exports: you export multiple items by name
const exampleNamedExport = [
"export const PI = 3.14;",
"export function sum(a, b) { return a + b; }",
"import { PI, sum } from \\"./math.js\\";"
];
console.log("named export example:");
for (const line of exampleNamedExport) console.log(line);
// Tiny emulation: pretend we imported two named symbols
const PI = 3.14;
function sum(a, b) { return a + b; }
console.log("emulated use:", PI, sum(2, 3));
Varsayılan dışa aktarım — fikir
Bir varsayılan dışa aktarım, süslü parantez olmadan içe aktarılır: import name from "path".
// Default export: each module can have at most one default
const exampleDefault = [
"export default function greet(name) { return \\"Hi \\" + name; }",
"import greet from \\"./greet.js\\"; // no braces"
];
console.log("default export example:");
for (const line of exampleDefault) console.log(line);
// Emulation of default import usage
function greet(name) { return "Hi " + name; }
console.log("emulated default:", greet("Ayla"));
Ad alanı içe aktarımı
import * as ns, adlandırılmış dışa aktarımları tek bir nesnede toplar (örneğin math.sum).
// Namespace import collects all named exports under one object
const exampleNamespace = [
"import * as math from \\"./math.js\\";",
"console.log(math.PI, math.sum(1, 2));"
];
console.log("namespace import example:");
for (const line of exampleNamespace) console.log(line);
// Emulate a namespace object
const math = { PI: 3.14, sum: function (a, b) { return a + b; } };
console.log("namespace use:", math.PI, math.sum(4, 5));
CJS karşılaştırması ve çözümleme notları
CJS ve ESM (kısa karşılaştırma):
- ESM: içe aktarma/dışa aktarma söz dizimi (statik). Örnek: import { x } from "./m.js".
- CJS: require/module.exports (dinamik). Örnek: const x = require("./m.js").
- ESM'de tarayıcıda ve birçok Node kurulumunda açık dosya uzantıları kullanın (örneğin ./file.js).
Adlandırılmış ve varsayılan içe aktarma testi
Hızlı kontrol: Adlandırılmış içe aktarma söz dizimi.
Özet
Özet: Bir modül bir dosyadır. adlandırılmış dışa aktarımları süslü parantezlerle, bir varsayılan dışa aktarımı süslü parantez olmadan ve bir ad alanı için import * kullanın. CJS'de require, ESM'de import kullanılır.
Sıkça Sorulan Sorular
“ESM temelleri — import/export, varsayılan ve adlandırılmış” dersi ücretsiz mi?
Evet — “ESM temelleri — import/export, varsayılan ve adlandırılmış” 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 JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 3 dersten oluşur.
“ESM temelleri — import/export, varsayılan ve adlandırılmış” dersinde ne öğreneceğim?
ESM import/export temellerini öğrenin: modülün ne olduğunu, adlandırılmış ve varsayılan dışa aktarmaları, ad alanı içe aktarmalarını ve CommonJS ile hafif bir karşılaştırmayı keşfedin. JavaScript 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.
JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te JavaScript 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, 3 dersinin 1. dersidir.
“ESM temelleri — import/export, varsayılan ve adlandırılmış” 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 JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her JavaScript 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
- ESM temelleri — import/export, varsayılan ve adlandırılmış
- CommonJS temelleri — require/module.exports ve exports
- Node ve tarayıcı paketleyicilerinde modül çözümleme