Алиасы импортов для React приложений (Vite)

Рет қаралды 13,662

Жыл бұрын

Разбираемся с настройкой алиасов импорта для React-приложений при использовании сборщика Vite.
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep

Пікірлер: 57

@tengokuvision Жыл бұрын

большое спасибо за объяснение, Михаил!

@Sergey_Klimov 2 ай бұрын

Спасибо большое человеческое) Теперь мой код стал чуточку красивее)

@igorkozloff1631 Жыл бұрын

Спасибо! Вот этого не хватало, теперь можно переходить на вит))

@STELLS541 Жыл бұрын

В целом по настройке, почти так же, как на вебпак, что радует ☺️🙏🏻.

@alexanderkomanov4151 Жыл бұрын

Очень классное объяснение.

@javascriptov Жыл бұрын

Крутой видос🔥🔥

@evgeny_mdr Жыл бұрын

Совет автору, для вызова подсказки в редакторе не нужно удалять какой то символ в стоке достаточно нажать Command + .

@VIKTOR-pw8eu Жыл бұрын

на виндовсе ctrl + space

@user-sn4mn3ku9e Жыл бұрын

Видос ТОП!👍

@Frieren-_- 5 ай бұрын

великолепно =), сделал алиасы под FSD, но не настроил eslint под это дело, надеюсь смогу сделать)

@victormog Жыл бұрын

Однозначно спасибо за полезную инфу! Только результат интересный (для первого примера) - вместо нескольких двоеточий для более высоко расположенных файлов здоровенный полный путь для соседних... ;-) Во втором же случае без IDE (ctrl-click) сложно найти исходники импортов.

@boyywnkobe Жыл бұрын

Thanks for you videos

@andrzejsotnikov Жыл бұрын

вот сегодня это добавлю в свой проект=)

@promoabys Жыл бұрын

Тоже используем. Только после использования сторибука получилось три конфига с алиасами в проекте )). Пробовали избавиться от этого дублирования, но были какие то сложности. Думаю в итоге можно, но надо ещё раз будет попробовать должно получиться

@munzamt Жыл бұрын

Круто! Осталось только рассказать об алиасах для какого-нибудь jest

@thefact4529 9 ай бұрын

спасибо большое

@Commondore Жыл бұрын

Спасибо, отличное видео, я бы ещё сортировку для импортов добавил

@CJIu3eHb Жыл бұрын

С этим есть некоторые проблемы. Мне нравится, когда зависимости подключаются вверху, а свои модули внизу (линту с airbnb конфигом это тоже нравится). Но если в качестве префикса ставить @ или без него, то алиасы тоже считаются линтером внешними зависимостями. Для себя придумал, что корень будет обозначаться "~/", а забинденные более глубокие папки будут с префиксом $. Или что-то другое имелось в виду?

@Exigoll92 Жыл бұрын

Я когда искал решение для алиасов в вите использовал следующий сценарий для файла vite.config.ts: plugins: [react(), tsconfigPaths()]

@Exigoll92 Жыл бұрын

вернулся к твоему видео после того как столкнулся с багом автоимпорта. В общем при использовании способа который ты разбираешь в этом видео, баг автоимпорта отсутствует, то есть к примеру компонент импортируется именно так как было указано в tsconfig.json. При использовании плагина tsconfigPaths() путь указывается не всегда корректно. Однако...) есть такой плагин как trivago, который упорядочивает импорты при помощи prettier. К сожалению я не нашел способа прикрутить этот плагин к vite. Мб ты обладаешь инфой о том как это можно реализовать? Намного удобнее, когда импорты разделены логически, типо компоненты-разделитель-редакс-разделитель-плагины

@ArtemOdiiko Жыл бұрын

Спасибо за полезное видео)) Подскажите пожалуйста, что это за браузер в самом начале видео?

@mishanep Жыл бұрын

Microsoft Edge 😄

@krypton5204 9 ай бұрын

Спасибоооооооооооооооооооооооооооооооо

@DmitriyDev Жыл бұрын

Что у вас за консоль?

@olexandrsavelev4458 Жыл бұрын

Круто! В добавок к этому было бы полезно узнать как тоже самое проделывать с путями к файлам стилей, если я использую *.module.scss и в этом файле мне нужны переменные и миксины. Так же хотелось бы видео по исgользованию scss map. К примеру если у меня 2 темы в приложении могу ли я использовать в компонентах одну переменную для черного и белого текста.

@promoabys Жыл бұрын

В смысле алиасы на уровне scss использовать? Js переменная или css переменая имеется в виду для смены темы?

@olexandrsavelev4458 Жыл бұрын

@@promoabys Имел ввиду сss переменные. А по поводу алиасов - в папке src находится папка styles где лежат файлы с переменными и миксинами, эти файлы мы хоти юзать в модулях компонентов. Пути частенько получаются громоздкие. Короче говоря на сколько я понял алиасы для scss можно применять точно также. "@styles/*": ["styles/*"]

@promoabys Жыл бұрын

@@olexandrsavelev4458 да, к любой папке проекта можно создать алиас.

@TheKykp Жыл бұрын

Привет Михаил, а Вам доводилось на React Native что-нибудь делать?

@mishanep Жыл бұрын

Нет, пока не доводилось.

@romanmed9035 7 ай бұрын

пробую переделать с вебпака на вит, почти получилось. но вот ошибка Expected "from" but found "{" в конструкции import type { foo} from никак не решается. написано что в новых версиях это решено, но это уже было давно и сейчас ерсии еще новее. можно ли это как-то решить?

@ibragimProtopopov Жыл бұрын

Еще какую-нибудь либу можешь посоветовать, для алиасов?

@STELLS541 Жыл бұрын

Есть либа, оч простая в использовании, называется craco (так как-то название), там за 5 мин все можно настроить, есть примеры настройки в гугле, сам пару раз юзал на мелких проектах.

@Vitalii-dd9ni 11 ай бұрын

Второй сценарий в настройке alias vite почему-то не срабатывает с папкой redux. Из-за этого пользуюсь первым сценарием.

@Vitalii-dd9ni 11 ай бұрын

Со стандартным create react app работал код { "compilerOptions": { "baseUrl": "src" }, "include": [ "src" ] } А с Vite почему-то не работает. Кто может подсказать, дайте совет, пожалуйста.

@AlibekKulseitov Жыл бұрын

Как добавить то что справа gzipped? +

@user-uj4ju3lv4d Жыл бұрын

vite-aliases или vite-tsconfig-paths

@philian73 10 ай бұрын

Мне не нравится то, что в проекте с использованием TypeScript, у нас отключается авто-лог ошибок при сохранении файлов. Там только сообщение о том, что сервак успешно запущен. Нужно прописывать команду tsc.

@Pavlusha1Kruglik Жыл бұрын

Может, кто-то знает, как сделать , чтобы автоимпорт автоматически прописывал type дом типов? import type {....

@romandeveloper7720 Жыл бұрын

Storybook + Vite, пожалуууйста)

@ivan4486 6 ай бұрын

Неудобно, если честно - новую папку создал и надо ее ручками в конфигах прописывать.. Я бы хотел чтобы работало как в первом варианте, но не писать src/ в начале. Нигде не нашел решения. Хотя в CRA можно было так сделать

@proletarian Жыл бұрын

а что за терминал такой внизу при запуске приложения?

@darkside2436 Жыл бұрын

Ты наверное про devtools для react-query

@proletarian Жыл бұрын

@@darkside2436 возможно, спасибо

@mishanep Жыл бұрын

Она и есть, react-query devtools.

@TheKykp Жыл бұрын

Михаил, мы все учимся у Вас работать, но что бы хорошо работать, нужно хорошо отдыхать, раз вы так хорошо объясняете как нужно работать, может сможете научить еще и отдыхать хорошо?=)

@mishanep Жыл бұрын

Отличный топик)) Я бы с радостью поделился, но я засыпаю с мыслями о работе и просыпаюсь чаще всего с ними же)) С тех пор, как работа стала почти полностью удаленной, главный секрет в попытках отпустить рабочие процессы - это выйти из дома)) В идеале когда есть какое-то хобби вне дома. Еще лучше если хобби как-то связано с физической активностью.

@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 и т.д.