JavaScript Dosyalarını Entegre Etmenin Yolları: Script, ES Modül ve CommonJS

[Trollemek]

1. <script> etiketi

• En eski yöntem.
• src özniteliğine dosya yolu verilir:
  

  <script src="utils.js"></script>
  <script src="main.js"></script>

• Dosyalar yükleme kolejinde çalıştırılır; utils.js önce yüklenip çalıştırılırsa, içinde tanımlanan fonksiyonlar main.js içinde erişilebilir.
• Tarayıcıya bağımlı; sunucu tarafında (Node) doğrudan çalışmaz.
• Asenkron veya senkron olma seçeneği var (async, defer).

2. ES Modülü (import / export)

• Tarayıcı ve modern Node (12+ sürümler) destekler.
• Dosya uzantısı .js veya .mjs ile belirtilir.
• Örnek:
  

  // utils.js
  export function add(a, b) { return a + b; }
  
  // main.js
  import { add } from './utils.js';
  console.log(add(2, 3));

• Modülü tek bir kez yükler, sıralama ve döngü sorunu yoktur.
• Tarayıcıda <script type="module"> etiketi kullanılır.
• Sunucu tarafında, require yerine import kullanmak için type: "module" yapılandırması gerekir.

3. CommonJS (require / module.exports)

• Node.js’in geleneksel modül sistemi.
• Dosya:
  

  // utils.js
  module.exports = { add: (a, b) => a + b };
  
  // main.js
  const { add } = require('./utils');
  console.log(add(2, 3));

• Tarayıcıda çalışmaz; bundler (Webpack, Rollup) ile dönüşüm gerekir.
• Sıralama sorunu yok, her require çağrısı aynı instance döner.

Karşılaştırma Tablosu

Özellik	<script>	ES Modül	CommonJS
Ortam	Tarayıcı	Tarayıcı / Node	Node
Yükleme	Sıralı	Asenkron (özellikle tarayıcıda)	Sıralı
Modül Bağımlılığı	Yok	Var (top-down)	Var (top‑down)
Değiştirilebilirlik	Kolay	export default vs. named	module.exports
Entegrasyon	Basit	Modern, tam destek	Gelişmiş, bundler gerekir

Kullanım Senaryoları

• Hızlı prototip, tek sayfa: <script> tagı yeterli.
• Modüler uygulama (React, Vue, Angular): ES Modül tercih edilir.
• Sadece Node: CommonJS hâlihazırda çalışır, ancak projeler ilerledikçe ES Modül’e geçmek modern seçenektir.

İlgili konular​

• JavaScript ile Diziden Belirli Bir Öğeyi Temizleme Yöntemleri