Rails 6 / Webpack не может скомпилировать изображения, на которые ссылается js.erb, в производстве? (но работаю в разработке)

Во время разработки у меня нет проблем (после запуска bundle exec rails webpacker:install:erb) с этим кодом в Rails 6 с использованием Webpack:

# app/javascript/raty.js.erb

<% helpers = ActionController::Base.helpers %>

$(document).on("turbolinks:load", () => {
  $('.star-rating').raty({
    starOn: "<%= helpers.asset_pack_path('media/images/star-on.png') %>",
    starOff: "<%= helpers.asset_pack_path('media/images/star-off.png') %>",
    readOnly: true,
    score: function () {
    return $(this).attr('data-score');
    }
  });
});

Имейте в виду, что я также использую Webpack для загрузки статических ресурсов, поэтому никаких звездочек (хотя я не удалял его драгоценные камни и не касался какой-либо конфигурации, связанной с конвейером ресурсов; просто игнорируя это на данный момент). Это означает, что я храню все свои изображения в app/javascript/images, а затем требую в соответствии с документацией:

# app/javascript/packs/application.js

// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
const images = require.context('../images', true)
const imagePath = (name) => images(name, true)

Однако в производстве мой push отклоняется Heroku, потому что ссылки на файлы .png (star-on.png и star-off.png) не могут быть найдены, поскольку (я думаю) Webpack их компилирует в каталог /public, поэтому их больше нет в пути /media/images. К сожалению, руководства по Heroku не охватывают Rails 6 / Webpack, и все ответы, с которыми я сталкивался, предназначались для Sprockets, а не для Webpack.

Любой совет будет очень признателен!


ruby-on-rails webpack javascript dev-to-production
person Dijkie85    schedule 05.11.2019    source источник

Ответы (1)


arrow_upward
4
arrow_downward

В Webpack-land вы тоже «импортируете» изображения. Учитывая следующую структуру каталогов:

app/
  javascript/
    images/
      star-on.png
      star-off.png
    packs/
      application.js
    raty.js

Вот что вы бы сделали в своем raty.js:

import $ from 'jquery'
import 'raty-js'

import starOn from "./images/star-on.png"
import starOff from "./images/star-off.png"

$(document).on("turbolinks:load", () => {
  $('.star-rating').raty({
    readOnly: true,
    starOn: starOn,
    starOff: starOff,
    score() {
      return $(this).attr('data-score');
    }
  });
});

Обратите внимание, что здесь нет необходимости использовать ERB; конфигурация Webpacker по умолчанию будет знать, как разрешить выходной путь к изображению, если у вас есть правильный путь импорта.

Кроме того, вам понадобится только следующее:

const images = require.context('../images', true)
// ...

если вам нужны справочные изображения через image_pack_tag в ваших HTML-шаблонах. Вы вполне можете захотеть это сделать, но если только для этого небольшого примера, в этом нет необходимости.

person rossta    schedule 07.11.2019
comment
Это сработало отлично! Спасибо, что нашли время :) Кстати, а где я могу найти эту информацию о webpacker? Я не нашел ничего подобного в документации Webpacker ... - person Dijkie85; 07.11.2019