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

Question

Работая в разработке, у меня нет проблем (после запуска 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)

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

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

Answer 1

В 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. Вы можете очень хорошо сделать это, но, если только для этого небольшого примера, это не нужно.