Разбираемся с настройкой алиасов импорта для React-приложений при использовании сборщика Vite. Мои курсы по вебу с купонами: ✅ mishanep.com/ 📢 Поддержка канала: / mishanep www.tinkoff.ru/rm/nepomnyasch... paypal.me/mishanep
КОМЕНТАРІ: 57
@tengokuvisionРік тому
большое спасибо за объяснение, Михаил!
@Sergey_KlimovМісяць тому
Спасибо большое человеческое) Теперь мой код стал чуточку красивее)
@alexanderkomanov4151Рік тому
Очень классное объяснение.
@javascriptovРік тому
Крутой видос🔥🔥
@igorkozloff1631Рік тому
Спасибо! Вот этого не хватало, теперь можно переходить на вит))
@thefact45297 місяців тому
спасибо большое
@STELLS541Рік тому
В целом по настройке, почти так же, как на вебпак, что радует ☺️🙏🏻.
@user-sn4mn3ku9eРік тому
Видос ТОП!👍
@victormogРік тому
Однозначно спасибо за полезную инфу! Только результат интересный (для первого примера) - вместо нескольких двоеточий для более высоко расположенных файлов здоровенный полный путь для соседних... ;-) Во втором же случае без IDE (ctrl-click) сложно найти исходники импортов.
@andrzejsotnikovРік тому
вот сегодня это добавлю в свой проект=)
@evgeny_mdrРік тому
Совет автору, для вызова подсказки в редакторе не нужно удалять какой то символ в стоке достаточно нажать Command + .
@VIKTOR-pw8euРік тому
на виндовсе ctrl + space
@Frieren-_-3 місяці тому
великолепно =), сделал алиасы под FSD, но не настроил eslint под это дело, надеюсь смогу сделать)
@boyywnkobeРік тому
Thanks for you videos
@promoabysРік тому
Тоже используем. Только после использования сторибука получилось три конфига с алиасами в проекте )). Пробовали избавиться от этого дублирования, но были какие то сложности. Думаю в итоге можно, но надо ещё раз будет попробовать должно получиться
@munzamtРік тому
Круто! Осталось только рассказать об алиасах для какого-нибудь jest
@CommondoreРік тому
Спасибо, отличное видео, я бы ещё сортировку для импортов добавил
@CJIu3eHbРік тому
С этим есть некоторые проблемы. Мне нравится, когда зависимости подключаются вверху, а свои модули внизу (линту с airbnb конфигом это тоже нравится). Но если в качестве префикса ставить @ или без него, то алиасы тоже считаются линтером внешними зависимостями. Для себя придумал, что корень будет обозначаться "~/", а забинденные более глубокие папки будут с префиксом $. Или что-то другое имелось в виду?
@krypton52048 місяців тому
Спасибоооооооооооооооооооооооооооооооо
@Exigoll92Рік тому
Я когда искал решение для алиасов в вите использовал следующий сценарий для файла vite.config.ts: plugins: [react(), tsconfigPaths()]
@Exigoll92Рік тому
вернулся к твоему видео после того как столкнулся с багом автоимпорта. В общем при использовании способа который ты разбираешь в этом видео, баг автоимпорта отсутствует, то есть к примеру компонент импортируется именно так как было указано в tsconfig.json. При использовании плагина tsconfigPaths() путь указывается не всегда корректно. Однако...) есть такой плагин как trivago, который упорядочивает импорты при помощи prettier. К сожалению я не нашел способа прикрутить этот плагин к vite. Мб ты обладаешь инфой о том как это можно реализовать? Намного удобнее, когда импорты разделены логически, типо компоненты-разделитель-редакс-разделитель-плагины
@ArtemOdiikoРік тому
Спасибо за полезное видео)) Подскажите пожалуйста, что это за браузер в самом начале видео?
@mishanepРік тому
Microsoft Edge 😄
@olexandrsavelev4458Рік тому
Круто! В добавок к этому было бы полезно узнать как тоже самое проделывать с путями к файлам стилей, если я использую *.module.scss и в этом файле мне нужны переменные и миксины. Так же хотелось бы видео по исgользованию scss map. К примеру если у меня 2 темы в приложении могу ли я использовать в компонентах одну переменную для черного и белого текста.
@promoabysРік тому
В смысле алиасы на уровне scss использовать? Js переменная или css переменая имеется в виду для смены темы?
@olexandrsavelev4458Рік тому
@@promoabys Имел ввиду сss переменные. А по поводу алиасов - в папке src находится папка styles где лежат файлы с переменными и миксинами, эти файлы мы хоти юзать в модулях компонентов. Пути частенько получаются громоздкие. Короче говоря на сколько я понял алиасы для scss можно применять точно также. "@styles/*": ["styles/*"]
@promoabysРік тому
@@olexandrsavelev4458 да, к любой папке проекта можно создать алиас.
@philian739 місяців тому
Мне не нравится то, что в проекте с использованием TypeScript, у нас отключается авто-лог ошибок при сохранении файлов. Там только сообщение о том, что сервак успешно запущен. Нужно прописывать команду tsc.
@TheKykpРік тому
Привет Михаил, а Вам доводилось на React Native что-нибудь делать?
@mishanepРік тому
Нет, пока не доводилось.
@Vitalii-dd9ni9 місяців тому
Со стандартным create react app работал код { "compilerOptions": { "baseUrl": "src" }, "include": [ "src" ] } А с Vite почему-то не работает. Кто может подсказать, дайте совет, пожалуйста.
@romanmed90355 місяців тому
пробую переделать с вебпака на вит, почти получилось. но вот ошибка Expected "from" but found "{" в конструкции import type { foo} from никак не решается. написано что в новых версиях это решено, но это уже было давно и сейчас ерсии еще новее. можно ли это как-то решить?
@Vitalii-dd9ni9 місяців тому
Второй сценарий в настройке alias vite почему-то не срабатывает с папкой redux. Из-за этого пользуюсь первым сценарием.
@ibragimProtopopovРік тому
Еще какую-нибудь либу можешь посоветовать, для алиасов?
@STELLS541Рік тому
Есть либа, оч простая в использовании, называется craco (так как-то название), там за 5 мин все можно настроить, есть примеры настройки в гугле, сам пару раз юзал на мелких проектах.
@AlibekKulseitovРік тому
Как добавить то что справа gzipped? +
@Pavlusha1KruglikРік тому
Может, кто-то знает, как сделать , чтобы автоимпорт автоматически прописывал type дом типов? import type {....
@WarfaceNaGiBРік тому
Что у вас за консоль?
@user-uj4ju3lv4dРік тому
vite-aliases или vite-tsconfig-paths
@ivan44865 місяців тому
Неудобно, если честно - новую папку создал и надо ее ручками в конфигах прописывать.. Я бы хотел чтобы работало как в первом варианте, но не писать src/ в начале. Нигде не нашел решения. Хотя в CRA можно было так сделать
@proletarianРік тому
а что за терминал такой внизу при запуске приложения?
@darkside2436Рік тому
Ты наверное про devtools для react-query
@proletarianРік тому
@@darkside2436 возможно, спасибо
@mishanepРік тому
Она и есть, react-query devtools.
@romandeveloper7720Рік тому
Storybook + Vite, пожалуууйста)
@theobroma222Рік тому
Была проблема "unable to resolve path alias"... Нашел решение : 1) установить eslint-import-resolver-typescript 2) добавить в eslint конфиг ` settings: { 'import/resolver': { typescript: {}, alias: { map: [ ['@', './src'], ], }, },`
@mishanepРік тому
Спасибо, что поделились. Линтеры - это всегда отдельная история 😄
@proletarianРік тому
в webstorm это не работает, автоимпорт работает от ../src/components и т.д.
@TheKykpРік тому
Михаил, мы все учимся у Вас работать, но что бы хорошо работать, нужно хорошо отдыхать, раз вы так хорошо объясняете как нужно работать, может сможете научить еще и отдыхать хорошо?=)
@mishanepРік тому
Отличный топик)) Я бы с радостью поделился, но я засыпаю с мыслями о работе и просыпаюсь чаще всего с ними же)) С тех пор, как работа стала почти полностью удаленной, главный секрет в попытках отпустить рабочие процессы - это выйти из дома)) В идеале когда есть какое-то хобби вне дома. Еще лучше если хобби как-то связано с физической активностью.