Ruby on Rails 6/7, урок #12 | Webpacker 6 - миграция JS и CSS с Sprockets

[@IlyaBodrovKrukowski]

Друзья, если Webpacker кажется вам слишком сложным решением, я советую обратить внимание на ESBuild. Вот в этом уроке я рассказываю, как перейти с Webpacker на ESBuild (спойлер: это куда проще, чем полностью мигрироваться на Webpacker) kzbin.info/www/bejne/iHiYnnyOe8R_hpI Особенно учитывая тот факт, что в феврале 2022 года Webpacker более не поддерживается сообществом и работа над ним остановлена. Фактически, я даже РЕКОМЕНДУЮ сразу переходить на Esbuild, игнорируя Webpacker.

[@dmitrys.p.5241]

А этот урок 12 есть смысл смотреть? Или сразу 22, а потом к 13 переходить?

[@IlyaBodrovKrukowski]

@@dmitrys.p.5241 Если вы не хотите использовать webpacker, то этот урок смотреть нет смысла, переходите сразу на esbuild

[@dmitrys.p.5241]

@@IlyaBodrovKrukowski понял, спасибо. У меня знакомый сегодня сказал что все делал по этому уроку и у него рухнул сервер и какие то сложности с ветками в гите. Уж не знаю как это связано. Сам до этого урока еще не дошел :)

[@IlyaBodrovKrukowski]

@@dmitrys.p.5241 Как вы понимаете, я не могу нести ответственность за то, что происходит у зрителей. Но я неоднократно предупреждаю, что переход на webpacker - это боль. Esbuild куда проще

[@IlyaBodrovKrukowski]

@@dmitrys.p.5241 И, само собой, Webpacker никак не может влиять на ветки git. В любом случае, это решение уже устарело и больше не поддерживается, что и написано в официальных доках

[@wised_one]

16:52 yarn add autoprefix css-loader css-minimizer-webpack-plugin mini-css-extract-plugin postcss postcss-flexbugs-fixes postcss-import postcss-preset-env sass sass-loader

[@yuriysh8842]

Очередная благодарность Илье за полезную информацию!

[@IlyaBodrovKrukowski]

На здоровье :D

[@kremkasu]

Спасибо за ваши уроки!

[@IlyaBodrovKrukowski]

[@gek62]

Спасибо большое за ваши старания, мне лично это очень полезно так как я Junior Ruby(RoR) developer, всем удачи!

[@IlyaBodrovKrukowski]

Благодарю :)

[@ИкболЗулолов]

Привет! какие навыки нужна джуниору? Тоже начал учить RoR

[@IlyaBodrovKrukowski]

@@ИкболЗулолов Привет! Знать язык Ruby на среднем уровне, понимать ООП, уметь работать с HTML/CSS

[@ДжонниМнемоник-о4ш]

Чудесное видео. Вебпак и yarn жизнь разраба, конечно, облегчают.

[@IlyaBodrovKrukowski]

Спасибо! Да, не без этого. Кстати, вот ещё интересные соображения создателя Rails (в описание тоже добавлю) world.hey.com/dhh/modern-web-apps-without-javascript-bundling-or-transpiling-a20f2755

[@amaJlgama]

спасибо за урок, контент бомба!

[@IlyaBodrovKrukowski]

[@ВикторИвлиев-н2ч]

Все супер, вспомнил почему никогда не использовал хелпер tag (увидел в самом начале видео) все из-за haml и js фреймворков. Спасибо за проделанную работу.

[@IlyaBodrovKrukowski]

На здоровье :)

[@dmitriyborowskiy3468]

Спасибо за видео. Очень интересно. На проекте ещё раньше перешли на вебпакет. Полет нормальный.

[@IlyaBodrovKrukowski]

Забавно то, что он уже устареть успел ESbuild в моде, делал по нему урок тоже

[@EdritKolotit]

Офигеть, столько много узнал.

[@IlyaBodrovKrukowski]

Рад, что понравилось :)

[@Aluston1783]

Здравствуйте Илья! Спасибо за видос! После деплоя на продакшене нужно компилировать асетсы или ещё что-то нужно делать что бы все стили и js-файлы подтянулись?

[@IlyaBodrovKrukowski]

Зависит от сервиса, где это будет хостится. Heroku делает сам, в других случаях может потребоваться делать assets:precompile

[@vladimirm4617]

Спасибо за подробную информацию. Вот такой вопрос - планируется видео про деплой rails приложения в продакш? Инструкции в сети есть, но новичкам все таки сложно все настроить. С помощью capistrano вообще реально rails приложения на базе SQLite3 задеплоить или лучше не заморачиваться и делать сразу с базой PostgreSQL?

[@IlyaBodrovKrukowski]

Мысль такое видео сделать есть, даже вместе с одним товарищем, который хорошо разбирается в теме, но всё как-то не до этого - у него свои дела, плюс из-за всех этих ковидных штук сложновато собраться (мы в разных странах живём). Но в целом да, конечно хотелось. Делать деплой с sqlite3 смысла нет, лучше сразу PG. Кстати, на Heroku деплой очень простой - там буквально несколько команд надо сделать

[@vladimirm4617]

@@IlyaBodrovKrukowski Ок. С Heroku все более менее понятно. Но настроить и запустить сервер на nginx + passenger без опыта не просто.

[@IlyaBodrovKrukowski]

@@vladimirm4617 Да, понимаю. Постараюсь что-нибудь придумать!

[@ledockol]

Странно написал сообщение, а оно было удалено. DHH анонсировал изменения в Rails 7. В нем webpack не будет в принципе. Интересное видео кстати. Абсолютно компонентный подход во frontend, позволяющий динамически, при необходимости использовать React JS, Vue JS, d3, даже встроенные компоненты rails, не прибегая к использованию gem. Turbo вместо turbolinks, Hotwire and Stimulus JS, CDN sources

[@IlyaBodrovKrukowski]

Не знаю, если честно, я точно ничего не удалял (кстати,в уведомлениях коммент действительно есть почему-то)... Был только коммент от спамера вчера, но его автоматически убрало. Может быть, YT что-то чудит? Да, тот пост мы в телеграме обсуждали уже. В целом, там выходит, что он ДУМАЕТ сделать так, чтобы webpacker не требовался, но для ряда приложений он будет нужен в любом случае. Поэтому не похоже, чтобы webpacker стал неактуальным в ближайшие несколько лет, по крайней мере :)

[@neuromancersmith9890]

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

[@IlyaBodrovKrukowski]

На здоровье!

[@ItmenLinux]

кстати DHH на днях показал что в последней версии рельс будет без вебпака

[@IlyaBodrovKrukowski]

Да, это обсуждали в чате уже, ссылку по теме я добавил в описание тоже :). Но там очень большой вопрос ещё, как оно будет. Плюс, для ряда решений всё равно он нужен будет, иначе не получится компилировать приложения с JSX и тп. Но соображения интересные, это правда

[@АлександрИноземцев-и4х]

Большое спасибо за видео, не хватает детального примера перетаскивания js файлов, библиотек, jquery всякого под вебпак, про bootstrap спасибо. Я имею ввиду пример когда уже есть куча кода понаписанного на js и лежащая под sprockets и это мы все перетаскиваем в вебпак. Если есть зарубежные гайды, буду благодарен за ссылки

[@IlyaBodrovKrukowski]

Наверняка есть, но я так сходу не скажу, если честно... Советую обратить внимание на то, что начиная с Rails 7 можно использовать более простой esbuild, а не webpack (про это будет отдельный урок очень скоро)

[@АлександрИноземцев-и4х]

@@IlyaBodrovKrukowski очень интересно будет глянуть, вопрос как они будут туда реакт завозить, у меня проект с ним да и на прошлых проектах была эта связка

[@IlyaBodrovKrukowski]

@@АлександрИноземцев-и4х Да там всё окей, в принципе. DHH делал даже видео про это (только там Stimulus у него). Ну, есть и третий вариант - importmap, но он сыроват, как мне кажется

[@MashinLife]

Здравствуйте! Не подскажите почему падает компиляция на application.scss?

[@IlyaBodrovKrukowski]

Добрый! Нет, так как без текста ошибки сказать что-либо сложно. Но причин может быть много - миграция на Webpacker это не самая приятная процедура. Но есть и хорошие новости: так как буквально сегодня вышла версия Rails 7, там предлагается новый подход без Webpacker вообще :) Я буквально в течение недели-другой сделаю видео по теме, так что, если перед вами не стоит задачи обязательно перейти на Webpacker, я бы пока этот переход отложил. Посмотрите, как это реализовано в Rails 7 и подумайте, как вам будет проще. В любом случае, совершенно неважно, как подключается JS/CSS - на изучение основных принципов Rails это абсолютно никак не влияет

[@MashinLife]

@@IlyaBodrovKrukowski Спасибо за ответ, уроки шикарные! Я брал ваш проект урока №12, и не компилится только scss. Свой проект смог перевести на webpacker с добавлением ProvidePlugin (jquery, popper.js). Деплоил на хероку всё отлично. rails 5.2.6 ruby 2.7.5 yarn 1.22.13 node 14.15.1 Bootstrap работает. Странно конечно, возможно локальные проблемы. Потратил на это 2 дня.

[@IlyaBodrovKrukowski]

@@MashinLife Странно, ну вот у меня же идёт компиляция в дальнейших уроках :) Ну, может быть там Node.js старой версии, может что ещё - честно, я так не могу сказать. Но если получилось, то и отлично:)

[@ИкболЗулолов]

а вы случайно не журналист? У вас такой приятный голос и вы так говорите, что как будто вы журналист

[@IlyaBodrovKrukowski]

Ну, нет - просто преподавал долгое время в разных организациях :)

[@egorkas8166]

Спасибо большое за Вашу работа! но у меня ничего не получилось.. два дня сидел, вроде версии все делал аналогичные уроку. но что-то не срослось у меня с webpacker

[@IlyaBodrovKrukowski]

С момента записи видео ситуация изменилась. Команда передумала вообще выпускать 6й webpacker и он перестал поддерживаться. Советую сразу переходить на ESBuild как описано тут, он куда проще kzbin.info/www/bejne/iHiYnnyOe8R_hpI

[@egorkas8166]

@@IlyaBodrovKrukowski очень Вас благодарю! спасибо за Ваше внимание! попробую!

[@OmGdoob]

Пока переходили с 5й версии на 6ю, в седьмых рельсах вебпакера по умолчанию нет, и снова возвращаемся на спрокетс 😂

[@IlyaBodrovKrukowski]

Это, конечно, не очень приятно, согласен. Но в общем и целом webpacker никуда не девается, во всяком случае, пока :)

[@OmGdoob]

@@IlyaBodrovKrukowski да, вероятно в простых приложениях он не нужен будет, а где больше разных модулей, то без него, я думаю, обойтись будет сложнее.

[@IlyaBodrovKrukowski]

@@OmGdoob Да, по-моему DHH примерно так и говорил

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

Здравствуйте, Илья! Youtibe уже несколько раз удалял мой комментарий, напишу чуть по-другому, может не удалят в этот раз. Спасибо Вам за совет, проблемка действительно была в конфигах, теперь всё работает. Правда установил когда уже до 17-го урока дошел, package.json пришлось править только дополнительно. Еще с такой ошибкой столкнулся: "Gem::Ext::BuildError: ERROR: Failed to build gem native extension. An error occurred while installing sqlite3 (1.4.4), and Bundler cannot continue. Could not create Makefile due to some reason, probably lack of necessary libraries and/or headers. " Ну в этом случае просто остался на версии sqlite3 (1.4.2).

[@IlyaBodrovKrukowski]

YT может удалять комменты, это известная ошибка уже года два, увы. Проблема с sqlite3 обычно решается, если пос тавить sqlite3 через msys2. Можно прямо так и погуглить, там будет команда нужная. В таком духе packages.msys2.org/package/mingw-w64-x86_64-sqlite3?repo=mingw64

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

@@IlyaBodrovKrukowski Т.е. через пакетный менеджер для Windows ? Просто не нашел других способов, кроме классических, установки sqlite3 на Линукс Ubuntu 21.10 ?

[@IlyaBodrovKrukowski]

@@ГлебЖегулин-й2ы Ну да через msys2. Он идёт в комплекте с ruby, в директории, где установлен ruby, есть соответствующий файл

[@dmitrys.p.5241]

Всем привет! К своему сожалению, я все таки полез в этот урок =)). Долго все было и больно, но криво встало и вот когда уже решил делать третий заход, обнаружил, что у меня не выпадает дропдаун на имени пользователя залогиненного. Думал в коде какие то проблемы, но откатился аж до 9 урока и все равно не выпадает. Тут похоже понял, что проблемы с JS т.к. ковыряясь с вебпакером я по 100 раз удалял nodejs и ставил обратно, npm, nvm, в общем все чего мог каснуться. И видимо проблема теперь из за этого. Была проблема с тем что не мог поменять версию node, но в итоге ее решил. Но теперь команда nodejs -v говорит о том что команда "nodejs" не найдена. Я устанавливаю nodejs но он все равно пишет что нет такой команды. Посему два вопроса: 1) Правильно я понимаю что дропдаун у меня не выпадает из-за проблем с nodejs? 2) Как его поставить? Притом что команды node -v, npm -v работают.

[@dmitrys.p.5241]

ввел команду npm install и дропдаун заработал. Вернулся к уроку и проделал все сначала и после ввода команды yarn add autoprefix css-loader css-minimizer-webpack-plugin mini-css-extract-plugin postcss postcss-flexbugs-fixes postcss-import postcss-preset-env sass sass-loader он опять перестал работать. Что то я в стену уперся. Куда копать?

[@ValeryVasilkov-11]

@@dmitrys.p.5241 Если используем yarn, то npm не нужно использовать. Т.е. вместо npm install нужно yarn install.

[@StasV-l2c]

дякую!

[@IlyaBodrovKrukowski]

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

Здравствуйте, Илья! В первую очередь хочу выразить Вам огромную признательность за столь колоссальный труд, которому нет аналогов. Спасибо! Очень помогаете в изучении Ruby. Сейчас как раз досмотрел 12-й урок и возник вопрос следующего содержания: После всех проделанных манипуляций с установками, под конец появилась такая ошибка: «Webpacker::Manifest::MissingEntryError in Pages#index». Я понял, что webpacker перестал поддерживаться и т. д., если бы за этой ошибкой не последовала череда следующих, даже после перехода в основную ветвь проекта: ……………………………………………………………………………………………………. /home/professor/.rbenv/versions/3.0.2/lib/ruby/gems/3.0.0/gems/bundler-2.3.15/lib/bundler.rb:534:in `split': invalid byte sequence in UTF-8 (ArgumentError) /home/professor/.rbenv/versions/3.0.2/lib/ruby/gems/2.7.0/gems/bundler-2.3.14/shared_helpers.rb:292:in `split': invalid byte sequence in UTF-8 (ArgumentError) Listen::Error::INotifyMaxWatchesExceeded: Unable to monitor directories for changes because iNotify max watches exceeded. See github.com/guard/listen/blob/master/README.md#increasing-the-amount-of-inotify-watchers . Caused by: Errno::ENOSPC: No space left on device - Failed to watch "/home/professor/Документы/rubytut/ROR/lesson_1/AskIt/config/locales": The user limit on the total number of inotify watches was reached or the kernel failed to allocate a needed resource. ……………………………………………………………………………………………………... Причем при инициализации приложения командой «rails _6.1.6_ new Name-T» (и даже на любой версии рельс) эти ошибки появлялись после строк Fetching gem metadata from rubygems.org/........... Resolving dependencies.... Using rake 13.0.6 ………………………………………………………………………. /bundler.rb:534:in `split': invalid byte sequence in UTF-8 (ArgumentError) /shared_helpers.rb:292:in `split': invalid byte sequence in UTF-8 (ArgumentError) К тому же, если инициализация приложения выполнялась на ruby 2.7.3, то автоматически происходил переход на версию 3.0.2 без обращения к «rbenv». Переустановка bundler не решила проблему. Однако, в файлах «bundler.rb:534» и в «shared_helpers.rb» для версий bundler 2.3.14 и 2.3.15 я добавил следующую строчку «encode('UTF-8', invalid: :replace)» в метод «set_path» shared_helpers.rb например и всё заработало, в том числе запуск сервера из директории bin. Вроде бы проблема решена полностью... Не могли бы Вы подсказать, почему возникла данная проблема и правильно ли я подошел к ее решению?

[@IlyaBodrovKrukowski]

Почему - не представляю себе. Ну, то есть missing entry - это стандартная история, когда webpacker что-то не может скомпилировать, первый раз я просидел с этой ошибкой несколько часов. Правильные конфиги обычно решают проблему. Что касается bundler - неясно, как webpacker может на него повлиять. Я бы сделал gem update --system для начала, а в случае чего переставил Ruby. Если по этой ошибке ничего не гуглится, то возможно имеет смысл открыть баг репорт для bundler