रेल 6 में विचारों में JQueryUI का उपयोग कैसे करें

Dec 04 2020

मुझे Rails 6 ऐप में JQuery और JQueryUI का उपयोग करने में कठिनाई हो रही है।

JQuery और JqueryUI दोनों application.js में काम करते हैं

फिर भी, JQueryUI विचारों में काम नहीं कर रहा है। मैं इसे दोनों मामलों में कैसे काम कर सकता हूं? मेरा कोड नीचे है।

मैं भागा yarn add jquery

मैं भागा yarn add jquery-ui-dist

वातावरण में ।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 को एक कस्टम / script.js में और पैक / search.js में परीक्षण करता हूं

कस्टम / script.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);
});

पैक / search.js के साथ दृश्य में लोड किया गया है

<%= javascript_pack_tag "search" %>

पैक्स / खोज.जेएस इस तरह दिखता है (कस्टम / लिपियों के समान ही)

$(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

समस्या यह है कि वेबपैक प्लगइन को कैसे हल करता है। मैंने इस लाइन को हटा दिया है

 $: 'jquery'

में environment.jsऔर पसंद यह काम करता है लगता है!