如何在Rails 6的视图中使用JQueryUI

debugcn 发表于 Dev

唐_小胡子

我在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

宁乐

问题可能是Webpack如何解决插件。我已经删除了这一行