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

  Переглядів 12,980

Михаил Непомнящий

Михаил Непомнящий

Рік тому

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

КОМЕНТАРІ: 57
@tengokuvision
@tengokuvision Рік тому
большое спасибо за объяснение, Михаил!
@Sergey_Klimov
@Sergey_Klimov Місяць тому
Спасибо большое человеческое) Теперь мой код стал чуточку красивее)
@alexanderkomanov4151
@alexanderkomanov4151 Рік тому
Очень классное объяснение.
@javascriptov
@javascriptov Рік тому
Крутой видос🔥🔥
@igorkozloff1631
@igorkozloff1631 Рік тому
Спасибо! Вот этого не хватало, теперь можно переходить на вит))
@thefact4529
@thefact4529 7 місяців тому
спасибо большое
@STELLS541
@STELLS541 Рік тому
В целом по настройке, почти так же, как на вебпак, что радует ☺️🙏🏻.
@user-sn4mn3ku9e
@user-sn4mn3ku9e Рік тому
Видос ТОП!👍
@victormog
@victormog Рік тому
Однозначно спасибо за полезную инфу! Только результат интересный (для первого примера) - вместо нескольких двоеточий для более высоко расположенных файлов здоровенный полный путь для соседних... ;-) Во втором же случае без IDE (ctrl-click) сложно найти исходники импортов.
@andrzejsotnikov
@andrzejsotnikov Рік тому
вот сегодня это добавлю в свой проект=)
@evgeny_mdr
@evgeny_mdr Рік тому
Совет автору, для вызова подсказки в редакторе не нужно удалять какой то символ в стоке достаточно нажать Command + .
@VIKTOR-pw8eu
@VIKTOR-pw8eu Рік тому
на виндовсе ctrl + space
@Frieren-_-
@Frieren-_- 3 місяці тому
великолепно =), сделал алиасы под FSD, но не настроил eslint под это дело, надеюсь смогу сделать)
@boyywnkobe
@boyywnkobe Рік тому
Thanks for you videos
@promoabys
@promoabys Рік тому
Тоже используем. Только после использования сторибука получилось три конфига с алиасами в проекте )). Пробовали избавиться от этого дублирования, но были какие то сложности. Думаю в итоге можно, но надо ещё раз будет попробовать должно получиться
@munzamt
@munzamt Рік тому
Круто! Осталось только рассказать об алиасах для какого-нибудь jest
@Commondore
@Commondore Рік тому
Спасибо, отличное видео, я бы ещё сортировку для импортов добавил
@CJIu3eHb
@CJIu3eHb Рік тому
С этим есть некоторые проблемы. Мне нравится, когда зависимости подключаются вверху, а свои модули внизу (линту с airbnb конфигом это тоже нравится). Но если в качестве префикса ставить @ или без него, то алиасы тоже считаются линтером внешними зависимостями. Для себя придумал, что корень будет обозначаться "~/", а забинденные более глубокие папки будут с префиксом $. Или что-то другое имелось в виду?
@krypton5204
@krypton5204 8 місяців тому
Спасибоооооооооооооооооооооооооооооооо
@Exigoll92
@Exigoll92 Рік тому
Я когда искал решение для алиасов в вите использовал следующий сценарий для файла vite.config.ts: plugins: [react(), tsconfigPaths()]
@Exigoll92
@Exigoll92 Рік тому
вернулся к твоему видео после того как столкнулся с багом автоимпорта. В общем при использовании способа который ты разбираешь в этом видео, баг автоимпорта отсутствует, то есть к примеру компонент импортируется именно так как было указано в tsconfig.json. При использовании плагина tsconfigPaths() путь указывается не всегда корректно. Однако...) есть такой плагин как trivago, который упорядочивает импорты при помощи prettier. К сожалению я не нашел способа прикрутить этот плагин к vite. Мб ты обладаешь инфой о том как это можно реализовать? Намного удобнее, когда импорты разделены логически, типо компоненты-разделитель-редакс-разделитель-плагины
@ArtemOdiiko
@ArtemOdiiko Рік тому
Спасибо за полезное видео)) Подскажите пожалуйста, что это за браузер в самом начале видео?
@mishanep
@mishanep Рік тому
Microsoft Edge 😄
@olexandrsavelev4458
@olexandrsavelev4458 Рік тому
Круто! В добавок к этому было бы полезно узнать как тоже самое проделывать с путями к файлам стилей, если я использую *.module.scss и в этом файле мне нужны переменные и миксины. Так же хотелось бы видео по исgользованию scss map. К примеру если у меня 2 темы в приложении могу ли я использовать в компонентах одну переменную для черного и белого текста.
@promoabys
@promoabys Рік тому
В смысле алиасы на уровне scss использовать? Js переменная или css переменая имеется в виду для смены темы?
@olexandrsavelev4458
@olexandrsavelev4458 Рік тому
@@promoabys Имел ввиду сss переменные. А по поводу алиасов - в папке src находится папка styles где лежат файлы с переменными и миксинами, эти файлы мы хоти юзать в модулях компонентов. Пути частенько получаются громоздкие. Короче говоря на сколько я понял алиасы для scss можно применять точно также. "@styles/*": ["styles/*"]
@promoabys
@promoabys Рік тому
@@olexandrsavelev4458 да, к любой папке проекта можно создать алиас.
@philian73
@philian73 9 місяців тому
Мне не нравится то, что в проекте с использованием TypeScript, у нас отключается авто-лог ошибок при сохранении файлов. Там только сообщение о том, что сервак успешно запущен. Нужно прописывать команду tsc.
@TheKykp
@TheKykp Рік тому
Привет Михаил, а Вам доводилось на React Native что-нибудь делать?
@mishanep
@mishanep Рік тому
Нет, пока не доводилось.
@Vitalii-dd9ni
@Vitalii-dd9ni 9 місяців тому
Со стандартным create react app работал код { "compilerOptions": { "baseUrl": "src" }, "include": [ "src" ] } А с Vite почему-то не работает. Кто может подсказать, дайте совет, пожалуйста.
@romanmed9035
@romanmed9035 5 місяців тому
пробую переделать с вебпака на вит, почти получилось. но вот ошибка Expected "from" but found "{" в конструкции import type { foo} from никак не решается. написано что в новых версиях это решено, но это уже было давно и сейчас ерсии еще новее. можно ли это как-то решить?
@Vitalii-dd9ni
@Vitalii-dd9ni 9 місяців тому
Второй сценарий в настройке alias vite почему-то не срабатывает с папкой redux. Из-за этого пользуюсь первым сценарием.
@ibragimProtopopov
@ibragimProtopopov Рік тому
Еще какую-нибудь либу можешь посоветовать, для алиасов?
@STELLS541
@STELLS541 Рік тому
Есть либа, оч простая в использовании, называется craco (так как-то название), там за 5 мин все можно настроить, есть примеры настройки в гугле, сам пару раз юзал на мелких проектах.
@AlibekKulseitov
@AlibekKulseitov Рік тому
Как добавить то что справа gzipped? +
@Pavlusha1Kruglik
@Pavlusha1Kruglik Рік тому
Может, кто-то знает, как сделать , чтобы автоимпорт автоматически прописывал type дом типов? import type {....
@WarfaceNaGiB
@WarfaceNaGiB Рік тому
Что у вас за консоль?
@user-uj4ju3lv4d
@user-uj4ju3lv4d Рік тому
vite-aliases или vite-tsconfig-paths
@ivan4486
@ivan4486 5 місяців тому
Неудобно, если честно - новую папку создал и надо ее ручками в конфигах прописывать.. Я бы хотел чтобы работало как в первом варианте, но не писать src/ в начале. Нигде не нашел решения. Хотя в CRA можно было так сделать
@proletarian
@proletarian Рік тому
а что за терминал такой внизу при запуске приложения?
@darkside2436
@darkside2436 Рік тому
Ты наверное про devtools для react-query
@proletarian
@proletarian Рік тому
@@darkside2436 возможно, спасибо
@mishanep
@mishanep Рік тому
Она и есть, react-query devtools.
@romandeveloper7720
@romandeveloper7720 Рік тому
Storybook + Vite, пожалуууйста)
@theobroma222
@theobroma222 Рік тому
Была проблема "unable to resolve path alias"... Нашел решение : 1) установить eslint-import-resolver-typescript 2) добавить в eslint конфиг ` settings: { 'import/resolver': { typescript: {}, alias: { map: [ ['@', './src'], ], }, },`
@mishanep
@mishanep Рік тому
Спасибо, что поделились. Линтеры - это всегда отдельная история 😄
@proletarian
@proletarian Рік тому
в webstorm это не работает, автоимпорт работает от ../src/components и т.д.
@TheKykp
@TheKykp Рік тому
Михаил, мы все учимся у Вас работать, но что бы хорошо работать, нужно хорошо отдыхать, раз вы так хорошо объясняете как нужно работать, может сможете научить еще и отдыхать хорошо?=)
@mishanep
@mishanep Рік тому
Отличный топик)) Я бы с радостью поделился, но я засыпаю с мыслями о работе и просыпаюсь чаще всего с ними же)) С тех пор, как работа стала почти полностью удаленной, главный секрет в попытках отпустить рабочие процессы - это выйти из дома)) В идеале когда есть какое-то хобби вне дома. Еще лучше если хобби как-то связано с физической активностью.
Vite для быстрой разработки и сборки приложения
10:49
Михаил Непомнящий
Переглядів 60 тис.
Автоматизация создания React-компонентов
14:36
Михаил Непомнящий
Переглядів 20 тис.
Protect The Yacht, Keep It!
15:08
MrBeast
Переглядів 37 млн
LIVE - Парад Победы в Москве. 9 Мая 2024
2:27:56
AKIpress news
Переглядів 2,2 млн
ESLint with VSCode, Prettier, Husky and React For Beginners
35:03
CoderOne
Переглядів 105 тис.
CSS-модули, SASS/SCSS и сброс стилей в React-приложении
18:28
Михаил Непомнящий
Переглядів 34 тис.
How To Type Children In React? JSX.Element vs ReactNode
3:30
Oskar Puchalski
Переглядів 1,4 тис.
Import aliases in React
0:58
Cosden Solutions
Переглядів 19 тис.
Как настроить тестовое окружение для React-приложений с Vite
12:40
Setup React CSS Modules (with SASS, multiple classes and more)
13:17
Digital CEO
Переглядів 24 тис.
Add Jest Unit Testing to React Vite
29:44
Ivaylo Papazov
Переглядів 1,9 тис.
Лучший Смартфон До 149 Баксов!!!??? itel s24
20:25
РасПаковка ДваПаковка
Переглядів 52 тис.
How Neuralink Works 🧠
0:28
Zack D. Films
Переглядів 26 млн
Самый маленький Iphone в мире!📱(@ghoul.arena)
0:22
Взрывная История
Переглядів 274 тис.