Як реалізувати патерн «Модуль»?

Повне пояснення

Що це і навіщо Модуль у JavaScript – ізольований простір, що дозволяє розділити код на логічні частини, забезпечуючи контроль видимості і повторного використання.

Ключові принципи

• Експортування (export) – оголошує, що саме доступно зовні.
• Імпорт (import) – підключає потрібний API.
• Локальна область видимості – змінні, функції без експорту залишаються приватними.

Як це працює

1. При виконанні файлу модуль створюється окремий контекст.
2. export формує експортований об’єкт, який інші модулі отримують через import.
3. Браузер або Node.js обробляють залежності, формуючи граф модулів.

Практика і реалізація

• ES‑модулі (ESM) – синтаксис import/export. Підтримується у сучасних браузерах і Node.js (з розширенням .js або type="module").
• CommonJS – синтаксис require/module.exports. Використовується в Node.js.

Приклад ES‑модуля

// math.js
export const add = (a, b) => a + b;
export function mul(a, b) { return a * b; }

// main.js
import { add, mul } from './math.js';
console.log(add(2,3)); // 5

Тестування

// math.test.js (Vitest)
import { describe, it, expect } from 'vitest';
import { add } from './math.js';

describe('add', () => {
  it('adds numbers', () => {
    expect(add(1,2)).toBe(3);
  });
});

Безпека і приватність

• Публічний API оголошується явно, що зменшує ризик неочікуваного доступу.
• У CommonJS можна експортувати лише потрібні частини, залишаючи інші внутрішні.

Оптимізація

• Tree‑shaking у bundlers (Webpack, Rollup) видаляє неекспортовані частини.
• Lazy loading (import()), щоб завантажувати модуль лише при потребі.

Часті помилки

1. Поганий шлях до файлу → Module not found.
2. Відсутність type="module" у Node.js → синтаксична помилка.
3. Випадкове використання require у ESM → SyntaxError.
4. Експорт двох різних API з одного файлу → конфлікт імен.
5. Неочікуваний глобальний стан через var у модулі.
6. Підключення модуля з неправильним розширенням (.ts у JS‑проекті).
7. Застарілі export default → неочікуваний тип.
8. Відсутність package.json з полем exports → недоступний модуль.

Cheatsheet

• export const foo = ...;
• export default function() {}
• import foo from './foo.js';
• import * as utils from './utils.js';

Follow‑up питання

• Як працює tree‑shaking у Rollup? – відповісти про статичний аналіз.
• Чому require не працює у файлі з type="module"? – пояснити різницю між ESM і CommonJS.