Cara menggunakan JQueryUI dalam tampilan di Rails 6

Question

Saya mengalami kesulitan menggunakan JQuery dan JQueryUI di aplikasi Rails 6.

JQuery dan JqueryUI keduanya bekerja di application.js

NAMUN, JQueryUI tidak berfungsi dalam tampilan. Bagaimana cara membuatnya berfungsi dalam kedua kasus? Kode saya ada di bawah.

Aku lari yarn add jquery

Aku lari yarn add jquery-ui-dist

Di 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

Dalam application.js :

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

Saya menguji JQuery dan JQueryUI di custom / scripts.js dan di packs / search.js

custom / scripts.js dimuat di application.js dan terlihat seperti ini:

$(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 dimuat dalam tampilan dengan

<%= javascript_pack_tag "search" %>

packs / search.js terlihat seperti ini (sama persis dengan 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);
});

Hasil di konsol:

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

Answer 1

Masalahnya mungkin bagaimana Webpack menyelesaikan plugin. Saya telah menghapus baris ini

 $: 'jquery'

di environment.jsdan sepertinya berhasil!