Правила использования фигурных скобок при импорте в ES6

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

Фигурные скобки в import ES6 применяются для подключения именованных экспортов — отдельных функций, которые предоставляет модуль. В случае с экспортом по умолчанию скобки не требуются, вот в чём основная особенность этого модуля.

Именованный (применяем скобки):

// Выбираем конкретные элементы из набора функций
import { map, reduce } from 'lodash';

По умолчанию (скобки не нужны):

// Подключаем основной элемент
import React from 'react';

Комбинированный импорт:

// Совмещаем оба варианта
import React, { useState } from 'react';

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

Эффективные стратегии именования

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

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

Представьте, что большой супермаркет — это магазин кода, наполненный модулями, из обилия которых вы выбираете необходимые компоненты:

Супермаркет кода (🏪): Все товары (модули) упорядочено расставлены по полкам

Выбираем товары (импортируем):
1️⃣ Импорт по умолчанию         | Молоко 🥛 — берём весь пакет (модуль)
2️⃣ Импорт с фигурными скобками | Отдельные товары: Яйца 🥚, Сыр 🧀

Используйте {} для выбора необходимых экспортов на полках супермаркета.

// Хотите омлет с сыром?
import { Egg, Cheese } from 'Fridge';

// Или просто взять весь пакет молока!
import Milk from 'Fridge';

Написание эффективных импортов в ES6

Как и ваша диета после праздничного стола, объём вашего пакета имеет значение. Используйте выборочный импорт, чтобы включить в свой пакет только те части модуля, которые действительно вам нужны. Это улучшает эффективность и позволяет уменьшить размеры пакетов.

Ценность ясности и удобства рефакторинга

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

TypeScript и псевдонимы

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

Импорт всего функционала

Иногда требуется подключить весь доступный функционал из модуля. Для этого используется import * as Alias. Но стоит помнить о золотой середине!

Примеры типичных сценариев

Рассмотрим несколько примеров использования импортов в ES6, с которыми вы можете столкнуться:

Одиночный экспорт по умолчанию

// Подключается единственная функционвльность, экспортируемая по умолчанию
import Feature from 'FeatureModule';

Подробнее об этом расскажет наш спикер на видео

Несколько именованных экспортов

// Нам нужны несколько элементов из одного источника
import { FeatureA, FeatureB } from 'UtilitiesModule';

Смешивание различных экспортов

// Мы работаем как с экспортом по умолчанию, так и с именованными
import Library, { Feature1, Feature2 as Alias } from 'LibraryModule';

Импорт всего сразу

// Нам нужно много функционала из одного источника. Не забывайте о производительности!
import * as Utils from 'UtilitiesModule';

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

1. import – JavaScript | MDN — подробный учебник по import на MDN, который будет вашим надёжным источником информации.
2. ECMAScript 6 modules: the final syntax — всё, что вы хотели знать о синтаксисе модулей ES6.
3. ES6 In Depth: Modules – Mozilla Hacks – блог веб-разработчиков — детальное погружение в тему модулей ES6.
4. javascript – Когда стоит использовать фигурные скобки при импорте в ES6? – Stack Overflow — дискуссия на Stack Overflow, помогающая разрешить сомнения по поводу использования фигурных скобок.
5. 16. Modules — подробный раздел о модулях ES6 в книге "Exploring JS".
6. Интерактивная шпаргалка по JavaScript ES6, ES2016 и ES2017 — справочник по синтаксису импорта/экспорта в ES6.
7. Спецификация языка ECMAScript 2015 – ECMA-262 6-е издание — официальная спецификация ECMAScript 2015 со всеми подробностями о команде импортов.