Почему нельзя использовать
Быстрый ответ
Использование export default const
противоречит правилам синтаксиса JavaScript, так как export default
не используйте совместно с const
. Для корректного экспорта константы сначала объявите её, а потом экспортируйте, либо экспортируйте анонимную функцию или класс с помощью export default
.
Предварительное объявление перед экспортом:
const Tab = "Ваше значение";
export default Tab; // И вот ваше значение экспортировано как значение по умолчанию
Прямой экспорт значения:
export default "Ваше значение"; // Эффективность: все в одну строку
Разберем export default
В модулях JavaScript export default
отмечает "главный" или "резервный" экспорт. Воспринимайте "default" как метку, показывающую, что при импорте нужное значение будет тянуться без использования фигурных скобок.
Подробнее о export default
- Неизменяемость:
export default
не делает значение неизменяемым. Это отличает его отconst
. - Именование: Экспорт по умолчанию не требует локального имени после экспорта, что дает возможность импортировать его под любым названием.
- Уникальность: В модуле может быть только один
export default
, в то время как именованных экспортов может быть множество.
Профессиональное использование export default
- Сначала объявляем: Сначала определите переменные, функции или классы перед их экспортом по умолчанию.
- Именованные функции: Несмотря на то что экспорт бесымянных функций допустим, давая имя функции, вы облегчаете отладку и отслеживание стека вызовов.
- Смешивание экспортов: Можно совмещать
default
и именованные экспорты, указывая основной экспорт и дополняя его дополнительными функциями.
Стратегия использования default
и const
Смешивание default
и const
может вызвать синтаксическую путаницу. Вот краткая инструкция для минимизации путаницы:
- Предсказуемость: Именованные экспорты делают код более читаемым и легким для поддержки.
- Упрощение рефакторинга: Понятная интенция в экспортах облегчает рефакторинг.
- Преимущества для отладки: Именованные экспорты с предсказуемыми именами облегчают отладку, сохраняя последовательность в кодовой базе.
Визуализация
Представим export
, default
и const
как строительные блоки JavaScript, каждый из которых несет свою уникальность.
// Строительные блоки JavaScript
Семантические элементы
-----------------------------
| Блок | Сути |
|----------|------------------|
| export | 🧱--> | |
| default | | 🧱 |
| const | 🧱--> | |
Правильное действие с блоками?
-----------------------------
☑️ export + const = 🧱🧱 // Хорошо сочетаются
☑️ export + default = 🧱🧱 // Отличная комбинация
⛔️ export default const = 🧱🔲🧱 // Синтаксическая ошибка: несовместимы
Пояснение:
export
иconst
: Сила и определённость. 🧱🧱default
: его использование меняет всю комбинацию. 🧱🔲🧱- Как в кулинарии, так и в JavaScript важно грамотно комбинировать ингредиенты (элементы).
Искусство знания экспорта
Понимание влияния экспорта на консистентность, легкость отладки и общую чистоту кода — залог мастерства в применении модулей ES.
Именованные экспорты — для прозрачности
Именованные экспорты обеспечивают ясность того, что экспортируется, а также IDE может легко найти автоимпорт.
export const Tab = "Значение Tab"; // Ваша вкладка
export function tabHandler() { /*...*/ } // И обслуживающая её функция
Простота экспорта по умолчанию
Делайте экспорт по умолчанию конкретным и понятным — это лицо вашего модуля.
export default function main() { /*...*/ } // Основная функция, привлекающая внимание
Полезные материалы
- export – JavaScript | MDN — Основы синтаксиса экспорта в JavaScript.
- 16. Модули — Взгляд на мир модулей ES6.
- ES6 В глубину: Модули – Mozilla Hacks – Блог веб-разработчика — Погружение в модули ES6 от Mozilla.
- ES-модули: Использование именованных экспортов как экспорта по умолчанию | by Tim Oxley | Medium — Рассуждения о использовании именованных экспортов в качестве экспорта по умолчанию.
- Изучаем ES2015 · Babel — Руководство по модулям ES2015 от Babel.
- Модули ECMAScript 6: окончательный синтаксис — Анализ окончательного синтаксиса модулей ES6.
- Модули JavaScript · V8 — Обстоятельное погружение в модули JavaScript от V8.