Почему нельзя использовать

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

Использование 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() { /*...*/ } // Основная функция, привлекающая внимание

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

1. export – JavaScript | MDN — Основы синтаксиса экспорта в JavaScript.
2. 16. Модули — Взгляд на мир модулей ES6.
3. ES6 В глубину: Модули – Mozilla Hacks – Блог веб-разработчика — Погружение в модули ES6 от Mozilla.
4. ES-модули: Использование именованных экспортов как экспорта по умолчанию | by Tim Oxley | Medium — Рассуждения о использовании именованных экспортов в качестве экспорта по умолчанию.
5. Изучаем ES2015 · Babel — Руководство по модулям ES2015 от Babel.
6. Модули ECMAScript 6: окончательный синтаксис — Анализ окончательного синтаксиса модулей ES6.
7. Модули JavaScript · V8 — Обстоятельное погружение в модули JavaScript от V8.