Przejdź do głównej zawartości

27. Moduły JavaScript — import/export, ESM vs CommonJS

Moduły — organizacja kodu JavaScript

Moduły JavaScript (ESM — ECMAScript Modules) pozwalają dzielić kod na pliki z jawnym eksportowaniem i importowaniem. Zastąpiły starszy format CommonJS (require/module.exports) w Node.js. Każdy plik React jest modułem ESM.

Każdy plik .js i .jsx w projekcie React jest modułem. import React from 'react', import { useState } from 'react', export default function App() — to moduły. Zrozumienie named vs default export eliminuje wiele błędów importu.

  1. Wyjaśnić czym są moduły i dlaczego były potrzebne
  2. Opisać named export i default export — różnice
  3. Omówić różnice ESM vs CommonJS
  4. Pokazać dynamic import() dla lazy loading
  1. Named exportexport const fn, import { fn } from './module'
  2. Default exportexport default Component, import Component from './Component'
  3. Re-exportexport { fn } from './utils', barrel files
  4. ESM vs CommonJS — różnice syntaktyczne i semantyczne
  5. Dynamic import() — lazy loading, code splitting

Przykład 1

Named exports i imports — plik utils.js z wieloma funkcjami, selektywny import.

Przykład 2

Default vs named — React component default export + named exports hooks/utils.

Przykład 3

Dynamic import() — leniwe ładowanie komponentu React (React.lazy).

  1. Wstęp — historia: IIFE → CommonJS → ESM
  2. Rozdział 1: Named i default export/import
  3. Rozdział 2: ESM vs CommonJS
  4. Rozdział 3: Dynamic import i praktyki
  5. Podsumowanie
  6. Bibliografia

Moduły organizują każdy projekt React!

Pokaż strukturę plików projektu React i omów jak import/export łączy wszystkie pliki. Diagram zależności modułów jest świetnym elementem graficznym.