{cherkashin.dev}
← Все посты

7 июля 2023 г. (изменено: 10 июля 2023 г.)

Канал: @cherkashindev

644
#eslint #javascript #architecture #fridayreading

📖 Why I’ve stopped exporting defaults from my JavaScript modules

Сегодня на повестке статья из далёкого и спокойного 2019 “Why I’ve stopped exporting defaults from my JavaScript modules”.

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

1️⃣ Дефолтные экспорты не указывают имя функции или класса, которую вы импортируете, что может (и будет) вызывать неконсистентность в именовании.

В одном файле вы можете указать имя LinkedList

import LinkedList from "./linked-list.js";

А в другом файле, другой разработчик может указать имя List

import List from "./linked-list.js";

В случае с именованными экспортами, вы не можете просто присвоить рандомное имя, оно должно совпадать с именем экспортируемой функции/класса/объекта

import { LinkedList } from "./linked-list.js";

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

2️⃣ Когнитивная нагрузка замедляет разработку. Если вы используете дефолтные экспорты, вам придётся самостоятельно, каждый раз указывать название импорта. В случае с именованными экспортами ваша IDE наверняка подскажет вам имя, как только вы начнёте печатать и вам останется лишь нажать Enter.

3️⃣ Если вы всегда используете именованные экспорты, вам больше не нужно выбирать между именованными и дефолтными экспортами. Например, если изначально в файле вы экспортировали только одну функцию и теперь вам нужно экспортировать ещё одну, вам не придётся заменить везде неименованные импорты на именованные.

⚠️** Исключения**

К сожалению, в некоторых ситуациях нельзя использовать именованные экспорты. Одним из примеров может служить React.lazy(() ⇒ import('../path')) используемый для код сплитинга и ленивой загрузки.

🤖** ESlint**

Чтобы убедиться, что все разработчики используют именованные экспорты, вы можете использовать правило import/no-default-export

Когда я добавлял это правило в наш проект, я наткнулся на GitLab issue, где команда Гитлаба планировали перейти с дефолтных экспортов на именованные. Они также ссылаются на эту статью.

👍 3