M

MLOG

Polski

Poznaj różnice między CommonJS a ES Modułami, dwoma dominującymi systemami modułów w JavaScript, z praktycznymi przykładami.

Systemy Modułów: CommonJS vs. ES Moduły - Kompleksowy Przewodnik

W stale ewoluującym świecie tworzenia aplikacji w języku JavaScript, modularność jest podstawą budowania skalowalnych i łatwych w utrzymaniu aplikacji. Dwa systemy modułów historycznie dominowały na rynku: CommonJS i ES Moduły (ESM). Zrozumienie ich różnic, zalet i wad jest kluczowe dla każdego developera JavaScript, niezależnie od tego, czy pracuje nad front-endem z frameworkami takimi jak React, Vue, czy Angular, czy też nad back-endem z Node.js.

Czym są Systemy Modułów?

System modułów zapewnia sposób organizacji kodu w reużywalne jednostki zwane modułami. Każdy moduł hermetyzuje określoną część funkcjonalności i udostępnia tylko te części, z których inne moduły mogą korzystać. Takie podejście promuje ponowne wykorzystanie kodu, zmniejsza złożoność i poprawia łatwość utrzymania. Pomyśl o modułach jak o klockach konstrukcyjnych; każdy klocek ma określony cel, a Ty możesz je łączyć, aby tworzyć większe, bardziej złożone struktury.

Korzyści z Używania Systemów Modułów:

CommonJS: Standard Node.js

CommonJS wyłonił się jako standardowy system modułów dla Node.js, popularnego środowiska uruchomieniowego JavaScript do tworzenia aplikacji po stronie serwera. Został zaprojektowany w celu rozwiązania braku wbudowanego systemu modułów w języku JavaScript, gdy Node.js był tworzony. Node.js przyjął CommonJS jako swój sposób organizacji kodu. Ten wybór miał ogromny wpływ na sposób budowania aplikacji JavaScript po stronie serwera.

Kluczowe Cechy CommonJS:

Składnia CommonJS:

Oto przykład użycia CommonJS:

Moduł (math.js):

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

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

module.exports = {
 add: add,
 subtract: subtract
};

Użycie (app.js):

// app.js
const math = require('./math');

console.log(math.add(5, 3)); // Wyjście: 8
console.log(math.subtract(10, 4)); // Wyjście: 6

Zalety CommonJS:

Wady CommonJS:

ES Moduły (ESM): Standaryzowany System Modułów JavaScript

ES Moduły (ESM) to oficjalny, standaryzowany system modułów dla języka JavaScript, wprowadzony wraz z ECMAScript 2015 (ES6). Mają na celu zapewnienie spójnego i wydajnego sposobu organizacji kodu zarówno w Node.js, jak i w przeglądarce. ESM wprowadzają natywne wsparcie modułów do samego języka JavaScript, eliminując potrzebę zewnętrznych bibliotek lub narzędzi do budowania w celu obsługi modularności.

Kluczowe Cechy ES Modułów:

Składnia ES Modułów:

Oto przykład użycia ES Modułów:

Moduł (math.js):

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

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

// Lub, alternatywnie:
// function add(a, b) {
//  return a + b;
// }
// function subtract(a, b) {
//  return a - b;
// }
// export { add, subtract };

Użycie (app.js):

// app.js
import { add, subtract } from './math.js';

console.log(add(5, 3)); // Wyjście: 8
console.log(subtract(10, 4)); // Wyjście: 6

Eksporty Nazwane vs. Eksporty Domyślne:

ES Moduły obsługują zarówno eksporty nazwane, jak i domyślne. Eksporty nazwane pozwalają na eksportowanie wielu wartości z modułu z określonymi nazwami. Eksporty domyślne pozwalają na wyeksportowanie pojedynczej wartości jako domyślnego eksportu modułu.

Przykład Eksportu Nazwanego (utils.js):

// utils.js
export function formatCurrency(amount, currencyCode) {
 // Formatuj kwotę zgodnie z kodem waluty
 // Przykład: formatCurrency(1234.56, 'USD') może zwrócić '$1,234.56'
 // Implementacja zależy od pożądanego formatowania i dostępnych bibliotek
 return new Intl.NumberFormat('en-US', { style: 'currency', currency: currencyCode }).format(amount);
}

export function formatDate(date, locale) {
 // Formatuj datę zgodnie z lokalizacją
 // Przykład: formatDate(new Date(), 'fr-CA') może zwrócić '2024-01-01'
 return new Intl.DateTimeFormat(locale).format(date);
}

// app.js
import { formatCurrency, formatDate } from './utils.js';

const price = formatCurrency(19.99, 'EUR'); // Europa
const today = formatDate(new Date(), 'ja-JP'); // Japonia

console.log(price); // Wyjście: €19.99
console.log(today); // Wyjście: (zmienne w zależności od daty)

Przykład Eksportu Domyślnego (api.js):

// api.js
const api = {
 fetchData: async (url) => {
 const response = await fetch(url);
 return response.json();
 }
};

export default api;

// app.js
import api from './api.js';

api.fetchData('https://example.com/data')
 .then(data => console.log(data));

Zalety ES Modułów:

Wady ES Modułów:

CommonJS vs. ES Moduły: Szczegółowe Porównanie

Oto tabela podsumowująca kluczowe różnice między CommonJS a ES Modułami:

Cecha CommonJS ES Moduły
Składnia Importu require() import
Składnia Eksportu module.exports export
Ładowanie Synchroniczne Asynchroniczne (w przeglądarkach), Synchroniczne/Asynchroniczne w Node.js
Analiza Statyczna Nie Tak
Natywne Wsparcia w Przeglądarce Nie Tak
Główny Przypadek Użycia Node.js (historycznie) Przeglądarki i Node.js (nowoczesne)

Praktyczne Przykłady i Przypadki Użycia

Przykład 1: Tworzenie Modułu Narzędziowego Wielokrotnego Użytku (Internacjonalizacja)

Załóżmy, że tworzysz aplikację internetową, która musi obsługiwać wiele języków. Możesz stworzyć moduł narzędziowy wielokrotnego użytku do obsługi internacjonalizacji (i18n).

ES Moduły (i18n.js):

// i18n.js
const translations = {
 'en': {
 'greeting': 'Hello, world!'
 },
 'fr': {
 'greeting': 'Bonjour, le monde !'
 },
 'es': {
 'greeting': '¡Hola, mundo!'
 }
};

export function getTranslation(key, language) {
 return translations[language][key] || key;
}

// app.js
import { getTranslation } from './i18n.js';

const language = 'fr'; // Przykład: Użytkownik wybrał francuski
const greeting = getTranslation('greeting', language);
console.log(greeting); // Wyjście: Bonjour, le monde !

Przykład 2: Budowanie Modularnego Klienta API (REST API)

Podczas interakcji z API REST możesz stworzyć modularnego klienta API, aby hermetyzować logikę API.

ES Moduły (apiClient.js):

// apiClient.js
const API_BASE_URL = 'https://api.example.com';

async function get(endpoint) {
 const response = await fetch(`${API_BASE_URL}${endpoint}`);
 if (!response.ok) {
 throw new Error(`HTTP error! status: ${response.status}`);
 }
 return response.json();
}

async function post(endpoint, data) {
 const response = await fetch(`${API_BASE_URL}${endpoint}`, {
 method: 'POST',
 headers: {
 'Content-Type': 'application/json'
 },
 body: JSON.stringify(data)
 });
 if (!response.ok) {
 throw new Error(`HTTP error! status: ${response.status}`);
 }
 return response.json();
}

export { get, post };

// app.js
import { get, post } from './apiClient.js';

get('/users')
 .then(users => console.log(users))
 .catch(error => console.error('Błąd podczas pobierania użytkowników:', error));

post('/users', { name: 'John Doe', email: 'john.doe@example.com' })
 .then(newUser => console.log('Nowy użytkownik utworzony:', newUser))
 .catch(error => console.error('Błąd podczas tworzenia użytkownika:', error));

Migracja z CommonJS do ES Modułów

Migracja z CommonJS do ES Modułów może być złożonym procesem, zwłaszcza w dużych bazach kodu. Oto kilka strategii do rozważenia:

Node.js i ES Moduły:

Node.js ewoluował, aby w pełni obsługiwać ES Moduły. Możesz używać ES Modułów w Node.js przez:

Wybór Właściwego Systemu Modułów

Wybór między CommonJS a ES Modułami zależy od Twoich specyficznych potrzeb i środowiska, w którym tworzysz:

Wnioski

Zrozumienie różnic między CommonJS a ES Modułami jest niezbędne dla każdego developera JavaScript. Chociaż CommonJS historycznie był standardem dla Node.js, ES Moduły szybko stają się preferowanym wyborem zarówno dla przeglądarek, jak i Node.js ze względu na ich standaryzację, korzyści wydajnościowe i wsparcie dla analizy statycznej. Starannie rozważając potrzeby projektu i środowisko, w którym tworzysz, możesz wybrać system modułów, który najlepiej odpowiada Twoim wymaganiom i budować skalowalne, łatwe w utrzymaniu i wydajne aplikacje JavaScript.

W miarę ewolucji ekosystemu JavaScript, pozostawanie na bieżąco z najnowszymi trendami systemów modułów i najlepszymi praktykami jest kluczowe dla sukcesu. Kontynuuj eksperymentowanie z CommonJS i ES Modułami, a także eksploruj różne narzędzia i techniki dostępne, aby pomóc Ci budować modułowy i łatwy w utrzymaniu kod JavaScript.