Как правильно использовать импорт модулей в JavaScript проектах?

Для импорта модулей в JavaScript проектах используют ключевое слово import. 4 Чтобы браузер понимал, что экспортируется не просто исполняемый JS-файл, а модуль, в тэг script, где импортируется модуль, добавляют атрибут type='module'. 14

Существуют разные способы импорта модулей, выбор зависит от потребностей и структуры проекта. 2 Некоторые из них:

• Импорт значения по умолчанию. 34 Можно задать дефолтный export (объект, функция, класс и др.). 3 Инструкция import затем используется для импорта таких значений. 3
• Импорт именованных экспортов. 4 Нужно указать точное имя именованных экспортов при их импорте в модуль. 4 При этом именованные экспорты помещают внутрь пары фигурных скобок. 4
• Импорт всего содержимого модуля. 13 Можно импортировать всё содержимое модуля в переменную и обращаться к частям модуля как к свойствам этой переменной. 1 Такой синтаксис не рекомендуется использовать, сборщик модулей (например, Webpack) не сможет корректно выполнить tree-shaking при таком использовании. 1
• Динамический импорт. 13 Ключевое слово import можно использовать как функцию для динамического импорта модулей. 3 Вызов import() возвращает Promise. 3

Также есть возможность импортировать модуль для использования его побочного эффекта, не импортируя что-либо. 3 Это запускает глобальный код модуля, но в действительности не импортирует никаких значений. 3