Skip to content
17 / 33

Π’ Ρ‡Ρ‘ΠΌ Ρ€Π°Π·Π½ΠΈΡ†Π° ΠΌΠ΅ΠΆΠ΄Ρƒ CommonJS ΠΈ ES Modules?


ΠŸΠΎΠ»Π½Ρ‹ΠΉ ΠΎΡ‚Π²Π΅Ρ‚

Π”Π²Π΅ систСмы Π΄Π΅Π»Π°ΡŽΡ‚ ΠΎΠ΄Π½ΠΎ ΠΈ Ρ‚ΠΎ ΠΆΠ΅ β€” экспорт ΠΈ ΠΈΠΌΠΏΠΎΡ€Ρ‚ ΠΊΠΎΠ΄Π°, β€” Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ ΠΏΠΎ-Ρ€Π°Π·Π½ΠΎΠΌΡƒ:

JavaScript
// === CommonJS ===
// math.js

function add(a, b) {
  return a + b;
}
module.exports = { add };

// app.js
const { add } = require("./math");
console.log(add(2, 3)); // 5

JavaScript
// === ES Modules ===
// math.js

export function add(a, b) {
  return a + b;
}

// app.js
import { add } from "./math.js";
console.log(add(2, 3)); // 5

ΠšΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ различия:

JavaScript
// 1. БИНΠ₯РОННОБВЬ vs АБИНΠ₯РОННОБВЬ

// CJS β€” синхронный, Π±Π»ΠΎΠΊΠΈΡ€ΡƒΠ΅Ρ‚ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅
const fs = require("fs"); // ΠΊΠΎΠ΄ ΠΆΠ΄Ρ‘Ρ‚, ΠΏΠΎΠΊΠ° ΠΌΠΎΠ΄ΡƒΠ»ΡŒ загрузится

// ESM β€” асинхронный, парсит зависимости Π·Π°Ρ€Π°Π½Π΅Π΅
import fs from "node:fs"; // зависимости извСстны Π΄ΠΎ выполнСния

// 2. Π”Π˜ΠΠΠœΠ˜Π§Π•Π‘ΠšΠ˜Π™ vs Π‘Π’ΠΠ’Π˜Π§Π•Π‘ΠšΠ˜Π™ require

// CJS β€” ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ require() Π² любом мСстС
if (needsDatabase) {
  const db = require("./db"); // загрузится Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ссли условиС true
}

// ESM β€” import Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅ (для Π΄ΠΈΠ½Π°ΠΌΠΈΠΊΠΈ Π΅ΡΡ‚ΡŒ import())
import { db } from "./db.js"; // всСгда Π½Π° Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅
// динамичСский Π²Π°Ρ€ΠΈΠ°Π½Ρ‚:
if (needsDatabase) {
  const { db } = await import("./db.js");
}

// 3. ЭКБПОРВ β€” КОПИЯ vs Π–Π˜Π’ΠΠ― Π‘Π‘Π«Π›ΠšΠ

// CJS β€” экспортируСт копию значСния
// counter.js
let count = 0;
module.exports = { count, increment: () => ++count };

// app.js (CJS)
const counter = require("./counter");
counter.increment();
console.log(counter.count); // 0 β€” копия Π½Π΅ обновилась!

// ESM β€” экспортируСт ΠΆΠΈΠ²ΡƒΡŽ привязку (live binding)
// counter.js
export let count = 0;

export function increment() { count++; }

// app.js (ESM)
import { count, increment } from "./counter.js";
increment();
console.log(count); // 1 β€” Тивая ссылка обновилась

Как Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ESM Π² Node.js:

JSON
// package.json β€” способ 1: для всСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°
{
  "type": "module"
}

// Бпособ 2: Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ Ρ„Π°ΠΉΠ»Π°
// .mjs β€” всСгда ESM
// .cjs β€” всСгда CJS

Π Π΅Π°Π»ΡŒΠ½Ρ‹Π΅ кСйсы

Π‘ΠΎΠ²ΠΌΠ΅ΡΡ‚ΠΈΠΌΠΎΡΡ‚ΡŒ β€” Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°, которая ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΎΠ±Π° Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°:

JSON
// package.json
{
  "main": "./dist/index.cjs",
  "module": "./dist/index.mjs",
  "exports": {
    ".": {
      "import": "./dist/index.mjs",
      "require": "./dist/index.cjs"
    }
  }
}

Ошибки ΠΏΡ€ΠΈ смСшивании:

JavaScript
// ❌ require() Π² ESM-Ρ„Π°ΠΉΠ»Π΅ β€” Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚
import { readFile } from "node:fs";
const lodash = require("lodash"); // ReferenceError: require is not defined

// βœ… Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉ import ΠΈΠ»ΠΈ createRequire
import { createRequire } from "node:module";
const require = createRequire(import.meta.url);
const lodash = require("lodash"); // Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚

РСзюмС

CJS β€” наслСдиС Node.js, синхронный, Π³ΠΈΠ±ΠΊΠΈΠΉ, Π½ΠΎ Π½Π΅ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΡƒΠ΅ΠΌΡ‹ΠΉ. ESM β€” стандарт языка, статичСский, с ΠΆΠΈΠ²Ρ‹ΠΌΠΈ привязками ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ tree shaking. НовыС ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ стоит ΠΏΠΈΡΠ°Ρ‚ΡŒ Π½Π° ESM, Π° CJS ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ для ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΉ совмСстимости.

Π’ Ρ‡Ρ‘ΠΌ Ρ€Π°Π·Π½ΠΈΡ†Π° ΠΌΠ΅ΠΆΠ΄Ρƒ CommonJS ΠΈ ES Modules? | JScriptiser