ранее опубликовано на web-crunch.com

Webpack, хотя его немного сложно настроить, остается передовым инструментом для современной веб-разработки. Этот пост/видео проведет вас через добавление Webpack в более старый проект Ruby on Rails 5.2, а также в последнюю бета-версию Ruby on Rails 6.

Представленные здесь демонстрации предназначены для общего обзора того, как можно использовать Webpack внутри Ruby on Rails независимо от версии.

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

С Webpacker вы получаете эти и другие функции:

  • веб-пакет 4.х.х.
  • ES6 с бабелем
  • Автоматическое разделение кода с использованием нескольких точек входа
  • Таблицы стилей — Sass и CSS
  • Изображения и шрифты
  • PostCSS — автопрефиксер
  • Сжатие ресурсов, исходные карты и минимизация
  • поддержка CDN
  • React, Angular, Elm и Vue поддерживаются «из коробки».
  • Помощники представления Rails

О многих из этих вещей Rails уже позаботится с конвейером ресурсов. При желании вы можете использовать конвейер ресурсов для изображений, шрифтов, css и многого другого, опираясь на webpacker для JavaScript. Это будет новое значение по умолчанию в Rails 6.

Общие вопросы

Зачем мне нужен веб-пакет с Rails, если конвейер ресурсов уже присутствует?

На самом деле, в большинстве случаев вы нет, но это упрощает доступ к современным интерфейсным платформам, таким как Vue.js или React.js, с минимальным временем настройки. Конвейер ресурсов по-прежнему работает, как и должен, наряду с новым рабочим процессом веб-пакета. Все активы, связанные с webpack, теперь находятся внутри каталога app/javascript.

Зависит ли веб-пакет от конвейера ресурсов? Они конфликтуют?

Gem webpacker не зависит напрямую от конвейера ресурсов, хотя он подключается к нескольким командам rake, связанным с каждой установкой Rails rails assets:precompile, например, запускает компиляцию конвейера ресурсов и команду webpack для компиляции всех ресурсов в данном проект с использованием обоих. Они конфликтуют только в том случае, если ваш код конфликтует. Хорошей практикой является разделение задач. Обычно я создаю весь javascript в app/javascript, а затем обращаюсь к конвейеру ресурсов app/assets/ для любых css, изображений или других ресурсов, которые могут потребоваться проекту, над которым я работаю.

Нужен ли мне конвейер активов с добавлением веб-пакета?

На самом деле нет, но конвейер ресурсов имеет множество удобных функций для рендеринга ресурсов в представлениях, к которым вы или ваша команда можете привыкнуть. К счастью, вы можете сделать то же самое с активами внутри app/javascript. Рендеринг изображений, ресурсов, CSS, JavaScript и многого другого вполне возможен.

Хотите изучить Ruby on Rails с нуля?

Ознакомьтесь с моим новым курсом Hello Rails — hellorails.io