Ruby on Rails 7, урок #22 | Миграция с Webpacker на ESBuild и DartSass

Сегодня мы поговорим о том, как существуют решения в Rails для управления assets (JS, CSS, изображения) и узнаем, какие нововведения в этом плане предлагает Rails 7. Мы откажемся от использования Webpacker и перейдём на куда более простой ESBuild, который также позволяет выполнять предварительную компиляцию JS. Ну, а для Sass мы задействуем обычный DartSass, который доступен просто как пакет NPM. Помимо этого, поговорим о том, как настроить PostCSS и Autoprefixer. В общем, "press F to pay respects", ибо Webpacker уходит в прошлое.

Таймкоды:
00:00 Введение
00:50 Какие есть решения для управления JS/CSS? Исторический экскурс
05:30 Cssbundling, jsbundling и importmap- новые решения Rails 7
10:25 Обновление Yarn и gem
12:05 Директория assets
12:57 Настройка Cssbundling и DartSass с Bootstrap
15:10 Удаление лишних директорий и библиотек
18:00 Настройка Jsbundling и ESBuild
19:40 Удаление Webpacker
20:45 Команда build для компиляции JS
23:25 Пару слов о assets:precompile
26:50 Использование PostCSS и Autoprefixer с DartSass
29:26 Заключение

Аккаунт Ethereum (ETH): 0x719C2d2bcC155c85190f20E1Cc3710F90FAFDa16

[egorcloud]

ноу коммент, просто Бог ruby и rails))

[ledockol]

Ожидаемо комментарий пропал) Повторю:
Прекрасное изложение, как мне казалось, известного материала. Однако после просмотра данного видео понимаешь какой огромный пласт знаний у автора. Как всегда все просто и доступно изложено, с прекрасным историческим экскурсом. Илья, огромное спасибо!
Для создания аналогичного приложения с нуля в Rails 7:
rails new app_name -j esbuild -c bootstrap d postgresql -T

[vladimirm]

Как всегда подача материала на высоте!
Надеюсь, Вы расскажите, как правильно использовать Hotwire и Turbo и в rails 6, все-таки много проектов на предыдущей версии rails.

[deniszaharov]

Здравствуйте, у меня вопрос, это нормально что при изменении кастомных scss файлов при запущеном bin/dev автоматически изменения в стилях не подтягиваются, чтобы все подтянулось мне нужно выполнить rails assets:precompile + bin/dev(перезапустить)?

[kirill_prog]

Илья, подскажите пожалуйста, хочу ESBuild подружить с React. Как лучше это сделать? Через gem react-rails? Или можно как-то более правильно?

[Aluston]

Почему вы совместили sprockets и esbuild?

[Cyberdforest]

а можете еще подсказать, почему не работает после перехода на рейлс 7 и esbuilder confirm окна?

[Тёмочка-ьо]

Importmaps это боль, спустя год, попытался добавить bootstrap без esbuild и без node, очень много проблем

во первых bootstrap gem требует autoprefixer, а он уже в свою очередь Execjs т.е. js рантайм необходим гг и так много где, боль

[dmytroyatskiv]

Илья такой вопрос при импортирую import TomSelect from и возникает следущая проблема, нагуглить решение не могу, возможно ви поможете Could not resolve


1 │ import TomSelect from

[ГлебЖегулин-йы]

Здравствуйте! Спасибо за материал. В принципе мигрировался успешно, всё работает кроме дропдаунов ( в частности, где переключение языка и смена пользователя в меню). Не подскажете, как решить эту проблему?

[slavapol-v]

А зачем сделали сборку стилей через cssbundling-rails, если esbuild сам может сделать сборку стилей или я что то не понимаю?

[ГлебЖеглов-ьс]

Здравствуйте!
А Вы не сталкивались с такой ошибкой после миграции на esbuild, как "No route matches [GET] " в половине маршрутов, причем не девайзовских?? хотя в них тоже местами. Т.е. выборочно, при переходе по ссылкам, словно такого маршрута нет вовсе, хотя он есть и всё работало. В другом приложении, где девайз не использовался, эту проблему решил путем добавления в файл application.html тега "script" с веб-ссылкой на "jquery-1.11.3.min.js". Т.е. как я понимаю, это связано с jquery каким то образом, не с логикой и моделями. Но в этом раз у меня подход не сработал, в гугловском пространстве ничего подходящего не встретил. Скорее всего что-то нужно включить в "application.html", чтоб при клике на ссылку/кнопку происходил переход...

[kirill_prog]

Добрый день, Илья, не могу подружить sass с tailwind и esbuild.
Хочу использовать scss файлы в проекте для костомного css.
Подскажите пожалуйста, как это лучше сделать?
Вот такие у меня скрипты
"build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets",
"build:css:dev": "tailwindcss -i -o ./app/assets/builds/application.css",
"build:css": "build:css:dev && postcss --replace --use autoprefixer -no-map --minify compressed"