Разбираемся с настройкой алиасов импорта для React-приложений при использовании сборщика Vite. Мои курсы по вебу с купонами: ✅ mishanep.com/ 📢 Поддержка канала: / mishanep www.tinkoff.ru/rm/nepomnyasch... paypal.me/mishanep
Однозначно спасибо за полезную инфу! Только результат интересный (для первого примера) - вместо нескольких двоеточий для более высоко расположенных файлов здоровенный полный путь для соседних... ;-) Во втором же случае без IDE (ctrl-click) сложно найти исходники импортов.
Тоже используем. Только после использования сторибука получилось три конфига с алиасами в проекте )). Пробовали избавиться от этого дублирования, но были какие то сложности. Думаю в итоге можно, но надо ещё раз будет попробовать должно получиться
С этим есть некоторые проблемы. Мне нравится, когда зависимости подключаются вверху, а свои модули внизу (линту с airbnb конфигом это тоже нравится). Но если в качестве префикса ставить @ или без него, то алиасы тоже считаются линтером внешними зависимостями. Для себя придумал, что корень будет обозначаться "~/", а забинденные более глубокие папки будут с префиксом $. Или что-то другое имелось в виду?
вернулся к твоему видео после того как столкнулся с багом автоимпорта. В общем при использовании способа который ты разбираешь в этом видео, баг автоимпорта отсутствует, то есть к примеру компонент импортируется именно так как было указано в tsconfig.json. При использовании плагина tsconfigPaths() путь указывается не всегда корректно. Однако...) есть такой плагин как trivago, который упорядочивает импорты при помощи prettier. К сожалению я не нашел способа прикрутить этот плагин к vite. Мб ты обладаешь инфой о том как это можно реализовать? Намного удобнее, когда импорты разделены логически, типо компоненты-разделитель-редакс-разделитель-плагины
Круто! В добавок к этому было бы полезно узнать как тоже самое проделывать с путями к файлам стилей, если я использую *.module.scss и в этом файле мне нужны переменные и миксины. Так же хотелось бы видео по исgользованию scss map. К примеру если у меня 2 темы в приложении могу ли я использовать в компонентах одну переменную для черного и белого текста.
@@promoabys Имел ввиду сss переменные. А по поводу алиасов - в папке src находится папка styles где лежат файлы с переменными и миксинами, эти файлы мы хоти юзать в модулях компонентов. Пути частенько получаются громоздкие. Короче говоря на сколько я понял алиасы для scss можно применять точно также. "@styles/*": ["styles/*"]
Есть либа, оч простая в использовании, называется craco (так как-то название), там за 5 мин все можно настроить, есть примеры настройки в гугле, сам пару раз юзал на мелких проектах.
пробую переделать с вебпака на вит, почти получилось. но вот ошибка Expected "from" but found "{" в конструкции import type { foo} from никак не решается. написано что в новых версиях это решено, но это уже было давно и сейчас ерсии еще новее. можно ли это как-то решить?
Мне не нравится то, что в проекте с использованием TypeScript, у нас отключается авто-лог ошибок при сохранении файлов. Там только сообщение о том, что сервак успешно запущен. Нужно прописывать команду tsc.
Со стандартным create react app работал код { "compilerOptions": { "baseUrl": "src" }, "include": [ "src" ] } А с Vite почему-то не работает. Кто может подсказать, дайте совет, пожалуйста.
Неудобно, если честно - новую папку создал и надо ее ручками в конфигах прописывать.. Я бы хотел чтобы работало как в первом варианте, но не писать src/ в начале. Нигде не нашел решения. Хотя в CRA можно было так сделать
Михаил, мы все учимся у Вас работать, но что бы хорошо работать, нужно хорошо отдыхать, раз вы так хорошо объясняете как нужно работать, может сможете научить еще и отдыхать хорошо?=)
Отличный топик)) Я бы с радостью поделился, но я засыпаю с мыслями о работе и просыпаюсь чаще всего с ними же)) С тех пор, как работа стала почти полностью удаленной, главный секрет в попытках отпустить рабочие процессы - это выйти из дома)) В идеале когда есть какое-то хобби вне дома. Еще лучше если хобби как-то связано с физической активностью.
