ES Modullar va CommonJS farqi

~10 daq · JavaScript · Modullar

Muammodan boshlaylik

Node.js loyihasida import yozasiz — xato chiqadi. Brauzerda require yozasiz — "require is not defined". Kutubxona README da "ESM va CJS ikkala format qo'llab-quvvatlanadi" deyilgan — nima farqi bor?

Bu ikki modul tizimi — bir xil maqsadga erishishning ikki yo'li. Lekin farqlari muhim.

Asosiy farqlar

1. Sintaksis

// CommonJS
const fs    = require("fs");
const utils = require("./utils");
module.exports = { funksiya };

// ES Modullar
import fs    from "fs";
import { yordamchi } from "./utils.js";
export function funksiya() {}

Ko'rinishi boshqa, lekin ikkisi ham modul yuklash va eksport qilish uchun.

2. Qachon yuklanadi — sinxron vs asinxron

CommonJS — require() sinxron. Fayl o'qilguncha kutiladi. Node.js disk operatsiyasini bloklab turadi.

ES Modullar — statik tahlil qilinadi. Brauzer yoki Node.js faylni ishlatishdan oldin qaysi modullar kerakligini biladi. Bu tufayli parallel yuklash va tree-shaking mumkin.

Hayotiy o'xshatma

CommonJS — do'konga borsangiz, har bir narsani ketma-ket qidirasiz: avval non, topasiz, keyin sut, topasiz, keyin sabzi. Biri tugamaguncha keyingisini qidirmaysiz.

ES Modullar — xaridlar ro'yxatini oldindan yozib, do'konga berasiz. Do'kon xodimlari bir vaqtda barcha qidiradi — parallel. Tez.

3. Tree-shaking

Tree-shaking — ishlatilmagan kodni yakuniy bundle dan olib tashlash.

ES Modullar statik bo'lgani uchun — bundler (Vite, Webpack) qaysi eksportlar ishlatilganini aniqlay oladi. Ishlatilmaganlarni chiqarib tashlaydi. Bundle hajmi kamayadi.

// math.js — 3 ta funksiya
export function qosh(a, b)  { return a + b; }
export function ayir(a, b) { return a - b; }
export function qo_payrt(a, b) { return a * b; }

// main.js — faqat bittasi ishlatildi
import { qosh } from "./math.js";

Bundler ayir va qo'paytirish ni yakuniy faylga kiritmasligi mumkin — chunki ular ishlatilmagan.

CommonJS da bu mumkin emas — require dinamik, runtime da bajariladi. Bundler oldindan qaysi eksportlar kerakligini bila olmaydi.

4. this va scope

CommonJS da har modulda this — module.exports ob'ekti (Node.js da).

ES Modullar da this — undefined (strict mode doimo yoqilgan).

// CommonJS
console.log(this === module.exports); // true (Node.js da)

// ES Modul
console.log(this); // undefined

5. .mjs va package.json

Node.js da ES Modullar ishlatish uchun:

• Fayl kengaytmasi .mjs bo'lsin, yoki
• package.json da "type": "module" yozilsin

{
  "name": "mening-loyiham",
  "type": "module"
}

"type": "module" bo'lsa — .js fayllar ES Modul sifatida qabul qilinadi. CommonJS uchun esa .cjs kengaytmasi ishlatiladi.

Qisqa taqqoslash jadvali

Amalda nima ishlatish kerak?

Yangi loyiha — ES Modullar. package.json da "type": "module". Barcha zamonaviy tooling qo'llab-quvvatlaydi.

Eski Node.js loyiha — CommonJS. O'zgartirish kerak emas, ishlaydi.

Kutubxona yozish — ikkala format ham qo'llab-quvvatlash. Bundler (Rollup, tsup) orqali avtomatik.

Brauzer — faqat ES Modullar. require ishlamaydi.

Tez-tez uchraydigan xatolar

ES Modullar da require ishlatish:

// ❌ — ES Modul faylida require yo'q
const fs = require("fs"); // ReferenceError: require is not defined

// ✅ — ES Modul sintaksisi
import { readFile } from "fs";

CommonJS da import ishlatish:

// ❌ — package.json da "type":"module" yo'q bo'lsa
import express from "express"; // SyntaxError

// ✅ — CommonJS sintaksisi
const express = require("express");

Xulosa

CommonJS — require/module.exports. Sinxron. Node.js da standart (eski).

ES Modullar — import/export. Statik, asinxron, tree-shaking. Zamonaviy standart.

Yangi loyihalarda ES Modullar. Eski kodda CommonJS. Ikkisini aralashtirmaslik — agar kerak bo'lsa bundler yordamida.

Keyingi dars

58-dars: Iterator va Generator