Модули: import и export
Разделяйте код на ES-модули с именованными экспортами и экспортом по умолчанию, импортируйте только нужное и разбирайтесь, как сборщики модулей разрешают граф зависимостей.
«Модули: import и export» — бесплатный урок Frontend Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.
Зачем нужны модули
До появления модулей весь JavaScript выполнялся в глобальной области видимости. Имена переменных конфликтовали. Порядок кода имел значение. Файлы приходилось загружать последовательно. Модули ES дают каждому файлу собственную область видимости, явные импорты и экспорты, пригодные для удаления неиспользуемого кода при сборке.
Именованные экспорты
Экспортируйте отдельные значения с помощью ключевого слова export. В одном файле может быть много именованных экспортов. Пользователи модуля импортируют именно то, что им нужно.
// utils.js
export const PI = 3.14159;
export function add(a, b) {
return a + b;
}
export class Vector {
constructor(x, y) { this.x = x; this.y = y; }
}Именованные импорты
Импортируйте именованные экспорты с помощью фигурных скобок. Из одного модуля можно импортировать несколько экспортов в одном выражении.
import { PI, add, Vector } from './utils.js';
console.log(PI); // 3.14159
console.log(add(2, 3)); // 5Экспорты по умолчанию
Каждый модуль может иметь один экспорт по умолчанию — обычно это основная сущность, которую предоставляет модуль. Импортируйте её без фигурных скобок и присваивайте ей любое имя.
// Button.js
export default function Button({ label }) {
return `<button>${label}</button>`;
}
// Importing:
import Button from './Button.js';
import MyButton from './Button.js'; // any name worksПовторный экспорт
Модуль может повторно экспортировать сущности из других модулей, создавая сводный файл — единую точку входа, которая повторно экспортирует несколько сущностей.
// components/index.js
export { default as Button } from './Button.js';
export { default as Input } from './Input.js';
export { default as Modal } from './Modal.js';
// Consumer:
import { Button, Input, Modal } from './components';Импорты пространства имён
Импортируйте всё из модуля в объект пространства имён с помощью import * as name. Это удобно, когда Вам нужно много экспортов или Вы хотите явно указать их источник.
import * as utils from './utils.js';
console.log(utils.PI); // 3.14159
console.log(utils.add(1, 2)); // 3Импорты только ради побочных эффектов
Некоторые модули импортируются исключительно ради побочных эффектов (полифилов, регистрации обработчиков событий). Импортируйте их без связывания с именем.
import './polyfills.js'; // runs the code, imports nothingДинамический import() — разделение кода
Динамическая функция import() возвращает Promise. Используйте её для отложенной загрузки модуля — только тогда, когда он нужен. Сборщики автоматически создают отдельный фрагмент для динамически импортируемых модулей.
// Load a heavy module only when the button is clicked:
button.addEventListener('click', async () => {
const { processFile } = await import('./fileProcessor.js');
processFile(data);
});import.meta
import.meta — специальный объект, доступный внутри модулей. import.meta.url — URL модуля. Vite использует import.meta.env для переменных окружения.
// Vite environment variables:
console.log(import.meta.env.VITE_API_URL);
console.log(import.meta.env.MODE); // 'development' or 'production'Разрешение модулей
Сборщики, такие как Vite, разрешают модули из файловой системы (относительные пути вроде './utils'), из node_modules ('lodash') или по псевдонимам путей ('@/components', настроенным в vite.config.js).
CommonJS и ES Modules
Изначально Node.js использовал CommonJS (require / module.exports). В браузере используются ES Modules (import / export). Современный Node.js также поддерживает ES Modules с параметром type: "module" в package.json.
// CommonJS (Node.js, older tooling):
const fs = require('fs');
module.exports = { myFunc };
// ES Modules (modern):
import fs from 'fs';
export { myFunc };Быстрая проверка
Каково главное преимущество использования dynamic import() по сравнению со статическим импортом?
Повторение: ES Modules
Именованные экспорты и импорты используются для нескольких значений. Экспорт и импорт по умолчанию — для основной сущности. Повторные экспорты создают сводные файлы. Динамический import() обеспечивает отложенную загрузку и разделение кода. import.meta предоставляет метаданные модуля. Сборщики разрешают псевдонимы, node_modules и относительные пути.
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 41
- Уроки
- 163
Часто задаваемые вопросы
Урок «Модули: import и export» бесплатный?
Да — полный текст урока «Модули: import и export» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.
Чему я научусь в уроке «Модули: import и export»?
Разделяйте код на ES-модули с именованными экспортами и экспортом по умолчанию, импортируйте только нужное и разбирайтесь, как сборщики модулей разрешают граф зависимостей. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Frontend Academy?
Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Модули: import и export»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Frontend Academy?
Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Методы массивов: map, filter, reduce, find
- Деструктуризация и spread для объектов
- Шаблонные строки и optional chaining
- Модули: import и export