Импорт и экспорт компонентов ES6 в React через index.js

Быстрый ответ

Для эффективного управления модулями в ES6 рекомендуется пользоваться пере-экспортом через центральный файл index.js:

// index.js
// Продуманно оформляем экспорт!
export { default as ModuleA } from './ModuleA'; // Экспорт по умолчанию
export * from './ModuleB'; // Все именованные экспорты готовы!

После этого вы можете осуществить импорт нужных модулей:

// Импорт в другом модуле
// Проявляем быстроту в действиях ⛩️
import { ModuleA, NamedExport1, NamedExport2 } from './index';

Такой подход значительно упрощает работу с модулями и придает структурированность коду.

Ясность при использовании именованных и экспортов по умолчанию

Именованный экспорт делает код прозрачным и облегчает поддержку модулей, включающих в себя много сущностей. В то время как экспорт по умолчанию используется, когда в модуле есть только один основной экспорт, который является главным среди прочих.

Искусство организации экспорта (или принцип 'DRY')

Стремитесь избегать дублирования экспорта, чтобы не вызывать путаницу. Считайте index.js хранителем порядка, который сводит и организует все экспорты для создания чистого API.

// Группируем экспорт: Одна большая дружная семья! 🎵
export { default as User } from './User';
export { Login, Logout } from './Authentication';

В файле-потребителе:

// Импорт одной строкой: 'Простота – залог искусства' – Леонардо Да Винчи 🎨
import { User, Login, Logout } from './components';

Взгляд в будущее с ES8

Несмотря на то, что ES6 является ключевым этапом, стоит ознакомиться с предложениями на будущее. Следуйте за современными изменениями в JavaScript, регулярно обновите свои знания на GitHub.

Визуализация

Представьте себе процессы экспорта и импорта в ES6 через индексный файл как центральный вокзал:

//🚉 Вокзал (index.js) – отправление поезда каждую секунду ⏱️
Вокзал (index.js)
|
|--🚂 Маршрут A = экспорт из 'moduleA'
|--🚂 Маршрут B = экспорт из 'moduleB'
|--🚂 Маршрут C = экспорт из 'moduleC'

Каждый маршрут предоставляет прямой доступ к экспортам из модуля.

// Пассажиры (другие модули), вы готовы к отбытию? 🎒
import { A, B, C } from 'Вокзал (index.js)';

🛄 A: Прибыл поезд с маршрута А
🛄 B: Прибыл поезд с маршрута B
🛄 C: Прибыл поезд с маршрута C

Пожелаем вам приятного путешествия в этом смысле кода! 🚉📦

Эффективное управление несколькими экспортами

Усложните структуру каталогов, объединив связанные файлы в едином месте, где index.js будет своеобразным бюфетом с централизованными экспортами, что сделает процесс импорта более прогнозируемым.

// Централизованные экспорты в папке index.js
// Место, где искусство остановилось во времени 🏡 🎲
export * from './Button';
export * from './TextInput';

Теперь импорт ваших компонентов пройдет быстро и безболезненно:

// Подача на блюде, настало время обеда! 🍽️
import { Button, TextInput } from '../components/shared';

Комбинация различных видов экспортов

Возможна ситуация, когда грань между именованными и экспортами по умолчанию не так очевидна. Воспользуйтесь комбинацией обоих подходов, чтобы облегчить процесс:

// Комбинируем преимущества обоих подходов 🌗
export { default as DefaultComponent, namedExport1, namedExport2 } from './MyComponent';

Такой подход сделает ваши импорты стандартными и предсказуемыми.

Стратегия на долгую перспективу: гармония ES6 с новейшими технологиями

ES6 значительно упростила работу с модулями, но не забывайте изучать новые технологии вне привычного ES6. Следите за такими технологиями, как Webpack Module Federation и динамический импорт, чтобы оставаться в тренде разработки!

Полезные материалы

1. MDN Web Docs – Export — Обширный источник знаний о операторе экспорта в JavaScript.
2. MDN Web Docs – Import — Все, что вам следует знать о операторе импорта.
3. Exploring JS – Modules — Подробное изложение о модулях ES6.
4. Understanding ES6 Modules — SitePoint — Узнайте о мощи синтаксиса модулей в ES6.
5. Webpack Module Federation — Ознакомьтесь с федерацией модулей, новым понятием в веб-разработке.
6. Babel – Learn ES2015: Modules — Дополнительные знания о модулях ES2015 от Babel.
7. ES2020: import() — Встречаем будущее с динамическими импортами модулей в ES2020.