Rails 6의 뷰에서 JQueryUI를 사용하는 방법

Question

Rails 6 앱에서 JQuery 및 JQueryUI를 사용하는 데 어려움이 있습니다.

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")

custom / scripts.js 및 packs / search.js 에서 JQuery 및 JQueryUI를 테스트합니다 .

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

Answer 1

문제는 Webpack이 플러그인을 해결하는 방법 일 수 있습니다. 이 줄을 제거했습니다

 $: 'jquery'

에서 environment.js작동하는 것처럼 보입니다!