Модулі JavaScript: import/export, CommonJS проти es модулів
Що таке модулі JavaScript?
Модулі дозволяють розділяти код на окремі файли, кожен з яких має свій власний контекст. Вони допомагають організувати код, запобігти конфліктам імен і забезпечити повторне використання.
ES Модулі (ESM)
Сучасний стандарт, підтримуваний у браузерах та Node.js.
Іменовані експорти
javascript
// math.js
export const PI = 3.14159;
export function add(a, b) { return a + b; }
export function multiply(a, b) { return a * b; }
// main.js
import { PI, add, multiply } from './math.js';
import { add as sum } from './math.js'; // перейменування
import * as math from './math.js'; // імпорт простору іменЕкспорт за замовчуванням
javascript
// User.js
export default class User {
constructor(name) { this.name = name; }
}
// main.js
import User from './User.js'; // будь-яка назва підходить
import MyUser from './User.js'; // те самеЗмішані експорти
javascript
// api.js
export const BASE_URL = "/api";
export default function fetchData(endpoint) {
return fetch(BASE_URL + endpoint);
}
// main.js
import fetchData, { BASE_URL } from './api.js';Повторний експорт
javascript
// index.js (файл бареля)
export { default as User } from './User.js';
export { default as Product } from './Product.js';
export * from './utils.js';CommonJS (CJS)
Система модулів Node.js (до ES модулів):
javascript
// math.js
const PI = 3.14159;
function add(a, b) { return a + b; }
module.exports = { PI, add };
// або: exports.PI = PI;
// main.js
const { PI, add } = require('./math');
const math = require('./math');Порівняння ESM та CommonJS
| Особливість | ES Модулі | CommonJS |
|---|---|---|
| Синтаксис | import/export | require()/module.exports |
| Завантаження | Статичне (під час компіляції) | Динамічне (під час виконання) |
| Top-level await | Так | Ні |
| Tree shaking | Так | Ні |
| Підтримка браузерами | Так (рідна) | Ні (потрібен бандлер) |
| Node.js | .mjs або "type": "module" | За замовчуванням у Node.js |
| Підйом | Імпорти піднімаються | Не піднімаються |
Динамічні імпорти
javascript
// Завантажити модуль за запитом (розділення коду)
const module = await import('./heavyModule.js');
module.doSomething();
// Умовне завантаження
if (condition) {
const { feature } = await import('./feature.js');
feature();
}
// Ліниве завантаження в React
const LazyComponent = React.lazy(() => import('./Component'));Область видимості модуля
Кожен модуль має свою власну область видимості — змінні, оголошені в модулі, не є глобальними:
javascript
// counter.js
let count = 0;
export const increment = () => ++count;
export const getCount = () => count;
// main.js
import { increment, getCount } from './counter.js';
increment(); // count дорівнює 1, але тільки всередині counter.jsВажливо:
Використовуйте ES Модулі для всіх сучасних проектів. Вони дозволяють виконувати tree shaking (видалення невикористовуваного коду), статичний аналіз і є стандартом. Використовуйте динамічний import() для розділення коду та лінивого завантаження.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.