Введение
Каждое утро появляется новая среда JavaScript, которая пытается решить какую-то проблему. Если ваше приложение работает на платформе, отличной от JS, вы должны быть спокойны, не имея дело с кучей пакетов, плавающих в реестре npm. Но может быть случай, когда вы хотите построить мост между вашими устаревшими приложениями и новыми платформами JS. В этом посте я хотел бы рассказать, как я интегрировал VueJS в Ruby on Rails.

Rails (4.x+) начал поставляться с sprockets — библиотекой Ruby для компиляции и обслуживания статических ресурсов (js, css, изображений и т. д.). Он отлично справляется с обработкой ванильного JavaScript и jQuery, но на сегодняшний день не может обрабатывать версию ES6. И это затрудняет поддержку таких фреймворков, как ReactJS, VueJS и т. д., поскольку они могут содержать участки кода, написанные на ES6. Один из способов обойти это — использовать гем Webpacker. Это Ruby-версия пакета webpack для приложений JavaScript, которые находятся в приложении Rails. Это помогает компилировать и связывать код JavaScript (даже в ES6) и делает его доступным в виде статических ресурсов вместе с конвейером ресурсов из звездочек.

Требования
Поскольку мы в основном сосредоточены на работе с Webpacker, требования будут такими же, как и для этого гемма.
Ruby 2.2+
Rails 4.2+
Node.js 6.0.0+
Yarn 0.25.2+

Разработка
В этом разделе я покажу, как я создал небольшой компонент Vue и интегрировал его в приложение Rails.

Создание компонента Vue
Для этого примера, поскольку мой компонент достаточно мал, я решил использовать компонент с одним файлом (SFC). Компонент представляет собой простую панель поиска, состоящую из текстового поля ввода и кнопки. Когда пользователь вводит некоторый текст и нажимает кнопку (или нажимает клавишу ввода), он обращается к API, заданному как свойство компонента, и извлекает набор результатов. Здесь — репозиторий git для компонента.

Приложение Rails
Создайте приложение rails с помощью стандартного генератора. Для удобства я использовал slim gem в качестве шаблонизатора в своем приложении rails и webpacker gem для интеграции с фреймворком VueJS.

Установите компонент Vue в приложении rails.

npm install --save https://github.com/rahulakurati/vue_search_bar

Приведенная выше команда должна установить компонент vue в приложение rails, и соответствующая запись должна быть там в файле package.json проекта.

Гем веб-упаковщика Rails устанавливает каталог app/javascript для размещения всех связанных файлов Javascript для компонентов. Это отличается от того, который по умолчанию поставляется Rails для конвейера активов, который находится в app/assets.

Я создал файл search_box.js в каталоге app/javascript/packs, чтобы загрузить компонент Vue, который мы установили ранее, и привязать его к объекту окна.

import Vue from 'vue/dist/vue.esm'
import SearchBox from 'vue_search_bar/src/SearchBox'
window.loadSeachBoxComponent = function() {
 new Vue({
           el: '#searchbox',
           components: {'search-box': SearchBox}
 });
};

Перейдите к тонкому файлу, в котором вы хотите, чтобы компонент отображался. В этом примере у меня есть частичный файл _header.html.slim, в котором я хочу отобразить свой компонент Vue.

В строке № 4 я включил компонент vue, следуя синтаксису slim. В строке № 9 вызывается функция javascript, которую мы создали ранее, для загрузки экземпляра Vue компонента и привязки его к div с идентификатором #searchbox в строке № 3.

Теперь приложение rails готово для визуализации компонента Vue. Запустите команду rails s, чтобы запустить приложение rails на локальном хосте.

На изображении выше панель поиска с надписью «Поиск по игре» — это наш компонент Vue, а кнопка справа с надписью «Добавить пользователя в игру» — это обычный HTML-элемент.

В приведенном выше примере я просто хотел продемонстрировать, как использовать гем Rails Webpacker и интегрировать приложение rails с новейшей внешней средой, такой как VueJS. Надеюсь, это полезно. Пожалуйста, дайте мне знать, если какие-либо вопросы по комментариям.

Ссылка
https://github.com/rails/webpacker