Рендеринг JS с контроллера Rails с веб-упаковщик - PullRequest
Новая
       28

Рендеринг JS с контроллера Rails с веб-упаковщик

0 голосов
/ 19 февраля 2019

Просто заменил конвейер js в моем приложении Rails на webpacker.

Большинство вещей работает правильно, однако контроллеры, которые отображают js, больше не работают должным образом. 

def action
  format.js { render "javascript_partial" }
end

Обычно,Приведенное выше будет выполнять файл, на мой взгляд, с именем javascript_partial.js.erb или action.js.erb, если он не указан в render.

Кажется, проблема в том, что эти файлы не имеют связи с конвейером webpacker и поэтомуне может получить доступ к глобальным библиотекам, таким как jquery или явно управлять своими собственными imports.

. Этот код теперь вызывает синтаксические ошибки на стороне клиента, поскольку он не может получить доступ к функции jquery $: 

$("#element").html(<= j render partial: 'partial', locals: { object: @object } %>

У меня есть связанная проблема с встроенными js в моих представлениях.Что-то вроде следующего: 

<%= form.collection_select ... onchange: 'Rails.fire(this.form, "submit")' %>

больше не работает, потому что встроенные js не могут получить доступ к глобальным объектам, таким как Rails.

Это кажется простой проблемой, но я не могу найтидокументация везде.

Кто-нибудь, как согласовать webpacker с исторически ожидаемым поведением Rails / js?Нужно ли вернуть sprockets?

Если это поможет, мой файл javascript/packs/application.js будет выглядеть примерно так: 

import Rails from 'rails-ujs';
import Turbolinks from 'turbolinks';

Rails.start();
Turbolinks.start();

$(document).on("turbolinks:load", () => {
  // initial setup ...
});

Вышеописанное работает отлично,и имеет доступ к jquery, потому что я экспортировал его в config/webpack/environment.js, 

environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  jquery: 'jQuery'
}));

Ответы [ 2 ]

0 голосов
/ 21 августа 2019

У меня была похожая проблема, когда у меня был неопределенный $ в строке $("#element").html(

Моя конфигурация аналогична вашей, которую я решил, выставив в конце файла pack/application.js

windows.jQuery = jQuery
window.$ = $
0 голосов
/ 19 февраля 2019

Понял это благодаря этой замечательной статье !

Использование expose-loader для раскрытия ключевых библиотек ванили JavaScript, разбросанных по всему вашему приложению.

1)Установка зависимости, 

yarn add expose-loader --dev

2) Настройка config/webpack/environment.js, 

const { environment } = require('@rails/webpacker');

environment.config.merge({
  module: {
    rules: [
      {
        test: require.resolve('jquery'),
        use: [{
          loader: 'expose-loader',
          options: '$'
        }, {
          loader: 'expose-loader',
          options: 'jQuery'
        }]
      },
      {
        test: require.resolve('rails-ujs'),
        use: [{
          loader: 'expose-loader',
          options: 'Rails'
        }]
      }
    ]
  }
});

module.exports = environment;
...