Как использовать JQueryUI в представлениях в Rails 6

Dec 04 2020

У меня проблемы с использованием JQuery и JQueryUI в приложении Rails 6.

JQuery и JqueryUI работают в application.js

ОДНАКО JQueryUI не работает в представлениях. Как заставить его работать в обоих случаях? Мой код ниже.

Я побежал yarn add jquery

Я побежал yarn add jquery-ui-dist

В environment.js :

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

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

const aliasConfig = { 'jquery': 'jquery/src/jquery', 'jquery-ui': 'jquery-ui-dist/jquery-ui.js' };
environment.config.set('resolve.alias', aliasConfig);

module.exports = environment

В application.js :

require("@rails/ujs").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
require("jquery-ui");
require("custom/scripts")

Я тестирую JQuery и JQueryUI в custom / scripts.js и в packs / search.js

custom / scripts.js загружается в application.js и выглядит так:

$(document).ready(function(){
  var test = $().jquery console.log('custom/scripts.js JQuery version ==> ' + test); var test_ui = $.ui ? $.ui.version || "pre 1.6" : 'jQuery-UI not detected';
  console.log('custom/scripts.js UI version ==> ' + test_ui);
});

packs / search.js загружается в представление с

<%= javascript_pack_tag "search" %>

packs / search.js выглядит так (точно так же, как custom / scripts.js):

$(document).ready(function(){
  var test = $().jquery console.log('packs/search.js JQuery version ==> ' + test); var test_ui = $.ui ? $.ui.version || "pre 1.6" : 'jQuery-UI not detected';
  console.log('packs/search.js UI version ==> ' + test_ui);
});

Результат в консоли:

custom/scripts.js JQuery version ==> 3.5.1
custom/scripts.js UI version ==> 1.12.1
packs/search.js JQuery version ==> 3.5.1
packs/search.js UI version ==> jQuery-UI not detected

Ответы

1 NinhLe Dec 15 2020 at 11:50

Проблема, возможно, в том, как Webpack разрешает плагин. Я удалил эту строку

 $: 'jquery'

в environment.jsи кажется нравится это работает!