Не удается найти application.js с помощью javascript_pack_tag (Webpacker)

Question

Я установил гем Webpacker в свое приложение Rails и не знаю, как включить файл app.js в папку app / javascript / packs .

Я поместил

<%= javascript_pack_tag 'application' %>

в свой макет application.html.erb и

//= require jquery/dist/jquery
//= require jquery-ui/ui/jquery-ui
//= require jquery-ujs

в него.

В конце концов, в некотором представлении (например, index.html).erb) У меня есть несколько jQuery в теге script:

<script>

  jQuery(document).ready(function(){...

И когда я обновляю страницу и смотрю в консоли, я получаю:

GET http://localhost:3000/packs/application-5e96d8f9533313f79af6.js net::ERR_ABORTED 500 (Internal Server Error)

и

Uncaught ReferenceError: jQuery is not defined

Вопрос в том, почему javascript_pack_tag преобразует application.js в application-5e96d8f9533313f79af6.js (с этими числами) в HTML и откуда это идет?

Также я упоминаю, что я преобразовываю свое приложение из Bowerв Webpack (в геме Webpacker) и не совсем уверен, как включить мои компоненты Bower для использования с Webpacker.

Любая ссылка будет признательна

Answer 1

Эти числа в имени пакета нормальны, это дайджест файла, sprockets делает это тоже в производстве (он используется для очистки кэша и обеспечения правильного кода на клиенте).

Директивы

//= require предназначены для звездочек (он же конвейер ресурсов), в webpacker вы должны использовать импорт javascript (или использовать webpack.ProvidePlugin в конфигурации, чтобы идентификатор jQuery автоматически загружался при использовании).

Также необходимо переключиться на зависимости npm - yarn add jquery jquery-ui jquery-ujs

plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery'",
        "window.$": "jquery"
    })
  ]

и используйте индивидуальный импорт (в каждом импортируемом файле, который там используется, как будто других файлов нет, webpack будет работать с дубликатами):

import $ from 'jquery';
import 'jquery-ui/themes/base/core.css';
import 'jquery-ui/themes/base/theme.css';
import 'jquery-ui/themes/base/selectable.css';
import 'jquery-ui/ui/core';
import 'jquery-ui/ui/widgets/selectable'; // and so on
import {} from 'jquery-ujs'