Modullar və müasir alətlər — JavaScript

Bu dərsdə öyrənəcəksən

Adlı və susmaya görə (default) eksportları yazmaq və import etmək
Brauzerdə <script type="module">-un nə verdiyini izah etmək
npm, package.json və paketlərin rolunu başa düşmək
Bundler, linter və formatlayıcının nə üçün lazım olduğunu bilmək

Real tətbiqdə on minlərlə sətir kod olur. Hamısını bir fayla yazsan, orada nəyisə tapmaq, komanda ilə işləmək və səhvi düzəltmək kabusa çevrilər. Ona görə kodu kiçik, məntiqi hissələrə — modullara bölürlər, hazır həlləri isə paketlər kimi qoşurlar. Bu, JavaScript-i öyrənməkdən peşəkar işə keçidin son addımıdır.

Modul: export və import

Tərif

Modul

Öz görünmə sahəsi olan ayrıca fayl. Onun dəyişənləri və funksiyaları kənardan görünmür — yalnız export ilə açıq şəkildə paylaşılanlar başqa fayllarda import ilə götürülə bilər.

İki növ eksport var. Adlı eksport (export const, export function) bir faylda istənilən qədər ola bilər və import zamanı fiqurlu mötərizədə eyni adla götürülür. Susmaya görə eksport (export default) faylda yalnız bir dənədir və mötərizəsiz, istənilən adla import olunur.

JavaScript

// math.js
export const PI = 3.14159;

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

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

math.js faylı iki adlı və bir susmaya görə eksport paylaşır.

JavaScript

// 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);

Gözlənilən nəticə

Hello, Aysel!
12.57
true

app.js lazım olanı götürür. import * as math bütün adlı eksportları bir obyektdə toplayır.

Eksport	İmport	Qeyd
`export function circleArea`	`import { circleArea } from './math.js'`	ad eyni olmalıdır
`export const PI`	`import { PI as pi } from './math.js'`	`as` ilə adı dəyişmək olar
`export default function greet`	`import hello from './math.js'`	mötərizəsiz, istənilən ad

Brauzerdə modullar

Brauzerə faylın modul olduğunu type="module" atributu ilə bildiririk. Belə skriptdə import/export işləyir, dəyişənlər qlobal sahəni «çirkləndirmir», kod sərt rejimdə (strict mode) icra olunur və səhifə tam oxunandan sonra işə düşür. Üstəlik, modulda await funksiyadan kənarda, faylın ən üst səviyyəsində də yazıla bilər:

HTML· Kodu dəyiş və yenidən işə sal

<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>

Önizləmə

Adi <script>-də üst səviyyədəki await sintaksis xətası olardı — modulda isə işləyir.

npm və paketlər

Tarixləri formatlamaq, qrafik çəkmək, testlər yazmaq — bunların hamısı üçün başqa proqramçıların yazdığı hazır paketlər var. npm (Node Package Manager) Node.js ilə birlikdə quraşdırılan paket menecerdir. Layihə haqqında məlumat, asılılıqlar və əmrlər package.json faylında saxlanılır, yüklənmiş paketlər isə node_modules qovluğuna düşür.

JSON

{
  "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"
  }
}

dependencies — tətbiqin işləməsi üçün lazım olan paketlər, devDependencies — yalnız hazırlıq zamanı istifadə olunan alətlər, scripts — npm run dev kimi əmrlər.

1
Layihə yarat
Terminalda npm create vite@latest my-app yaz və şablon kimi Vanilla və JavaScript seç.
2
Asılılıqları quraşdır
cd my-app ilə qovluğa keç və npm install əmrini icra et.
3
Paket əlavə et
npm install dayjs yaz, sonra kodda import dayjs from 'dayjs'; ilə istifadə et.
4
İnkişaf serverini işə sal
npm run dev yaz və terminalda göstərilən ünvanı aç (adətən http://localhost:5173). Faylı yadda saxlayan kimi səhifə özü yenilənir.

Müasir alətlər

Alət növü	Nə edir	Nümunələr
Paket meneceri	paketləri yükləyir və yeniləyir	npm, pnpm, Yarn
Bundler və dev server	modulları sayt üçün birləşdirir və sıxır	Vite, webpack, esbuild
Linter	kodu işə salmadan səhvləri və pis vərdişləri tapır	ESLint
Formatlayıcı	kodu vahid üslubda avtomatik düzür	Prettier
Test aləti	kodun düzgün işlədiyini avtomatik yoxlayır	Vitest, Jest

Tapşırıq

package.json faylının mətni sətir kimi verilib. Onu JSON.parse ilə oxu və çap et: 1) ad@versiya (weather-app@1.4.2), 2) hər asılılığı ayrıca sətirdə ad versiya şəklində, 3) Dev tools: N — devDependencies-dəki paketlərin sayı.

Tapşırıq · JavaScript· Kodu dəyiş və yenidən işə sal

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

▸ Gözlənilən nəticə

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

Əsas fikirlər

Modul öz görünmə sahəsi olan fayldır; paylaşmaq üçün export, götürmək üçün import yazılır.
Adlı eksportlar { } içində eyni adla, export default isə mötərizəsiz, istənilən adla import olunur.
<script type="module"> import/export, öz görünmə sahəsi, sərt rejim və üst səviyyədə await verir.
npm paketləri quraşdırır; layihənin asılılıqları və əmrləri package.json-da saxlanılır.
Vite layihəni işə salır və yığır, ESLint səhvləri tapır, Prettier kodu formatlayır.

Özünü yoxla

10 sual. Hər düzgün cavab XP qazandırır.

1 / 10

Funksiyanı başqa faylda istifadə etmək üçün onu necə paylaşmaq olar?