JavaScript

Псевдоним модуля в Webpack

Spread the love

Небольшой совет по использования псевдонимов в конфигурации Webpack вместо относительных путей в проектах на JavaScript.
Оригинальная статья: Vikas SinghModule aliasing in Webpack

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

Так в чем проблема?

По мере того, как ваш проект начинает преодолевать определенную сложность, и в ситуации когда нужно изменить путь к библиотеке вы обнаружите, что обход файловой системы занимает слишком много времени и подвержен ошибкам. Даже с такими функциями автозавершения кода, как IntelliSense (поддерживается почти каждой IDE), это может стать более сложной задачей по мере роста вашей кодовой базы.

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

Более того, видите, как уродливо это выглядит?

Решение

Webpack позволяет создавать псевдонимы для import или require модулей через свойство resolve.alias в вашей конфигурации без каких-либо дополнительных плагинов.

Изменения в webpack.config.js

Концепция aliasing модулей в Webpack может помочь вам превратить вышеуказанный файл в его более чистую версию.

Аккуратный, чистый код

Последствие

Как только мы начинем использовать aliasing, IntelliSense прекратит работу для этих импортов в VSCode.

К счастью, есть фикс, доступное для исправления ситуации. Исправление для Alias файлов

Image showing Jump To Alias File in action

Другой способ — дать VSCode знать, как разрешить эти псевдонимы, добавив файл jsconfig.json в свой проект в корневом каталоге.

{
"compilerOptions": {
"target": "es2017",
"allowSyntheticDefaultImports": false,
"baseUrl": "./",
"paths": {
"config/*": ["src/config/*"],
"store/*": ["src/store/*"],
"utils/*": ["src/utils/*"]
}
},
"exclude": ["node_modules"]
}

Если у вас есть какие-либо вопросы или предложения, не забудьте оставить комментарий внизу.

Вам понравилось читать этот блог? Если да, нажмите на значок 👏 и поделитесь этой статьей! Также не стесняйтесь оставлять комментарии в блоге автора.

Groww Engineering публикует технические материалы, последние безумные вещи в мире программирования и удобные способы решения типичных проблем программирования.

Была ли вам полезна эта статья?
[4 / 4]

Spread the love
Editorial Team

View Comments

  • Привет, а подскажи как добавить алиасы для файлов и папок внутри UI-библиотеки в node-modules?

Recent Posts

Vue 3.4 Новая механика v-model компонента

Краткий перевод: https://vuejs.org/guide/components/v-model.html Основное использование​ v-model используется для реализации двусторонней привязки в компоненте. Начиная с Vue…

11 месяцев ago

Анонс Vue 3.4

Сегодня мы рады объявить о выпуске Vue 3.4 «🏀 Slam Dunk»! Этот выпуск включает в…

11 месяцев ago

Как принудительно пере-отобразить (re-render) компонент Vue

Vue.js — это универсальный и адаптируемый фреймворк. Благодаря своей отличительной архитектуре и системе реактивности Vue…

2 года ago

Проблемы с установкой сертификата на nginix

Недавно, у меня истек сертификат и пришлось заказывать новый и затем устанавливать на хостинг с…

2 года ago

Введение в JavaScript Temporal API

Каким бы ни было ваше мнение о JavaScript, но всем известно, что работа с датами…

2 года ago

Когда и как выбирать между медиа запросами и контейнерными запросами

Все, кто следит за последними событиями в мире адаптивного дизайна, согласятся, что введение контейнерных запросов…

2 года ago