Алиасы импортов для React приложений (Vite)
ฝัง
- เผยแพร่เมื่อ 28 ก.พ. 2023
- Разбираемся с настройкой алиасов импорта для React-приложений при использовании сборщика Vite.
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep - วิทยาศาสตร์และเทคโนโลยี
большое спасибо за объяснение, Михаил!
Спасибо большое человеческое)
Теперь мой код стал чуточку красивее)
Спасибо! Вот этого не хватало, теперь можно переходить на вит))
В целом по настройке, почти так же, как на вебпак, что радует ☺️🙏🏻.
Очень классное объяснение.
Крутой видос🔥🔥
Видос ТОП!👍
вот сегодня это добавлю в свой проект=)
Однозначно спасибо за полезную инфу!
Только результат интересный (для первого примера) - вместо нескольких двоеточий для более высоко расположенных файлов здоровенный полный путь для соседних... ;-)
Во втором же случае без IDE (ctrl-click) сложно найти исходники импортов.
великолепно =), сделал алиасы под FSD, но не настроил eslint под это дело, надеюсь смогу сделать)
Thanks for you videos
Совет автору, для вызова подсказки в редакторе не нужно удалять какой то символ в стоке достаточно нажать Command + .
на виндовсе ctrl + space
Круто!
Осталось только рассказать об алиасах для какого-нибудь jest
спасибо большое
Тоже используем.
Только после использования сторибука получилось три конфига с алиасами в проекте )).
Пробовали избавиться от этого дублирования, но были какие то сложности.
Думаю в итоге можно, но надо ещё раз будет попробовать должно получиться
Спасибо, отличное видео, я бы ещё сортировку для импортов добавил
С этим есть некоторые проблемы. Мне нравится, когда зависимости подключаются вверху, а свои модули внизу (линту с airbnb конфигом это тоже нравится). Но если в качестве префикса ставить @ или без него, то алиасы тоже считаются линтером внешними зависимостями.
Для себя придумал, что корень будет обозначаться "~/", а забинденные более глубокие папки будут с префиксом $.
Или что-то другое имелось в виду?
Я когда искал решение для алиасов в вите использовал следующий сценарий для файла vite.config.ts: plugins: [react(), tsconfigPaths()]
вернулся к твоему видео после того как столкнулся с багом автоимпорта. В общем при использовании способа который ты разбираешь в этом видео, баг автоимпорта отсутствует, то есть к примеру компонент импортируется именно так как было указано в tsconfig.json. При использовании плагина tsconfigPaths() путь указывается не всегда корректно. Однако...) есть такой плагин как trivago, который упорядочивает импорты при помощи prettier. К сожалению я не нашел способа прикрутить этот плагин к vite. Мб ты обладаешь инфой о том как это можно реализовать? Намного удобнее, когда импорты разделены логически, типо компоненты-разделитель-редакс-разделитель-плагины
Спасибо за полезное видео)) Подскажите пожалуйста, что это за браузер в самом начале видео?
Microsoft Edge 😄
vite-aliases или vite-tsconfig-paths
Спасибоооооооооооооооооооооооооооооооо
Круто! В добавок к этому было бы полезно узнать как тоже самое проделывать с путями к файлам стилей, если я использую *.module.scss и в этом файле мне нужны переменные и миксины. Так же хотелось бы видео по исgользованию scss map. К примеру если у меня 2 темы в приложении могу ли я использовать в компонентах одну переменную для черного и белого текста.
В смысле алиасы на уровне scss использовать?
Js переменная или css переменая имеется в виду для смены темы?
@@promoabys Имел ввиду сss переменные. А по поводу алиасов - в папке src находится папка styles где лежат файлы с переменными и миксинами, эти файлы мы хоти юзать в модулях компонентов. Пути частенько получаются громоздкие. Короче говоря на сколько я понял алиасы для scss можно применять точно также. "@styles/*": ["styles/*"]
@@olexandrsavelev4458 да, к любой папке проекта можно создать алиас.
Со стандартным create react app работал код
{
"compilerOptions": {
"baseUrl": "src"
},
"include": [
"src"
]
}
А с Vite почему-то не работает. Кто может подсказать, дайте совет, пожалуйста.
пробую переделать с вебпака на вит, почти получилось. но вот ошибка Expected "from" but found "{" в конструкции import type { foo} from никак не решается. написано что в новых версиях это решено, но это уже было давно и сейчас ерсии еще новее. можно ли это как-то решить?
Второй сценарий в настройке alias vite почему-то не срабатывает с папкой redux. Из-за этого пользуюсь первым сценарием.
Еще какую-нибудь либу можешь посоветовать, для алиасов?
Есть либа, оч простая в использовании, называется craco (так как-то название), там за 5 мин все можно настроить, есть примеры настройки в гугле, сам пару раз юзал на мелких проектах.
Привет Михаил, а Вам доводилось на React Native что-нибудь делать?
Нет, пока не доводилось.
Может, кто-то знает, как сделать , чтобы автоимпорт автоматически прописывал type дом типов? import type {....
Что у вас за консоль?
Как добавить то что справа gzipped? +
Мне не нравится то, что в проекте с использованием TypeScript, у нас отключается авто-лог ошибок при сохранении файлов. Там только сообщение о том, что сервак успешно запущен. Нужно прописывать команду tsc.
Storybook + Vite, пожалуууйста)
Неудобно, если честно - новую папку создал и надо ее ручками в конфигах прописывать.. Я бы хотел чтобы работало как в первом варианте, но не писать src/ в начале. Нигде не нашел решения. Хотя в CRA можно было так сделать
в webstorm это не работает, автоимпорт работает от ../src/components и т.д.
а что за терминал такой внизу при запуске приложения?
Ты наверное про devtools для react-query
@@darkside2436 возможно, спасибо
Она и есть, react-query devtools.
Была проблема "unable to resolve path alias"... Нашел решение : 1) установить eslint-import-resolver-typescript 2) добавить в eslint конфиг ` settings: {
'import/resolver': {
typescript: {},
alias: {
map: [
['@', './src'],
],
},
},`
Спасибо, что поделились. Линтеры - это всегда отдельная история 😄
Михаил, мы все учимся у Вас работать, но что бы хорошо работать, нужно хорошо отдыхать, раз вы так хорошо объясняете как нужно работать, может сможете научить еще и отдыхать хорошо?=)
Отличный топик)) Я бы с радостью поделился, но я засыпаю с мыслями о работе и просыпаюсь чаще всего с ними же))
С тех пор, как работа стала почти полностью удаленной, главный секрет в попытках отпустить рабочие процессы - это выйти из дома)) В идеале когда есть какое-то хобби вне дома. Еще лучше если хобби как-то связано с физической активностью.