M

MLOG

Svenska

Utforska skillnaderna mellan CommonJS och ES-moduler, de två dominerande modulsystemen i JavaScript, med praktiska exempel och insikter för modern webbutveckling.

Modulsystem: CommonJS kontra ES-moduler - En omfattande guide

I den ständigt föränderliga världen av JavaScript-utveckling är modularitet en hörnsten i att bygga skalbara och underhållbara applikationer. Två modulsystem har historiskt dominerat landskapet: CommonJS och ES-moduler (ESM). Att förstå deras skillnader, fördelar och nackdelar är avgörande för alla JavaScript-utvecklare, oavsett om de arbetar med front-end med ramverk som React, Vue eller Angular, eller på back-end med Node.js.

Vad är modulsystem?

Ett modulsystem tillhandahåller ett sätt att organisera kod i återanvändbara enheter som kallas moduler. Varje modul inkapslar en specifik funktionalitet och exponerar endast de delar som andra moduler behöver använda. Detta tillvägagångssätt främjar återanvändning av kod, minskar komplexiteten och förbättrar underhållbarheten. Tänk på moduler som byggstenar; varje block har ett specifikt syfte, och du kan kombinera dem för att skapa större, mer komplexa strukturer.

Fördelar med att använda modulsystem:

CommonJS: Node.js-standarden

CommonJS framträdde som standardmodulsystemet för Node.js, den populära JavaScript-körmiljön för server-side utveckling. Det utformades för att åtgärda bristen på ett inbyggt modulsystem i JavaScript när Node.js först skapades. Node.js antog CommonJS som sitt sätt att organisera kod. Detta val hade en djupgående inverkan på hur JavaScript-applikationer byggdes på server-side.

Viktiga funktioner i CommonJS:

CommonJS Syntax:

Här är ett exempel på hur CommonJS används:

Modul (math.js):

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

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

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

Användning (app.js):

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

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

Fördelar med CommonJS:

Nackdelar med CommonJS:

ES-moduler (ESM): Det standardiserade JavaScript-modulsystemet

ES-moduler (ESM) är det officiella standardiserade modulsystemet för JavaScript, introducerat med ECMAScript 2015 (ES6). De syftar till att tillhandahålla ett konsekvent och effektivt sätt att organisera kod i både Node.js och webbläsaren. ESM ger inbyggt modulstöd till själva JavaScript-språket, vilket eliminerar behovet av externa bibliotek eller byggverktyg för att hantera modularitet.

Viktiga funktioner i ES-moduler:

ES-moduler Syntax:

Här är ett exempel på hur ES-moduler används:

Modul (math.js):

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

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

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

Användning (app.js):

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

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

Namngivna exporter vs. Standardexporter:

ES-moduler stöder både namngivna och standardexporter. Namngivna exporter låter dig exportera flera värden från en modul med specifika namn. Standardexporter låter dig exportera ett enda värde som standardexporten av en modul.

Namngivet exportexempel (utils.js):

// utils.js
export function formatCurrency(amount, currencyCode) {
 // Format the amount according to the currency code
 // Example: formatCurrency(1234.56, 'USD') might return '$1,234.56'
 // Implementation depends on desired formatting and available libraries
 return new Intl.NumberFormat('en-US', { style: 'currency', currency: currencyCode }).format(amount);
}

export function formatDate(date, locale) {
 // Format the date according to the locale
 // Example: formatDate(new Date(), 'fr-CA') might return '2024-01-01'
 return new Intl.DateTimeFormat(locale).format(date);
}

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

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

console.log(price); // Output: €19.99
console.log(today); // Output: (varies based on date)

Standardexportexempel (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));

Fördelar med ES-moduler:

Nackdelar med ES-moduler:

CommonJS vs. ES-moduler: En detaljerad jämförelse

Här är en tabell som sammanfattar de viktigaste skillnaderna mellan CommonJS och ES-moduler:

Funktion CommonJS ES-moduler
Import Syntax require() import
Export Syntax module.exports export
Loading Synchronous Asynchronous (in browsers), Synchronous/Asynchronous in Node.js
Static Analysis No Yes
Native Browser Support No Yes
Primary Use Case Node.js (historiskt) Browsers and Node.js (modern)

Praktiska exempel och användningsfall

Exempel 1: Skapa en återanvändbar verktygsmodul (Internationalisering)

Låt oss säga att du bygger en webbapplikation som behöver stödja flera språk. Du kan skapa en återanvändbar verktygsmodul för att hantera internationalisering (i18n).

ES-moduler (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'; // Example: User selected French
const greeting = getTranslation('greeting', language);
console.log(greeting); // Output: Bonjour, le monde !

Exempel 2: Bygga en modulär API-klient (REST API)

När du interagerar med ett REST API kan du skapa en modulär API-klient för att inkapsla API-logiken.

ES-moduler (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('Error fetching users:', error));

post('/users', { name: 'John Doe', email: 'john.doe@example.com' })
 .then(newUser => console.log('New user created:', newUser))
 .catch(error => console.error('Error creating user:', error));

Migrera från CommonJS till ES-moduler

Att migrera från CommonJS till ES-moduler kan vara en komplex process, särskilt i stora kodbaser. Här är några strategier att överväga:

Node.js och ES-moduler:

Node.js har utvecklats för att fullt ut stödja ES-moduler. Du kan använda ES-moduler i Node.js genom att:

Välja rätt modulsystem

Valet mellan CommonJS och ES-moduler beror på dina specifika behov och miljön där du utvecklar:

Slutsats

Att förstå skillnaderna mellan CommonJS och ES-moduler är avgörande för alla JavaScript-utvecklare. Medan CommonJS historiskt sett har varit standarden för Node.js, blir ES-moduler snabbt det bästa valet för både webbläsare och Node.js på grund av deras standardiserade natur, prestandafördelar och stöd för statisk analys. Genom att noggrant överväga ditt projekts behov och miljön där du utvecklar kan du välja det modulsystem som bäst passar dina krav och bygga skalbara, underhållbara och effektiva JavaScript-applikationer.

Eftersom JavaScript-ekosystemet fortsätter att utvecklas är det avgörande för framgång att hålla sig informerad om de senaste modulsystemtrenderna och bästa praxis. Fortsätt att experimentera med både CommonJS och ES-moduler och utforska de olika verktyg och tekniker som finns tillgängliga för att hjälpa dig att bygga modulär och underhållbar JavaScript-kod.

Modulsystem: CommonJS kontra ES-moduler - En omfattande guide | MLOG