Webpack — устранение длинных импортов — Часть 2
Это вторая часть серии. Если вас интересует настройка Webpack, чтобы избавиться от запутанно длинных инструкций в начале файлов, рекомендую прочитать предыдущую статью.
В этом разделе мы рассмотрим конкретные настройки, связанные с Jest и ESlint. Это единственные библиотеки, с которыми я столкнулся на своем пути с функцией Webpack. Давайте погрузимся!
Шутка
Вполне естественно писать модульные тесты для нужных компонентов во всех случаях.
Однако, если вы также хотите применить сокращенный импорт в тестовых файлах, тогда Jest должен каким-то образом распознать и интерпретировать предопределенные псевдонимы Webpack. Точное решение — отредактировать свойство moduleNameMapper.
Пример взят из предыдущей части, в которой я установил, что символ ~ разрешается как путь к каталогу /src.
Чтобы уточнить строки выше:
- RegEx ищет импорты, соответствующие шаблону, и интерпретирует их по указанному пути с правой стороны,
- знак $1 относится к остальной части оператора импорта без символа ~.
ESlint
Условие:
eslint-plugin-import
Вы подозреваете, что мы должны сделать что-то похожее, как раньше, с Jest — и совершенно правы. Нам нужен простой пакет, в котором можно установить псевдонимы.
Документация довольно обширна и также содержит несколько основных примеров, поэтому позвольте мне быть прямолинейным и кратко представить решение.
Что он на самом деле делает, так это преобразует заданную строку в левой части массива в ту, которая определена как второй элемент.
Это все для второй части! Я надеюсь, что вы открыли для себя что-то новое, что несколько поможет вашим будущим проектам.
Я бы очень хотел продолжить серию, поэтому было бы здорово и ценно, если бы вы оставили некоторые идеи, которые могут быть включены в следующую часть. Не стесняйтесь следовать за мной на Twitter!
