Как более-менее понятно, в общем, из названия, здесь будут описаны два способа (из множества возможных): в основном, нас интересует сегодня компиляция и обслуживание активов посредством webpack, тем не менее - коснемся и старого, но по-прежнему вполне работоспособного способа достижения данной цели средствами sprockets.
Об использовании importmap-rails в контексте решения аналогичной задачи можно почитать на форуме.
В качестве примера создадим приложение, отображающее в виде эффектного чарта актуальные курсы валют по версии openexchangerates.org. Понадобится бесплатный ключ доступа; написанный же быстрой строкой контроллер приложения способен выглядеть как-то так:
class RatesController < ApplicationController
def get_current_exchange
return Rails.cache.fetch('get_current_exchange', :expires_in => 10.hours) {
require 'money/bank/openexchangerates_bank'
moxb = Money::Bank::OpenexchangeratesBank.new
moxb.access_key = ENV['KEY_OPENEXCHARGERATES']
[moxb.update_rates, moxb.rates_timestamp]
}
end
def index
@current_exchange = get_current_exchange[0]
@timestamp = get_current_exchange[1]
end
end
Вьюха странички (как и полностью готовое в работе приложение) доступна в репозитории exchange-rates-rails-app. Думаю, легко найдете:
Поехали. Экономя время, генерим рельсы с уже предустановленным вебпаком:
rails new exchange-rates-app -j webpack
Нам понадобятся в Gemfile эти джемы:
gem "money-openexchangerates-bank"
gem "figaro"
gem "sassc-rails"
Бундлим, затем:
bundle exec figaro install
Редактируем:
# config/application.yml
KEY_OPENEXCHARGERATES: '************************'
Далее:
yarn add highcharts bootstrap @popperjs/core
Редактируем:
# app/javascript/application.js
import "@hotwired/turbo-rails"
import "./controllers"
import "bootstrap"
import Highcharts from 'highcharts'
import addMore from "highcharts/highcharts-more"
import addExporting from "highcharts/modules/exporting"
import addExportData from "highcharts/modules/export-data"
import addAccessibility from "highcharts/modules/accessibility"
addMore(Highcharts)
addExporting(Highcharts)
addExportData(Highcharts)
addAccessibility(Highcharts)
window.Highcharts = Highcharts
# app/assets/stylesheets/application.scss
@import '../../../node_modules/bootstrap/scss/bootstrap';
Пожалуй, на этом все:
rake assets:precompile
rails s
Замечу, что скрипт Highcharts во вьюхе придется обрамить следующим образом:
<script>
document.addEventListener('DOMContentLoaded', function () {
...
});
</script>
, также, как показано выше, оказывается неизбежным использование:
window.Highcharts = Highcharts
Поддержка на форуме Highcharts уверяет, что в этих двух хаках нет нужды, но без них, воля ваша, Highcharts на Ruby on Rails у меня не работает:
Uncaught ReferenceError: Highcharts is not defined
at HTMLDocument.<anonymous>
, и ровно то же самое говорят многочисленные ответы и комментарии на StackOverflow. Впрочем, если ваш опыт диктует иные решения - не стесняйтесь описать их здесь или на форуме.
Все получается несколько проще, если функции конвейера активов (asset pipeline) полностью (включая и джаваскрипты) возложена на sprockets (gem "sprockets-rails").
В этом случае:
# app/assets/config/manifest.js
//= link highcharts/highcharts.js
//= link highcharts/highcharts-more.js
//= link highcharts/modules/exporting.js
//= link highcharts/modules/export-data.js
//= link highcharts/modules/accessibility.js
, также добавим эту строчку:
# config/initializers/assets.rb
Rails.application.config.assets.paths << Rails.root.join('node_modules')
И вот на этом точно все. Указанный репозиторий GitHub по ссылке выше содержит в Readme ссылку на commit, иллюстрирующий также и использование sprockets-rails в качестве единственного asset pipeline. Возможно, в ряде случаев это по-прежнему удобно.
Комментарии в блоге