ES modullari (ESM)

ES modullariga kirish

ES Modules (ESM) JavaScript kodini qayta foydalanish uchun paketlashning rasmiy standart formati hisoblanadi.

U ES6 (ES2015) da kiritilgan va hozir Node.js’da qo‘llab-quvvatlanadi.

ES Modules paydo bo‘lishidan oldin Node.js faqat CommonJS modul formatidan (require/exports) foydalangan.

Endi ishlab chiquvchilar loyiha ehtiyojlaridan kelib chiqqan holda CommonJS va ES modullarini tanlashlari mumkin.

ES modullari CommonJS bilan solishtirganda modullar bilan ishlashning yanada tuzilgan va statik tahlil qilinadigan usulini taqdim etadi, kichikroq tuzilmalar uchun daraxt silkitish kabi afzalliklarga ega.

CommonJS va ES modullari

CommonJS va ES modullari qanday farq qiladi:

Xususiyat	CommonJS	ES modullari
Fayl kengaytmasi	.js (default)	.mjs (yoki tegishli sozlama bilan .js)
Import sintaksisi	require()	import
Eksport sintaksisi	modul.eksport / eksport	standart eksport/eksport
Import vaqti	Dynamic (runtime)	Static (parsed before execution)
Yuqori darajadagi kutish	Qo‘llab-quvvatlanmaydi	Qo‘llab-quvvatlanadi
Importdagi fayl URL manzili	Majburiy emas	Mahalliy fayllar uchun talab qilinadi

Misol: CommonJS moduli

// math.js (CommonJS)
function add(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

module.exports = {
  add,
  subtract
};

// app.js (CommonJS)
const math = require('./math');
console.log(math.add(5, 3)); // 8

Misol: ES moduli

// math.mjs (ES Module)
export function add(a, b) {
return a + b;
}

export function subtract(a, b) {
return a - b;
}

// app.mjs (ES Module)
import { add, subtract } from './math.mjs';
console.log(add(5, 3)); // 8

Misolni ishga tushirish »

ES modullarini yoqish

Node.js da ES modullarini yoqishning bir necha usullari mavjud:

1. .mjs fayl kengaytmasidan foydalanish

Eng oddiy usul - fayllaringiz uchun .mjs kengaytmasidan foydalanish.

Node.js avtomatik ravishda ushbu fayllarni ES modullari sifatida ko‘rib chiqadi.

2. package.json faylida "type": "module" ni belgilash

ES modullarini oddiy .js fayllari bilan ishlatish uchun package.json faylingizga quyidagilarni qo‘shing:

{
  "name": "my-package",
  "version": "1.0.0",
  "type": "module"
}

Ushbu sozlama bilan loyihangizdagi barcha .js fayllar ES modullari sifatida ko‘rib chiqiladi.

3. --input-type=module flagidan foydalanish

To‘g‘ridan-to‘g‘ri node buyrug‘i bilan ishlaydigan skriptlar uchun siz modul tizimini belgilashingiz mumkin:

node --input-type=module script.js

Eslatma: Agar siz asosan CommonJS-dan foydalanadigan kodlar bazasi bilan ishlayotgan bo‘lsangiz, lekin ES modullarini bitta faylda ishlatmoqchi bo‘lsangiz, .mjs kengaytmasidan foydalanish eng aniq va xatoga yo‘l qo‘ymaydigan yondashuvdir.

Import va eksport sintaksisi

ES modullari CommonJS bilan solishtirganda kodni import va eksport qilishning yanada moslashuvchan usullarini taqdim etadi.

Eksport sintaksisi

Nomlangan eksport

// Multiple named exports
export function sayHello() {
  console.log('Hello');
}

export function sayGoodbye() {
  console.log('Goodbye');
}

// Alternative: export list at the end
function add(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

export { add, subtract };

Standart eksport

// Only one default export per module
export default function() {
console.log('I am the default export');
}

// Or with a named function/class/object
function mainFunction() {
return 'Main functionality';
}

export default mainFunction;

Aralash eksport

// Combining default and named exports
export const VERSION = '1.0.0';

function main() {
console.log('Main function');
}

export { main as default }; // Alternative way to set default

Import sintaksisi

Nomlangan eksportlarni import qilish

// Import specific named exports
import { sayHello, sayGoodbye } from './greetings.mjs';
sayHello(); // Hello

// Rename imports to avoid naming conflicts
import { add as sum, subtract as minus } from './math.mjs';
console.log(sum(5, 3)); // 8

// Import all named exports as an object
import * as math from './math.mjs';
console.log(math.add(7, 4)); // 11

Standart eksportlarni import qilish

// Import the default export
import mainFunction from './main.mjs';
mainFunction();

// You can name the default import anything you want
import anyNameYouWant from './main.mjs';
anyNameYouWant();

Standart va nomli eksportlarni import qilish

// Import both default and named exports
import main, { VERSION } from './main.mjs';
console.log(VERSION); // 1.0.0
main(); // Main function

Misolni ishga tushirish »

Dinamik import

ES modullari dinamik importni qo‘llab-quvvatlaydi, bu sizga modullarni shartli yoki talab bo‘yicha yuklash imkonini beradi.

Misol: Dinamik importlar

// app.mjs
async function loadModule(moduleName) {
  try {
    // Dynamic import returns a promise
    const module = await import(`./${moduleName}.mjs`);
    return module;
  } catch (error) {
    console.error(`Failed to load ${moduleName}:`, error);
  }
}

// Load a module based on a condition
const moduleName = process.env.NODE_ENV === 'production' ? 'prod' : 'dev';

loadModule(moduleName).then(module => {
  module.default(); // Call the default export
});

// Or with simpler await syntax
(async () => {
  const mathModule = await import('./math.mjs');
  console.log(mathModule.add(10, 5)); // 15
})();

Misolni ishga tushirish »

Use Case: Dinamik importlar kodni ajratish, modullarni kechiktirilgan yuklash (lazy loading) yoki ish vaqti shartlariga asoslangan shartli yuklash uchun juda mos keladi.

Yuqori darajadagi kutish

CommonJS-dan farqli o‘laroq, ES modullari yuqori darajadagi kutishni qo‘llab-quvvatlaydi, bu sizga modul darajasida asinx funksiyalaridan tashqari kutishdan foydalanish imkonini beradi.

Misol: Yuqori darajadagi kutish

// data-loader.mjs
// This would cause an error in CommonJS or in a script
// But works at the top level in an ES Module

console.log('Loading data...');

// Top-level await - the module's execution pauses here
const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
const data = await response.json();

console.log('Data loaded!');

export { data };

// When another module imports this one, it will only get the exports
// after all the top-level await operations have completed

Misolni ishga tushirish »

Yuqori darajadagi kutish ayniqsa quyidagilar uchun foydalidir:

Konfiguratsiya fayllar yoki masofaviy manbalardan yuklanmoqda
Funksiyani eksport qilishdan oldin ma’lumotlar bazalariga ulanish
Shartli import yoki modulni ishga tushirish

Eng yaxshi amaliyotlar

Node.js da ES modullari bilan ishlashda quyidagi eng yaxshi amaliyotlarga amal qiling:

1. Fayl kengaytmalari haqida aniq bo‘ling

Mahalliy fayllar uchun import operatorlariga har doim fayl kengaytmalarini qo‘shing:

// Good
import { someFunction } from './utils.mjs';

// Bad - might not work depending on configuration
import { someFunction } from './utils';

2. Katalog indekslaridan to‘g‘ri foydalaning

Katalog importi uchun index.mjs fayllarini yarating:

// utils/index.mjs
export * from './string-utils.mjs';
export * from './number-utils.mjs';

// app.mjs
import { formatString, add } from './utils/index.mjs';

3. To‘g‘ri eksport uslubini tanlang

Bir nechta funksiya/qiymatlar uchun nomli eksportlardan va asosiy funksiyalar uchun standart eksportlardan foydalaning:

// For libraries with many utilities, use named exports
export function validate() { /* ... */ }
export function format() { /* ... */ }

// For components or classes that are the primary export
export default class UserService { /* ... */ }

4. CommonJS dan o‘tish jarayonini boshqaring

CommonJS va ES modullarini aralashtiradigan kodlar bazasi bilan ishlaganda:

ES modullari standart import yordamida CommonJS modullaridan import qilishi mumkin
CommonJS ES Modules’ni faqat dinamik import() yordamida require() qila oladi
Birgalikda ishlash uchun Node.js "modul" paketidagi moslik yordamchilaridan foydalaning

// Importing CommonJS module from ESM
import fs from 'fs'; // The default import is module.exports

// Importing ESM from CommonJS (Node.js 12+)
// In a CommonJS module:
(async () => {
const { default: myEsmModule } = await import('./my-esm-module.mjs');
})();

5. Ikki tomonlama paket xavfi (Dual Package Hazard)

Ikkala modul tizimini qo‘llab-quvvatlaydigan npm paketlari uchun turli xil kirish nuqtalarini belgilash uchun package.json faylidagi "eksportlar" maydonidan foydalaning:

{
  "name": "my-package",
  "exports": {
    ".": {
      "import": "./index.mjs",
      "require": "./index.cjs"
    }
  }
}

Node.js-ni qo‘llab-quvvatlash: ES modullari Node.js-da v12-dan beri to‘liq qo‘llab-quvvatlanadi, v14+ da yaxshiroq qo‘llab-quvvatlanadi.

Eski versiyalar uchun sizga Babel kabi transpiler kerak bo‘lishi mumkin.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish