0Pricing
JavaScript Academy · Ders

Node ve tarayıcı paketleyicilerinde modül çözümleme

İçe aktarmaların nasıl çözümlendiğini öğrenin: göreli ve yalın belirteçler, dosya uzantıları (.js/.mjs/.cjs), index dosyaları ve basit paket giriş noktaları.

Node ve tarayıcı paketleyicilerinde modül çözümleme, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 3 dersinin 3. 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.

Genel bakış

Amaç: İçe aktarma yollarının nasıl çözümlendiğini bilmek.

  • göreli ve yalın belirticiler
  • Açık .js kullanın (güvenli varsayılan)
  • Klasörlerde index.js
  • Paket giriş noktaları (main/exports, kısa karşılaştırma)
Node ve tarayıcı paketleyicilerinde modül çözümleme — resim 1

Göreli ve yalın

Göreli içe aktarmalar ./ veya ../ ile başlar. Yalın içe aktarmalar, kurulu paketleri gösterir.

// Relative path imports start with ./ or ../
// Bare specifiers refer to packages installed (e.g., "lodash")
const examples = [
  "import { sum } from \\"./math.js\\";   // relative, file nearby",
  "import leftPad from \\"left-pad\\";   // bare, from node_modules",
  "import thing from \\"../lib/thing.js\\"; // parent folder"
];

console.log("specifiers:");
for (const line of examples) console.log(line);
Node ve tarayıcı paketleyicilerinde modül çözümleme — resim 2

Uzantılar önemlidir

Çözümleme hatalarını önlemek için ESM'de .js uzantısını ekleyin. .mjs veya .cjs de görebilirsiniz.

// Include file extensions for ESM (safe beginner habit)
const extTips = [
  "Good (ESM): import util from \\"./util.js\\"",
  "Also seen: .mjs for ESM files, .cjs for CJS files",
  "Avoid: import \\"./util\\" (may fail in Node/browsers)"
];

console.log("extensions:");
for (const t of extTips) console.log(t);
Node ve tarayıcı paketleyicilerinde modül çözümleme — resim 3

Klasörler ve index.js

Klasörler çoğu zaman index.js dosyasını dışa sunar. Açıkça belirtmek (.../index.js) başlangıç düzeyindeki öğrenciler için anlaşılırdır.

// If you import a folder, many setups look for index.js inside it
const folderExample = [
  "my-lib/",
  "  index.js",
  "  helpers/",
  "    index.js"
];

for (const l of folderExample) console.log(l);

// Typical imports
const dirImports = [
  "import main from \\"./my-lib/index.js\\";",
  "import alsoMain from \\"./my-lib/\\";        // some setups resolve to index.js",
  "import helper from \\"./my-lib/helpers/index.js\\";"
];

console.log("imports:");
for (const l of dirImports) console.log(l);
Node ve tarayıcı paketleyicilerinde modül çözümleme — resim 4

Paket giriş noktaları

Paketler giriş noktalarını main/exports aracılığıyla dışa sunar. Yalın içe aktarmalar, ESM veya CJS için doğru dosyayı seçer.

// Installed packages declare entry points in package.json
const pkgJson = [
  "{",
  "  \\"name\\": \\"tiny-lib\\",",
  "  \\"main\\": \\"dist/cjs/index.cjs\\",",
  "  \\"exports\\": {",
  "    \\".\\": { \\"import\\": \\"./dist/esm/index.js\\", \\"require\\": \\"./dist/cjs/index.cjs\\" }",
  "  }",
  "}"
];

console.log("package.json entry (example):");
for (const l of pkgJson) console.log(l);

// Importing a bare specifier will use these fields
console.log("import tiny-lib     -> resolves to ESM or CJS entry depending on environment");
Node ve tarayıcı paketleyicilerinde modül çözümleme — resim 5

İpuçları ve tuzaklar

İpuçları:

  • Yerel dosyalar için .js uzantılı göreli yolları tercih edin.
  • Yalın içe aktarmaları yalnızca kurulu paketler için kullanın.
  • Belirsizliği önlemek için index.js konusunda açık olun.
  • Tarayıcıda içe aktarmalar geçerli URL'ler olmalıdır (çoğu zaman uzantılarıyla birlikte).
Node ve tarayıcı paketleyicilerinde modül çözümleme — resim 6

Çözümlemenin temelleri testi

Hızlı kontrol: Güvenli yerel içe aktarma yolu.

Node ve tarayıcı paketleyicilerinde modül çözümleme — resim 7

Özet

Özet: Yerel dosyalar → ./file.js. Paketler → yalın adlar. Klasörler çoğu zaman index.js olarak çözümlenir. Bu kuralları bilmek, içe aktarmaları basit ve öngörülebilir tutar.

Node ve tarayıcı paketleyicilerinde modül çözümleme — resim 8

Sıkça Sorulan Sorular

“Node ve tarayıcı paketleyicilerinde modül çözümleme” dersi ücretsiz mi?

Evet — “Node ve tarayıcı paketleyicilerinde modül çözümleme” 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.

“Node ve tarayıcı paketleyicilerinde modül çözümleme” dersinde ne öğreneceğim?

İçe aktarmaların nasıl çözümlendiğini öğrenin: göreli ve yalın belirteçler, dosya uzantıları (.js/.mjs/.cjs), index dosyaları ve basit paket giriş noktaları. 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 3. dersidir.

“Node ve tarayıcı paketleyicilerinde modül çözümleme” 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

  1. ESM temelleri — import/export, varsayılan ve adlandırılmış
  2. CommonJS temelleri — require/module.exports ve exports
  3. Node ve tarayıcı paketleyicilerinde modül çözümleme
← JavaScript Academy Sayfasına Dön