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

Posted 2023-05-08

【中文标题】如何在 Rails 6 的视图中使用 JQueryUI

【英文标题】：How to use JQueryUI in views in Rails 6

【发布时间】：2021-03-15 18:47:59

【问题描述】：

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

【参考方案1】：

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

 $: 'jquery'

在environment.js 中，似乎它有效！