Перейти к содержимому
JS
16 / 33

Что такое модули в JavaScript?

Полный ответ

До появления модулей в JavaScript все скрипты подключались через <script> и жили в одном глобальном пространстве. Два файла могли случайно перезаписать переменные друг друга:

JavaScript
// utils.js
var name = "Utils";

// app.js
var name = "App"; // перезаписали name из utils.js — молча, без ошибок

Модули решают эту проблему. Каждый модуль — отдельная изолированная среда:

JavaScript
// math.js

export function add(a, b) {
  return a + b;
}

export const PI = 3.14159;

// app.js
import { add, PI } from "./math.js";

console.log(add(2, 3)); // 5
console.log(PI); // 3.14159

Ключевые свойства модулей:

JavaScript
// 1. Свой скоуп — переменные не утекают наружу
// secret.js
const apiKey = "abc123";

export function getUser() {
  /* ... */
} // apiKey недоступен снаружи — только getUser

// 2. Строгий режим по умолчанию
// module.js
x = 10; // ReferenceError: x is not defined (нет var/let/const)

// 3. Выполняется один раз, результат кэшируется
// config.js
console.log("Config loaded"); // выведется один раз, даже если импортируется в 10 файлах
export const config = { debug: true };

// 4. Подключение в браузере
// <script type="module" src="app.js"></script>

Реальные кейсы

Организация проекта:

JavaScript
// models/user.js — модель пользователя

export class User { /* ... */ }

// services/auth.js — сервис аутентификации
import { User } from "../models/user.js";

export function login(email, password) { /* ... */ }

// app.js — точка входа
import { login } from "./services/auth.js";

Типичная ошибка — забыть type="module" в HTML:

HTML
<!-- ❌ Не работает: import не распознан -->
<script src="app.js">
</script>
<!-- ✅ Работает -->
<script type="module" src="app.js">
</script>

Резюме

Модули дают изоляцию, явные зависимости и строгий режим из коробки. Без них крупный проект превращается в кашу из глобальных переменных. Сегодня это стандартный способ организации кода как в браузере, так и в Node.js.

Что такое модули в JavaScript? | JScriptiser