Rails6のビューでJQueryUIを使用する方法

Question

Rails6アプリで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、それがうまくいくようです！