Modüller ve modern araçlar

Gerçek bir uygulamada on binlerce satır kod bulunur. Hepsini tek bir dosyaya yazarsan bir şey bulmak, ekip olarak çalışmak ve hata düzeltmek kâbusa döner. Bu yüzden kod küçük ve mantıklı parçalara, yani modüllere bölünür; hazır çözümler ise paket olarak eklenir. Bu, JavaScript öğrenmekten onunla profesyonelce çalışmaya geçişin son adımıdır.

Modüller: export ve import

İki tür dışa aktarım vardır. Adlandırılmış export (export const, export function) bir dosyada istediğin kadar olabilir ve içe aktarırken süslü parantez içinde aynı adla alınır. Varsayılan export (export default) bir dosyada yalnızca bir tanedir ve süslü parantezsiz, istenen herhangi bir adla içe aktarılır.

// math.js
export const PI = 3.14159;

export function circleArea(radius) {
  return PI * radius * radius;
}

export default function greet(name) {
  return `Hello, ${name}!`;
}

// app.js
import greet, { circleArea, PI } from './math.js';
import * as math from './math.js';

console.log(greet('Aysel'));
console.log(circleArea(2).toFixed(2));
console.log(PI === math.PI);

Hello, Aysel!
12.57
true

Tarayıcıda modüller

Bir dosyanın modül olduğunu tarayıcıya type="module" özniteliğiyle bildiririz. Böyle bir betikte import/export çalışır, değişkenler global kapsamı “kirletmez”, kod katı modda (strict mode) çalışır ve sayfa tamamen okunduktan sonra başlar. Üstelik modülde await, fonksiyon dışında, dosyanın en üst düzeyinde de yazılabilir:

<p id="status">Loading the menu...</p>

<script type="module">
  const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

  await wait(1500);

  const menu = ['plov', 'dolma', 'pakhlava'];
  document.querySelector('#status').textContent = `Menu: ${menu.join(', ')}`;
</script>

npm ve paketler

Tarih biçimlendirmek, grafik çizmek, test yazmak; bunların hepsi için başka geliştiricilerin yazdığı hazır paketler vardır. npm (Node Package Manager), Node.js ile birlikte kurulan paket yöneticisidir. Projeyle ilgili bilgiler, bağımlılıklar ve komutlar package.json dosyasında tutulur; indirilen paketler ise node_modules klasörüne gider.

{
  "name": "weather-app",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint ."
  },
  "dependencies": {
    "dayjs": "^1.11.10"
  },
  "devDependencies": {
    "vite": "^5.0.0",
    "eslint": "^9.0.0"
  }
}

1. 1
   Proje oluştur

   Terminalde npm create vite@latest my-app yaz ve şablon olarak Vanilla ile JavaScript'i seç.

2. 2
   Bağımlılıkları kur

   cd my-app ile klasöre geç ve npm install komutunu çalıştır.

3. 3
   Paket ekle

   npm install dayjs yaz, sonra kodunda import dayjs from 'dayjs'; ile kullan.

4. 4
   Geliştirme sunucusunu başlat

   npm run dev yaz ve terminalde gösterilen adresi aç (genellikle http://localhost:5173). Bir dosyayı kaydettiğin anda sayfa kendiliğinden yenilenir.

Modern araçlar

const text = '{"name": "weather-app", "version": "1.4.2", "dependencies": {"dayjs": "^1.11.10", "lodash": "^4.17.21"}, "devDependencies": {"vite": "^5.0.0", "eslint": "^9.0.0"}}';

// 1) parse the text and print name@version
// 2) print every dependency as: name version
// 3) print Dev tools: N

weather-app@1.4.2
dayjs ^1.11.10
lodash ^4.17.21
Dev tools: 2