Как подключить один JavaScript файл внутри другого? Импорт и экспорт кода

Современный способ: ES-модули (import / export)

Начиная с ES6 (2015 год) в JavaScript появилась встроенная модульная система, которая работает и в браузерах, и в Node.js. Это самый правильный и рекомендуемый подход для организации кода.

Шаг 1. Экспортируйте функцию из utils.js

Добавьте ключевое слово export перед объявлением функции:

// utils.js
export function formatDate(date) {
  const options = { year: 'numeric', month: 'long', day: 'numeric' };
  return date.toLocaleDateString('ru-RU', options);
}

Вы также можете экспортировать несколько функций или переменных:

// utils.js
export function formatDate(date) { /* ... */ }
export const PI = 3.14159;
export function greet(name) { return `Привет, ${name}!`; }

Шаг 2. Импортируйте в script.js

// script.js
import { formatDate } from './utils.js';

const today = new Date();
console.log(formatDate(today)); // Работает!

Шаг 3. Подключите главный скрипт в HTML с атрибутом type="module"

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Модули в JS</title>
</head>
<body>
  <!-- Важно: type="module" -->
  <script type="module" src="script.js"></script>
</body>
</html>

Важные моменты про модули

• Относительный путь: В импорте обязательно указывайте ./ (текущая папка) или ../ (родительская папка). Просто 'utils.js' не сработает.
• Расширение файла: В браузере нужно указывать полное имя файла с расширением .js.
• Строгий режим: Модули автоматически работают в strict mode. Переменные не попадают в глобальную область видимости.
• Один раз выполняется: Если вы импортируете один и тот же модуль в нескольких файлах, его код выполнится только один раз.
• Работа через сервер: Модули не работают с локальными файлами через file://. Используйте локальный сервер (например, npx serve, live-server в VS Code или просто откройте через Python: python -m http.server).

Альтернатива: экспорт по умолчанию (default export)

Если у вас в файле только одна главная функция или класс, удобно использовать экспорт по умолчанию:

// utils.js
export default function formatDate(date) {
  // ...
}

// script.js
import formatDate from './utils.js'; // без фигурных скобок

Смешанный экспорт

Можно комбинировать именованные экспорты и экспорт по умолчанию:

// utils.js
export default function formatDate(date) { /* ... */ }
export const PI = 3.14159;

// script.js
import formatDate, { PI } from './utils.js';

Используйте модули всегда, когда пишете современный JavaScript. Это делает код чистым, предсказуемым и удобным для поддержки.

<script src="utils.js"></script>
<script src="script.js"></script>

// utils.js
function formatDate(date) {
  // ...
}
// Всё, что объявлено так, становится глобальным